【Vue自定义指令的用法】Vue directive自定义、Vue自定义指令的钩子函数、Vue如何自定义指令

简介:除了核心功能默认内置指令(v-model和v-show)，Vue也允许注册自定义指令。在Vue2中，代码复用和抽象的主要形式是组件，然而，有的情况下，你仍需要对普通DOM元素进行底层操作，这时候就需要用到自定义指令。

一、全局自定义指令

① 在main.js文件里定义自定义指令Vue.directive，第一个参数自定义指令名，第二个是钩子函数。

② 在页面标签上写自定义指令即可

一、自定义指令钩子函数详解。

⑴ bind:第一次绑定到元素时调用

⑵ unbind:解绑时调用，也只调用一次

⑶ insert:绑定元素插入父节点时调用

⑷ update:所在节点及子节点所有虚拟dom更新时调用

二、钩子函数的参数

一   el : 指令所绑定的元素，可以用来直接操作DOM。

二、binding : 一个对象，包含以下 键值对

⑴ name：指令名，不包括 v- 前缀。

⑵ value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。

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

⑷ expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。

⑸ arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。

⑹ modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。

三、vnode   Vue编译生产的虚拟节点

四、oldVnode : 是一个虚拟节点，仅在 update 和componentUpdated钩子中可用。

二、局部自定义指令。

① 在js里定义   directive:{'自定义指令名':{钩子函数:function(el,binding,vnode){    逻辑处理  }}}