vue已经给我们内置了很多很好用的指令了(v-mode 、v-show)等等,但是有时候当这些指令不能满足我们需求的时候,我们还可以使用vue的自定义指令功能编写我们的指令,这是一个很强大的功能。
需要说明的是:尽管自定义指令这个功能很强大,但是其是对普通的DOM底层进行了直接的操作,会消耗一定的性能,所以我们在使用的时候一定要权衡利弊。
全局定义
我们可以使用vue的接口Vue.directive()去定义一个自定义的指令。
// 第一个参数为指令的名称,第二参数则是一个对象,包含了指令的钩子函数
Vue.directiive("directivename",{
// 这个钩子只调用一次,在指令绑定到元素的时候被调用。通常可以在这里进行初始化
bind(el,binding,vnode,oldVnode){
consolo.log(el,binding,vnode)
}
// 在绑定指令后,绑定的元素插入父元素时触发,在bind钩子后
inserted(el,binding,vnode,oldVnode){
}
// 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
update(el,binding,vnode,oldVnode){
}
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
componentUpdate(el,binding,vnode,oldVnode){
}
// 指令与元素解绑后调用
unbind(el,binding,vnode,oldVnode){}
})
指令的使用
和使用其他内置指令一样在元素上绑定
<div v-directive:参数.修饰符.修饰符="数据"></div>
binding参数
bindinf.name:指令的名字
binding.arg:指令的参数
binding.modifiers:指令的修饰符
binding.value:数据的数值(数值)
binding.expression:数据的字符串
局部指令
如果你愿意的话,你可以只定义一个组件或者部分组件的自定义指令
定义的的方法也很简单:只需要在组件选项里定义directives即可
directives:{
directivename:{
// 这个钩子只调用一次,在指令绑定到元素的时候被调用。通常可以在这里进行初始化
bind(el,binding,vnode,oldVnode){}
// 在绑定指令后,绑定的元素插入父元素时触发,在bind钩子后
inserted(el,binding,vnode,oldVnode){}
// 所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
update(el,binding,vnode,oldVnode){}
// 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
componentUpdate(el,binding,vnode,oldVnode){}
// 指令与元素解绑后调用
unbind(el,binding,vnode,oldVnode){}
}
}
动态参数
除此之外,我们还可以定义具有动态参数的指令
v-directivename:[动态参数].修饰符.修饰符="数据"