vue自定义指令 —— directive的用法

Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。

在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。

1. 注册

假设我们需要自定义一个 v-focus 指令，即在 或 标签初始化时获得焦点。 注册自定义指令分为全局注册与局部注册两种： 全局注册：

// 注册一个全局自定义指令 `v-focus` Vue.directive('focus',{ // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })

局部注册：

export default{ // 如果想注册局部指令，组件中也接受一个 directives 的选项： directives: { focus: { // 指令的定义 inserted: function (el) { el.focus() } } } }

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>

2. 属性

自定义指令属性包含这些钩子函数，它们都是可选的：

钩子函数说明bind只调用一次，第一次绑定指令到元素时调用，我们可以在此绑定只执行一次的初始化动作。inserted被绑定元素插入父节点时调用（父节点只要存在即可调用，不必存在于 document 中）。update无论绑定值是否发生变化，只要被绑定元素所在的模板被更新即可调用。Vue.js 会通过比较更新前后的绑定值，忽略不必要的模板更新操作。componentUpdated被绑定元素所在模板完成一次更新周期时调用。unbind指令与元素解绑时调用，只调用一次。

这些钩子函数一般包含这些入参：

入参说明el指令所绑定的元素，可利用它直接操作 DOMbinding绑定对象。（下面会具体说明）vnode编译生成的虚拟节点。oldVnode上一个虚拟节点，仅在 update 与 componentUpdated 中可用。

绑定对象属性说明：

属性说明示例name指令名，不包含前缀 v-。v-focus 中的 focus。value指令所绑定的值（计算后）。v-focus=“1 + 2” 中的 3。oldValue指令所绑定的前一个值，无论值是否改变都有值，且仅在 update 与 componentUpdated 中可用。-expression绑定的值的字符串形式（不计算）。v-focus=“1 + 2” 中的 1 + 2。arg传递给指令的参数。v-focus:xxx 中的 xxx。modifiers包含修饰符的对象。v-focus.a.b 中，为 {a:true, b:true}。