前端——框架——Vue——指令(自定义)

　　创建自定义指令的方式有两种，

第一种方式调用Vue的directive方法，它是全局的。

第二种使用组件的directives属性，它只适用于此组件。

示例参考

1、格式

指令的格式如下：

v-directiveName:[argument].modifiers=“value”

　　directiveName：名称，例如v-for的名称为for

argument：参数, 大部分指令没有

modifiers：修饰符，例如v-on.prevent，其中prevent为on指令的修饰符

value：指令的值，它有三种形式，第一种是值，第二种是表达式，第三种是组件的属性名。第一种，第三种较为常见。

2、 实现方式

格式如下：

Vue.directive('name', {
   // 钩子函数
   hookFunctionName: function(argument){

   },
   anotherFunctionName:function(argument){

   }
})

　　其中name为指令的名称, hookFunctionName为钩子方法的名称，argument为其参数。

　　当钩子函数只有bind，update时，还有另外一种格式，此时function被共用

Vue.directive('name',function(){
   // 函数体
})

3、 钩子方法

bind：当指令绑定到节点时触发，绑定过程只有一次，所以只会触发一次。

inserted：当节点被插入到父节点时触发。

update：当节点需要更新时触发，即元素以及其子节点数据存在变化时触发。

componentUpdated：只有节点自身更新时触发

unbind：当指令解绑时触发，解绑过程只有一次，只会触发一次。

4、参数

el：全称为element，为绑定的DOM节点

binding：它是一个对象，描述指令的信息，

1. 1. name：指令名称
   2. value：指令的值，如果是属性时，是属性的值，其他情形下不变
   3. oldValue：指令的旧值，只有在update，componentUpdated钩子方法时使用
   4. expression：指令的表达式，只有当value为表达式时，才有值。
   5. arg：指令的参数，可以是任意的JS类型，数组，对象，字面量都可行。
   6. modifiers：指令的修饰符

vnode：虚拟的vNode，它对应DOM节点

oldVnode：虚拟的旧vNode，它对应旧的DOM节点