vue 自定义指令如何使用

*自定义指令*

指令的注册方式和「过滤器」、「混入」、「组件」注册的方式一样都分为两种：一是全局注册，二是局部注册。

1.全局注册

Vue.directive(‘name’, {})

2.局部注册

directives: {

name: {}

}

然后在模版中直接使用即可。

你好，六哥在这

Vue 提供了自定义指令的几个钩子函数：

bind：指令第一次绑定到元素时调用，只执行一次。

inserted：被绑定的元素，插入到父节点的 DOM 中时调用。

update：组件更新时调用。

componentUpdated：组件与子组件更新时调用。

unbind：指令与元素解绑时调用，只执行一次。

除update 与 componentUpdated 钩子函数之外，每个钩子函数都含有 el、binding、vnode 这三个参数。

oldVnode 只有在 update 与 componentUpdated 钩子中生效。

参数el 就是指令绑定的 DOM 元素，而binding是一个对象，它包含一下属性：name、value、oldValue、expression、arg、modifiers。

另外值得注意的一点是，除了 el 之外，binding、vnode 属性都是只读的。

注：Vue自定义指令也可以写修饰符和传参