写在文本前：相信在做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指令大致也就说这么多吧，如果错误，欢迎指正拍砖......
