vue自定义指令（全局/局部）

介绍

Vue除了提供了默认内置的指令外，还允许开发人员根据实际情况自定义指令，它的作用价值在于当开发人员在某些场景下需要对普通DOM元素进行操作的时候。

注册自定义指令

Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。

全局指令

• 先来说注册全局指令的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令，第一个参数为自定义指令名称（指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀），第二个参数可以是对象数据，也可以是一个指令函数。全局自定义指令一般定义在main.js文件中；还有要放在vue 实例挂载前；

• 直接上图
  
  上图通过注册了一个 v-lzs 指令，实现了盒子颜色随盒子上数值大小的不同而变化；对于上面的bind update你也许还不知道，看下面；

• 二、钩子函数
  一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
  bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  update：所在组件的 VNode 更新时调用。
  componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  unbind：只调用一次，指令与元素解绑时调用。

• 钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
  指令钩子函数会被传入以下参数：
  1、el：指令所绑定的元素，可以用来直接操作 DOM 。
  2、binding：一个对象，包含以下属性：
  ----（1）name：指令名，不包括 v- 前缀。
  ----（2）value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
  ----（3）oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  ----（4）expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
  ----（5）arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
  ----（6）modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  3、vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
  4、oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

效果

局部指令

顾名思义 局部指令定义在组建内，写法上最大的不同是定义时directives，而不是Vue.directive，看下面案例你就明白了。当全局指令和局部指令同名时以局部指令为准；

<template>
<div>
  <input type="text" v-focus="true"/>
</div>
</template>
<script>
exprot default {
  // 局部指令
  directives: {
      focus: {
        // bind声明周期, 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
        bind(el, binding, vnode, oldVnode){
          console.log('局部指令bind回调');
        },
        // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
        inserted(el, binding, vnode, oldVnode){
          console.log('局部指令inserted回调', binding, vnode, oldVnode);
          // 设置了v-focus 并且值不为空
          if(binding.name == 'focus' && binding.value){
            el.focus()
          }  
          // 设置输入框背景色
          el.style.backgroundColor = 'red'
        },
        // 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
        update(el, binding, vnode, oldVnode){
          console.log('局部指令update回调', binding);
        },
        // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
        componentUpdated(el, binding, vnode, oldVnode){
          console.log('局部指令componentUpdated回调', binding);
        },
        unbind(el, binding, vnode, oldVnode){
          console.log('局部指令unbindd回调', binding);
        }
      }
  },
  data(){
    return {}
  } 
}
</script>