#全局自定义指令
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'
}
}