内置指令与自定义指令的使用

内置指令

v-bind : 单向绑定解析表达式, 可简写为 :xxx

v-model : 双向数据绑定

v-for   : 遍历数组/对象/字符串

v-on    : 绑定事件监听, 可简写为@

v-if : 条件渲染（动态控制节点是否存存在）

v-else : 条件渲染（动态控制节点是否存存在）

v-show : 条件渲染 (动态控制节点是否展示)

v-html  : 更新元素的 innerHTML，注意：v-html有安全性问题，在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击

v-text  : 更新元素的 文本内容：textContent

v-cloak指令（没有值）

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

举例：

<style>
			[v-cloak]{
				display:none;
			}
</style>

v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令：

1.跳过其所在节点的编译过程。

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令

2.1 局部指令

new Vue({ directives:{指令名:配置对象}  或  directives{指令名:回调函数} })

函数调用

directives:{
		//指令与元素绑定时候调用，模板解析时调用（模板更新）
		big(element,item){
			// console.log('big',this) //注意此处的this是window
			element.innerText = item.value*10;
		},
}

内置对象

fbind:{
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
	}

2.2 全局指令

Vue.directive('fbind',{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){
				element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
				element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
				element.value = binding.value
		}
})