vue中的自定义指令

vue中提供了丰富的内置指令，如v-if,v-bind,v-on......,除此以外咱们还能够经过Vue.directive({})或者directives:{}来定义指令

在开始学习以前咱们应该理解，自定义指令的应用场景，任何功能的开发都是为了解决具体的问题的， 

经过自定义指令，咱们能够对DOM进行更多的底层操做，这样不只能够在某些场景下为咱们提供快速解决问题的思路，并且让咱们对vue的底层有了进一步的了解

1.自定义指令能够是全局的，也能够是局部的，全局和局部的区别估计不用多说，你们都知道。

下面咱们先了解一下Vue.directive({})内部的钩子函数以及重要的钩子函数的参数，有助于咱们对

自定义指令的了解

钩子函数：

      1.bind: 此钩子函数只会被调用一次，能够定义一个在绑定时执行一次的初始化动做

      2.inserted: 当被绑定的元素插入到父元素中是低调用（此处的父元素不局限于document中）

      3.update: 不论被绑定的值是否发生了变化，在末班更新时都会被调用，

      4.componentUpdated:被绑定的元素在模板完成一次更新周期时调用，

      5.unbind: 只调用一次，元素解绑时调用

参数： 

      1.el: 指令所绑定的DOM元素，能够直接用来操做DOM

       2.binding: 一个对象，包含如下属性

             name: 指令的名称

             value： 指令绑定的值

             oldValue: 指令绑定前一个值

             expression: 绑定值的字符串形式

             arg： 传给指令的参数

             modifiers: 这是一个包含修饰符的对象

 

代码演示： 

 

输出结果