vue自定义指令

1、局部指令定义

• 范围：仅限于定义时关联的 vue 实例的容器中使用

• 定义：

  new Vue({
      directives:{ key[string]:value[Fuction]  }
  })
  

  • key（string）：指令名称 ，定义完成后，页面使用需 v- 前缀调用指令
    • 如果名称为驼峰命名方式 （例如 imgLazy） ,页面使用时需要转换为 连字符 （v-img-lazy）
  • value（Function）：function( el，binding，newVnode,oldVnode ){} 指令执行函数
    • el : 调用指令的当前DOM对象
    • binding : 是一个对象 ，对象中包含了指令构成参数、修饰符、取值 ……
      • name: 指令名称
      • rawName: 指令调用时的表达式
      • expression: 指令取值表单时，= 右侧的取值表达式
      • arg: 指令参数 , : 后定义的参数名称
      • oldArg: 是指令 ： 后定义的 旧的参数名称
      • value: 指令 = 右侧 表达式的计算结果
      • oldValue:指令绑定变量发生变化后，调用该方法时 ，存储的 上次的结果值
      • modifiers: 指令修饰符，.后定义的修饰符名称
        • modifiers 为 Object{ key:value } 类型数据
        • key 为修饰符名称，value取值 为 true
          • true 作为value表示当前指令被启用
          • 对象中没有修饰符key ,表示指令不启用
          • 当没有修饰符时，表示该对象为空对象
    • newVnode：指令更新后的新虚拟DOM
    • oldVnode：指令更新前的旧虚拟DOM

• 使用：<标签 v-自定义指令名[:参数][.修饰符.修饰符……][=取值] >

2、全局指令定义

• 范围：可以在 vue 的 任意对象的容器中使用

• 语法：Vue.directive( id,definition )

  • id=name : 定义指令名称
  • definition :指令的处理函数，function( el，binding，newVnode,oldVnode ){}
    • 参数参考 局部指令

• 定义：全局指令定义必须在使用之前

  Vue.directive("lazy",function( el，binding，newVnode,oldVnode ){
      
  })
  

3、指令生命周期

• 一个指令从项目运行开始，到指令运行结束过程，vue为每个指令都提供固定的生命周期钩子函数
  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  • inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。
• 无论是全局指令定义，还是局部指令定以，definition取值可以为 Function 也可以为 Object
  • 取值 Function，定义功能就是指令的处理函数
  • 取值Object，定义的时指令的生命周期钩子函数的处理方法