Vue数据监视 内置指令 自定义指令

Vue监视数据的原理：

1. vue会监视data中所有层次的数据
2. 检测对象中的数据：

• 通过setter实现监视，且要在new Vue时就传入要监测的数据
• （1）对象中后追加的属性：Vue默认不做响应式处理
• （2）如需给后添加的属性做响应式，可以采用如下API

Vue.set(target,propertyName/index,value)
//或者
vm.$set(target,propertyName/index,value)

3. 监测数组中的数据：

• 通过包裹数组更新元素的方法实现，本质上做了以下两件事情：
• （1）调用原生对应的方法对数组进行更新
• （2）重新解析模板，进而更新页面

4. 在Vue修改数组中的某个元素，一定要使用如下方法

• （1）使用这些API：push(),pop(),shift(),unshift(),splice(),sort()
• （2）Vue.set()或vm.$set()【注意】：Vue.set()和vm.$set()不能给vm或vm根数据对象添加属性

内置指令

• v-bind：单向绑定解析表达式，可简写位 :xxx
• v-model：双向数据绑定
• v-for：遍历数组/对象/字符串
• v-on：绑定事件监听，可简写为@
• v-if：条件渲染（动态控制节点是否存在）
• v-else：条件渲染（动态控制节点是否存在）
• v-show：条件渲染（动态控制节点是否展示）
• v-text：
• • 向其所在的节点中渲染文本内容
• • 与插值语法的区别：v-text会替换掉节点中的内容，插值语法不会
• v-html：
• • 1. 作用：向指定节点中渲染包含html结构的内容
• • 2. 与插值语法的区别：
• • （1）v-html会替换掉节点中所有的内容，插值语法不会
• • （2）v-html可以识别html结构
• • 3. 【注意】：v-html有安全性问题
• • （1）在网站上动态渲染任意HTML是非常危险的，容易导致xss攻击
• • （2）一定要在可信的内容上使用v-html，永远不要在用户提交的内容上
• v-cloak（没有值）
• • 1. 本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删除掉v-cloak属性
• • 2. 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
• v-once（没有值）：所在节点在初次动态渲染之后，就是为静态内容了，以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
• v-pre：让vue跳过所在节点的编译过程，可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

自定义指令

new Vue({
//有两种自定义形式：函数式和对象式
//这样定义的指令为局部指令
	directives:{
	//big是自定义指令，使用时通过v-big使用
	//调用时机：指令与元素成功绑定时，指令所在的模板被重新解析时
		big(element，bingding){
		console.log(this)//这里面的this是window
			element.innerText = bingding.value * 10
		}
	//自定义fbind函数
		fbind:{
			//指令与元素成功绑定时调用
			bind(){
			}
			//指令所在元素被插入页面时调用
			inserted(){
			}
			//指令所在模板被重新解析时调用
			update(){
			}
		}
	}
}).$mount("#root")

全局自定义指令

Vue.directive('fbind',{
		//指令与元素成功绑定时调用
		bind(){
		}
		//指令所在元素被插入页面时调用
		inserted(){
		}
		//指令所在模板被重新解析时调用
		update(){
		}
})

【注意】指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。