本文共 1061 字，大约阅读时间需要 3 分钟。

一,前言

前边介绍了Vue内置的各种指令,如:v-if,v-show,v-for等大多数情况下Vue提供的指令是可以满足日常开发需要的但是有些时候我们需要针对特殊功能进行自定义指令,在内部进行DOM操作

二,自定义指令的注册

自定义指令的注册方式和组件相似,Vue提供了两种注册指令的方法:

1,全局注册

Vue.directive('指令名', {    // 指令选项})

2,局部注册

var vm = Vue({    el:'#app',    directive:{        '指令名':{            // 指令选项        }    }})

是不是和组件的注册方式很相似

三,自定义指令的选项

自定义指令的选项是由几个钩子函数组成的,每个都是可选的

1,bind:

在指令第一次绑定到元素时被调用,且只会被调用一次可用于在绑定时执行初始化操作

2,inserted:

被绑定元素插入父节点时调用父节点存在即可调用,不必存在于document中

3,update:

被绑定元素所在的模板更新时调用,不管绑定值是否变化通过比较更新前后的数据变化,忽略不必要的更新

4,componentUpdated:

被绑定元素所在模板完成一次更新周期是调用

5,unbind:

指令与元素解绑时调用,且只调用一次

一般使用bind钩子做初始化时的事件绑定,unbind中进行解绑

四,选项钩子函数的参数

每个钩子都有一下几个可用参数

1,el:

指令绑定的元素,可用作DOM操作

2,binding:

一个对象,包含以下几个属性:name:    不包含v-前缀的指令名(使用时需要补充v-)oldValue:    指令绑定的前一个值,只在更新选项钩子下可用(如:update和componentUpdated)value:    指令的绑定值expression:    指令绑定值的字符串形式modifiers:    修饰符对象    如:v-directive.a.b,修饰符对象modifiers值为{a:true,b:true}

3,Vnode

Vue编译生成的虚拟节点

4,oldVnode

上一个虚拟节点,只在更新选项钩子下可用(如:update和componentUpdated)

五,自定义指令的使用

使用自定义指令创建一套大小写转换指令

运行结果:

六,结尾

自定义指令就介绍到这里,对于项目中经常使用的工具方法可以写成自定义指令,方便使用