Vue自定义指令

Vue自定义指令使用：directives
自定义指令就是在vue中可以自己定义一些指令去运用：例：
v-text:vue中的指令
v-ztext:自定义指令：（可以自己随意定义，v-****)
自定义指令写法：

<span v-ztext="n"></span>
<script>
	new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
			//写法一：简写
			ztext(element,binding){ //参数一为真实dom元素，参数二为绑定元素对象
			   console.log(binding.value)//获取到的时dom元素中的值
			}
			//写法二：完整写法
			ztext:{
				//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
			}
		}
	})
<script>

总结知识点：
1》配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。

2》备注：
1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。（有多个单词的时候不能写为驼峰，要用‘-’连接）