Nick_YangXiaoTong的博客

watch监听对象中属性变化在大部分日常开发中，我们经常需要使用watch监听数据变化，但如果想监听的数据层级比较深，往往结果并不尽如人意，本文介绍两种深度监听数据变化的方法1.watch监听对象，同时用deep: true深度监听，此时只有对象中的某个值发生改变就会触发watch: { obj: { handler(newName, oldName) { console....

标签Vue、apiCloud、HTML写在前面背景介绍因一些历史遗留问题，需要维护一款借助apiCloud开发的项目，需要实现公共组件抽离通过此分享你将 了解apiCloud多页面项目中引入Vue开发 如何在浏览器中调试apiCloud项目 借助render函数实现组件的封装和引用 render函数中值得注意的点在apiCloud多页面项目中引入Vue开发新建一个标...

说到条件渲染，有些人会脱口而出v-if、v-show，你是否厌倦了if…else、switch嵌套，是否反感大量出现的||运算符，也许你需要了解一下vue的filters基本操作如果需要根据情况渲染不同数据，在条件允许的前提下，用filters代替v-if<template> <div> {{msg | aisle}} // 实用过滤器...

从Vue的生命周期入手是尝试快速理解Vue应用的一条捷径，那么Vue在生命周期中都做了哪些操作呢？话不多说，直接上代码，感兴趣的小伙伴可以跟着敲一敲，希望直接看结论的请自行滑动至末尾。VUE文件<template> <div class="life-cycle" @click="changeMessage"> {{me

关键词借助config文件夹下 index.js文件中的 proxyTable属性proxyTable: { '/apis': { // 测试环境 target: 'http://www.xxx.cn/', // 接口域名 changeOrigin: true, //是否跨域 pathRewrite: { ...

installcnpm install vue-i18n --save-dev创建语言包cn.json:{ "app": { "yes": "是" }}en.json:{ "app": { "yes": "Yes" }}main.js挂载import Vue from 'vu

手把手实现自定义table组件封装vue<template> <div class="table-with-label"> <!-- theader --> <div class="table-th"> <ul class="th-title"&am

关键词：data/$data 数据依赖props/$props 父组件传值通道slot 分发created Vue生命周期$listeners 静态函数传递$emit 事件传递$on 事件绑定watch ...

vue-cli webpack全局引入jquery首先在package.json里加入dependencies:{ "jquery" : "^2.2.3"}然后 nmp install在webpack.base.conf.js里加入var webpack = require("webpack")在module.exports的最后加入plugi...

在vue中，父子组件相互传值是很常见的业务需求，这里本文简单介绍，子组件向父组件传值，达到改变父组件属性值的两种方法props配合$emit改变父组件值子组件html: <el-button @click="$emit('update:showDlg',false)"> 取消 &

在vue项目开发中必不可少的export究竟有哪些用法呢，本文简单记录笔者心得，不足之处请多多指教！按名称导出，使用时，导入的变量名必须和导出的名称一致定义：export function nameExport (x, y) { return x * y}引用：import { nameExport } from './fetch/learnExport'使用...

在VUE项目开发中，经常会用到slot插槽，但是刚开始接触vue的小伙伴很容易被文档绕晕，这里仅描述一些自己开发中的小场景，不足之处请多多指教！！单个 slot子组件<template> <button>这是默认显示的内容<slot></slot></button></template>父组件...

vue的render函数在日常开发中被广泛应用，今天以ElementUI中的table表头重构为引，实际应用一下借助render函数实现表头搜索，不足之处请多多指教！首先引入官方demo<el-table :data="tableData" style="width: 100%" :border="true"> <el-table-column prop="d...

在vue中，为简单的组件交互定义自定义指令是明智的，它可以节省一大部分开发事件，本文简单演示拖拽指令的实现及引用main.js： 定义Vue.directive('drag', { inserted: function (el) { el.onmousedown = function (e) { let l = e.clientX - el.offsetLeft...

作者自述：在多页面Vue项目中，如何优雅的的进行权限匹配解决痛点： 复杂的身份判断 —— 在日常开发中经常用 || && 来进行身份验证从而处理DOM的显隐已经业务逻辑的交互 添加新身份以往的逻辑全部需要重现处理依赖： 正则表达式 Array.filter 闭包实现思路创建业务字典项（要求按照业务功能级别拼接）创建身份字典项（后期扩展和维护）...