Vue中的自定义指令

Vue中的自定义指令分为全局注册和局部注册

全局注册

全局注册主要是通过vue.directive方法进行注册

Vue.directive第一个参数是指令名字，第二个参数可以是对象数据也可以是一个指令函数

//准备注册一个全局自定义指令 'v-focus'
Vue.directive('focus',{
// inserted被绑定元素插入父节点时调用
inserted.function(el){
//聚焦元素
el.focus() //页面加载完成后自动让输入框获取到聚焦的功能
}
})

局部注册

局部注册通过在组件options选项中设置directive属性

directives:{
focus:{
//指令的定义
inserted:function(el){
el.focus
}
}
}

接下来我们就可以在模板上使用 v-focus,比如：

<input v-focus>

自定义指令的钩子函数

bind:只调用一次，指令第一次绑定元素时调用，在这里可以进行一次初始化设置

inserted:指令插入父节点时调用

update:所在组件的vNode更新时调用，但是可能发生在其子vNode更新之前，指令的值可能发生了改变，也可能没有，但是你可以比较更新前后的值来忽略不必要的模板更新

componentUpdated:指令所在组件VNode及其子VNode全部更新时调用

unbind:只调用一次，指令与元素解绑时调用

所有钩子函数的参数有以下:

el:指令所绑定的元素，也可以直接操作DOM

binding:一个对象，包含以下property:

1.name:指令名，不包括v-前缀

2.value:指令的绑定值

3.oldValue:指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否改变都可用

4.expression:字符串形式的指令表达式

5.arg:传给指令的参数

6.modifiers:一个包含修饰符的对象

vnode:Vue编译生成的虚拟节点

oldVnode:上一个虚拟节点，仅在update和componentUpdated钩子中可用