在Vue中,指令都是以 v-xxx 命令,因此自定义指令也是如此
自定义指令时,指令名称不需要加前缀v-,但在调用的时候一定要加前缀v-
自定义一个获取焦点的指令 v-focus
//定义一个全局的指令(directive:指令)
//参数1为指令名称,定义的时候,不需要加 v- ,调用时需要v- ,
//参数2是对象,对象中有指令相关函数,在特定时候运行,
Vue.directive('focus',{
//获取当前指令(v-focus)绑定的元素e,e.focus()方法在绑定元素插入到DOM中时调用
inserted:function(e){
e.focus()
}
})
//等同于js中: var e = document.getElementById("e")
// e.focus()
//局部指令定义,vm实例中
directives:{
focus:{
inserted:function(e){
e.focus()
}
}
}
钩子函数:
- bind:只调用一次,第一次绑到到元素时调用,一般用在初始化中,在inserted之前,此时父节点为null,在dom树绘制之前调用,一般用作初始化属性(样式、元素属性)的设置,绑定后属性就已经在当前元素中了。
- inserted:被绑定元素插入到父节点时调用,父节点存在即可,只调用一次,在dom树绘制之后调用,一般用作初始化方法(js的行为方法)的设置,绑定到DOM中后立即执行一次。
- updated:所在的组件更新时调用,在componentUpdated之前调用,更新前的状态,多次调用
- componentUpdated:所在的组件及及子元素全部更新时调用,更新后的状态,多次调用
- unbind:只调用一次,指令与元素解绑时调用
Vue.directive('指令名称',{
//指令绑定到元素上的时候会立即执行,一般用作初始化,只执行一次,当指令刚被绑定到元素的时候,还没有插入到DOM树中去
//绑定时不管有没有插入到DOM中,已经有了value="" 和 style="color:red"的属性
//bind因此可以做一些初始化属性的设置
bind:function (e) {
e.value = "文本框初始值"
e.style.color = 'red'
},
inserted:function (e) { //元素插入到DOM树中后会立即执行一次,可作初始化方法的设置
e.focus()
},
updated:function (e) { //vnode更新的时候会执行,可触发多次
},
componentUpdated:function (e) {
},
unbind:function (e) {
}
})
<input type="text" v-focus>
钩子函数参数:
- el:指令被绑定的当前元素,即当前指令所在的元素,此参数名可以变更,其他参数名不能变更
- binding:
value:指令绑定值,v-color=" 'blue' ","1+1"为2
arg:传递给指令的参数v-color:blue
modifiers:包含修饰符对象 v-mydirective.foo.bar modifiers为{foo.true,bar,true}
3.vnode:vue编译器生成的虚拟节点
4.oldVnode:上一个虚拟节点
Vue.directive("color",{
bind:function (e,binding) {
e.style.color = binding.value
e.style.color = binding.arg
}
})
//注意单引号,否则blue为data中数据
<input type="text" v-focus v-color="'blue'">
<input type="text" v-focus v-color:blue>
自定义指令的简写
如果只有bind或updated钩子函数,则可以简写
Vue.directive("color", (e,binding) => {
e.style.color = binding.value
e.style.color = binding.arg
})
//注意单引号,否则blue为data中数据
<input type="text" v-focus v-color="'blue'">
<input type="text" v-focus v-color:blue>