vue.js自定义指令详解

写在文本前：相信在做vue的项目，你肯定接触了指令，我们常用vue内置的一些指令，比如v-model,v-text,v-if,v-show等等，但是这些内置指令不在本文的讲解范畴，本文想说的是其自定义指令。思考一下，自定义指令我们用在哪里？是不是一下子想不出来，感觉做一般的项目很少用到指令呢，想不到指令用在哪！！因为我们的确很少用，但不是说不会用。看官方api文档里有这么一句话：普通 DOM 元素进行底层操作，这时候就会用到自定义指令。也就是说我们在操作普通DOM的时候有可能会用到。在做项目的时候，我们有很多种方法来替代自定义指令，所以让我们忽略了vue自定义指令的用处。下边我们一步步来了解vue自定义指令。

举几个栗子

（1、输入框焦点自动触发。
（1、输入框的电话号码，邮箱，身份证号码等的校验。

上面这几个场合，我们在做项目的时候完全可以用其他方法代替，但是vue自定义指令能让我们做到一劳永逸，做到一处定义，全局调用。使其代码简洁高效，维护方便。接下来，我们会一步步深入vue自定义指令。

1、首先看下官方介绍，如下：

/*  自定义指 */
import Vue from 'vue'
/**
 * 模板
 * v-lang
 * 五个注册指令的钩子函数
 */
Vue.directive('mydirective', {
  /**
   * 1.被绑定
   * 做绑定的准备工作
   * 比如添加事件监听器，或是其他只需要执行一次的复杂操作
   */
  bind: function(el, binding, vnode) {
    console.log('1 - bind');
  },
  // 2.绑定到节点
  inserted: function(el, binding, vnode) {
    console.log('2 - inserted');
  },
  /**
   * 3.组件更新
   * 根据获得的新值执行对应的更新
   * 对于初始值也会调用一次
   */
  update: function(el, binding, vnode, oldVnode) {
    console.log('3 - update');
  },
  // 4.组件更新完成
  componentUpdated: function(el, binding, vnode, oldVnode) {
    console.log('4 - componentUpdated');
  },
  /**
   * 5.解绑
   * 做清理操作
   * 比如移除bind时绑定的事件监听器
   */
  unbind: function(el, binding, vnode) {
    console.log('5 - bind');
  }
})
/**
钩子函数
1、bind:只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个绑定时执行一次的初始化动作。
2、inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
3、update:被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4、componentUpdated:被绑定元素所在模板完成一次更新周期时调用。
5、unbind:只调用一次，指令与元素解绑时调用。
*/

执行顺序：
页面加载时

bind
inserted

组件更新时

update
componentUpdated

卸载组件时

unbind

官方地址请移步至，directive，上面只是做了个简单的说明，接下来我们详细的介绍vue自定义指令的各个钩子函数到底如何触发。

2、钩子函数简单讲解

就个人而言, bind和update也许是这五个里面最有用的两个钩子了.这个也是我们下边主要要说的2个钩子函数。其它函数不常用，我也没搞明白。

（1）钩子函数 bind

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

<input id="input1" v-mydirective> // html元素

Vue.directive('mydirective', {
  bind: function(el, binding, vnode) {
   el.style.border = "1px solid red"
  }
}

上面代码的效果就是输入框的边框变成了1像素的红色。当然你也可以设置其它试试。

<input id="input1" v-mydirective> // html元素

Vue.directive('mydirective', {
  bind: function(el, binding, vnode) {
    el.addEventListener('click', function (event) {
        alert('hellow world')
    })
  }
}

在bind钩子函数里，我们可以添加一些事件，在其某种条件下触发（比如点击事件，键盘事件），如上代码，点击input输入框就会弹出 “hellow world”。至于bind里面的参数的含义，建议自己动手输入出来看看。很简单是吧，下边我们来些稍微复杂一点的。看如下代码：

指令钩子函数会被传入以下参数：

/**
钩子函数的参数：(el, binding, vnode, oldVnode)
el：指令所绑定的元素，可以用来直接操作 DOM 。
binding：一个对象，包含以下属性
  name：指令名，不包含v-的前缀；
  value：指令的绑定值；例如：v-my-directive="1+1"，value的值是2；
  oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子函数中可用，无论值是否改变都可用；
  expression：绑定值的字符串形式；例如：v-my-directive="1+1"，expression的值是'1+1'；
  arg：传给指令的参数；例如：v-my-directive:foo，arg的值为 'foo'；
  modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{'a':true,'b':true}
vnode：Vue编译的生成虚拟节点；
oldVnode：上一次的虚拟节点，仅在update和componentUpdated钩子函数中可用。
*/

这里我们着重注意一下，binding对象下的value，oldValue，arg，expression，modifiers这几个属性，根据这几个属性，我们可以做到更强大的自定义指令，下边我们参考案例来说：

<div v-mydirective:left="100" id=”box"></div> // html元素

Vue.directive('mydirective', {
  bind: function(el, binding, vnode) {
       el.style.position = 'fixed';
       const s = (binding.arg === 'left' ? 'left' : 'top');
       el.style[s] = binding.value + 'px';
  }
}

上面的代码是使id=”box“的这个div元素绝对定位了，而且设置了left的值为100px；

（2）钩子函数 update

update:每当元素本身更新(但是子元素还未更新)时触发。这句话怎么理解呢？我们用案例来说明，如下：

<template>
  <div id="box">
       <input v-model="myname" v-mydirective/>
  </div>
<template>
export default {
  data(){
    return{
      myname:"zhangshan"
    }
  },
  directives:{
    'mydirective':{
         update: function(el, binding, vnode, oldVnode) {
              console.log('update更新了');
         }
    }
  }
}

上边代码，输入框默认值是"zhangshan",如果我们修改了myname值，那么就会触发update函数的执行，输出“update更新了”

再来个复杂一点的案例如下：

<template>
  <div id="box">
       <input type="text" v-model="myname"  v-mydirective="{type:'name',val:myname}"/>
       <input type="text" v-model="myemail"  v-mydirective="{type:'email',val:myemail}"/>
  </div>
<template>
export default {
  data(){
    return{
      myname:"zhangshan",
      myemail:'***@163.com'
    }
  },
  directives:{
    'mydirective':{
         update: function(el, binding, vnode, oldVnode) {
           //update：指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
           if(binding.oldValue.val != binding.value.val){// 进行判断,避免同时触发多个判断
             let checkStatus = true;// 定义验证状态 局部变量
             if(binding.value.type == 'name'){
                   if(binding.value.val.length>5){
                        checkStatus = false;
                        console.log("输入的姓名长度大于5了")
                   }
             }
             if(binding.value.type == 'email'){// 验证邮箱
               if(!/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-   z0-9]+$/g.test(binding.value.val)){
                  checkStatus = false;
               }
             }
             if(checkStatus){
                el.style.border = "1px solid #333";//验证通过input边框颜色就变成#333
             }else{
                el.style.border = "1px solid red";//验证不通过input边框颜色就变成红色
             }
         }
       }
    }
  }
}

上边的案例，我们通过bind下的modifiers属性实现。modifiers：一个包含修饰符的对象；例如：v-my-directive.a.b，modifiers的值为{'a':true,'b':true}。这样我们在update钩子函数里根据所传入的type类型做判断来执行哪个验证方法。

（3）钩子函数 inserted

inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。

<input id="input1" v-mydirective> // html元素

Vue.directive('mydirective', {
  inserted: function(el, binding, vnode) {
    el.focus()//输入框自动获取焦点
  }
}

对于钩子函数 inserted，我也是一知半解，所用的不多，但是有个常用的方法是写在这里面的，就是输入框自动获取焦点，也就是上面的代码。

（4）钩子函数 bind和钩子函数 inserted的区别。

据文档所说，插入父节点时调用 inserted，来个测试。

bind: function (el) {
 console.log(el.parentNode) // null
 console.log('bind')
},
inserted: function (el) {
 console.log(el.parentNode) // <div id="login">...</div>这个元素是指令所在元素的父元素，具体根据自己的写法不同
 console.log('inserted')
}

分别在两个钩子函数中输出父节点：bind 时父节点为 null，inserted 时父节点存在。

（5）钩子函数 componentUpdated和钩子函数 unbind

 // 4.组件更新完成
  componentUpdated: function(el, binding, vnode, oldVnode) {
        console.log('4 - componentUpdated')
  },
   /*** 5.解绑
     * 做清理操作
     * 比如移除bind时绑定的事件监听器
   */
    unbind: function(el, binding, vnode) {
       console.log('5 - bind');
    }

对于这2个钩子函数，没有做太多的研究，unbind可能会用到，用于释放实例资源占用等操作。

关于vue.js指令大致也就说这么多吧，如果错误，欢迎指正拍砖......