Vue自定义指令详解

一、为什么需要自定义指令？

        因为vue是MVVM模式，只需要关注于数据和业务逻辑，不需要关注DOM的 *** 作，但是有时候面对一些特殊的业务需求时，需要进行DOM的 *** 作，这个时候就需要进行自定义指令。

二、如何自定义指令？ 1、全局自定义指令

        参数一（name）：自定义指令的名称

        参数二（hooks）：自定义指令的钩子函数对象

Vue.directive(el, hooks)

2、局部自定义指令

        局部自定义指令是一个对象，对象的属性是自定义指令的名称，对象中属性的值是自定义指令的钩子函数对象

三、自定义指令常用的钩子函数以及钩子函数的参数

Vue.directive('focus', {
  bind: function (el, binding, vnode) {},
  inserted: function (el, binding, vnode) {},
  update: function (el, binding, vnode, oldVnode) {},
  componentUpdated: function (el, binding, vnode, oldVnode) {},
  unbind: function (el, binding, vnode) {}
})

1、钩子函数

钩子函数名称	描述
bind	只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted	被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update	所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated	指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind	只调用一次，指令与元素解绑时调用

2、钩子函数参数 

参数	描述
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 钩子中可用

四、自定义实现v-on指令