「Vue」自定义指令

#全局自定义指令
1.使用Vue.directive（）定义全局的指令 v-focus
2.参数1 指令的名称，在定义的时候，指令的名称前面不需要加v-前缀
3.但是在调用的时候必须在指令名称前 加上v-前缀进行调用
4.参数2是一个对象，这个对象身上，有一些指令相关的函数，这些函数在特定阶段执行相关操作
例1：获取DOM聚焦
Vue.directive('focus',{
bind:function(el){ 1.每当指令绑定到元素的时候，就立即执行这个bind函数，只执行一次
2.每个函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el是一个原生的JS DOM对象
},
inserted:function(el){ 表示元素插入到DOM中的时候，会执行inserted函数
el.focus()
},
updated:function(el){ 当VNode更新的时候，会执行updated，可能会触发多次

}
}
例2：改变DOM颜色，前段传参
v-color="'red'" 传参包裹在''中即传入的是字符串，不包裹就会在VM data中找
Vue.directive('color',{
bind:function(el,binding){
el.style.color = binding.value
binding：一个对象，包含以下属性：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
}
})
#私有自定义指令
/* 指令名称不能有大写 */
<td v-fontsize="'30px'">{{item.id}}</td> 也可以传入int值
directives:{
fontsize:{
inserted:function(el,binding){
el.style.fontSize = parseInt(binding.value)+'px' 增加代码的兼容性
}
}
}
bind 和 update函数可以简写
directives:{
fontsize:function(el,binding){
el.style.fontSize = parseInt(binding.value)+'px'
}
}