vue自定义指令

vue 自定义指令Vue.directive

释义：在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

常用场景：vue有默认的一些指令例如v-model、v-show，但是我们开发者其实也可以根据自己的需要自定义一些满足我们自己要求的指令。我们除了可以注册类似v-model的全局指令外，还可以注册在组件中私有使用的局部自定义指令。

案例：

    // 注册一个全局自定义指令 `v-focus`

    // 注册一个局部指令，可以在组件中使用directives关键字

深度解析：

    自定义指令主要有下面几个钩子函数

        1、bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

        2、inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

        3、update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

        4、componentUpdated：指令所在组件的 VNode及其子 VNode全部更新后调用。

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

    自定义指令的钩子函数有以下几个常用参数，除了el可以操作，其他几个都是只读属性

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

        2、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"。比较常用在动态指令参数的时候，例如一个组件A中使用了这样一个全局注册的指令v-pin，v-pin:[direction]="200"，direction为组件A的data中的数据

    那么在我们定义的v-pin指令的钩子函数中可以取到的binding.arg的值就是字符串left，我们可以根据不同的arg值来做不同的操作

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

         3、vnode：Vue 编译生成的虚拟节点。

         4、oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

使用方法案例：

    先创建一个js文件注册一个全局使用的自定义指令，然后在main.js里面引入即可全局使用