吃透VUE的自定义指令

        今天再次来研究下VUE指令的相关内容，通过这篇文章你将明白什么是自定义指令，以及自定义指令的用法，相信在实际的项目开发中对你也会有所帮助的。

        在使用vue做开发的过程中，指令非常常见，像v-if、v-for、v-bind、v-on、v-modle等，指令的存在是为了方便我们对一些逻辑的处理。在vue的官方文档上，只是简单介绍了一个聚焦输入框的例子，然而在实际的开发中，我们可能会遇到更为复杂的情况，比如修改数据等，在这里我将一步一步详细介绍vue的自定义指令及用法，帮助大家理解和掌握。

        首先，自定义指令分为全局指令和局部指令，顾名思义，全局指令就是在任何地方都能使用的，而局部指令，只能在定义的组件中使用，定义方法如下：

全局指令：

Vue.directive(‘focus’,{    inserted: function(el){         Console.log(el)    }})

局部指令：在具体的vue组件中写​​​​​​​

directives:{    focus:{        inserted: function (el) {          el.focus()        }    }}

directive和directives就是用来定义自定义组件的，focus就是自定义组件的名称，使用的时候这样写：v-focus，inserted是自定义指令的钩子函数，这样理解，类似于vue的生命周期的钩子函数，下面我们再来看下自定义指令的钩子函数以及钩子函数的参数。自定义指令的钩子函数一共有5个，每个都有具体的使用场景：

bind：只调用一次，即指令第一次绑定到元素，可以进行一些初始化

unbind：只调用一次，即指令与元素解绑的时候（不常用）

inserted：被绑定的元素插入到父节点时（常用）

updata：所在组件的vnode更新时调用，但可能发生在子vnode更

      新之前

componentUpdata：所在组件的vnode及其子vnode全部更新之后调用

这样记忆，有两个只调用一次的bind和unbind，两个组件vnode更新调用的uodata和componentUpdata（注意有区别），一个是插入到父节点时调用inserted。

再来看下钩子函数的参数，每个钩子函数都有，一共有4个，这里直接截取官网文档来看：

注意最下面的提示，除了el外，其他参数都应该是只读的，切勿进行修改。有了以上的了解，我们就上代码，毕竟Talk is cheap. Show me the code。

栗子：我们以全局指令为例，创建自定义指令acb，就是这么随意

 <div v-abc>test</div>

        Vue.directive('abc',{

'inserted': function(el,binding,vnode,oldVnode){

console.log(el)

console.log(binding)

console.log(vnode)

console.log(oldVnode)

}

})

    看下打印结果：

对照文档说明看，结果是一致的，el是元素，binding是一个对象，vnode是虚拟节点，oldVnode是上一次的虚拟节点，只能在updata和componentUpdata钩子函数中使用，随所以输出elm为undefined。接下来就是重点了binding。从文档上看binding这个参数是一个对象，包含了很多属性，看着一脸懵逼的，别慌，这个参数是用于自定义指令传参的，是我们要重点掌握的。

    自定义指令参数传递方式有三种：

    第一种：v-abc:{a:1,b:2}

       

    浏览器打印输出：

我们可以看到binding对象中的arg属性的值就是我们设置的要传递的数据，这种方式只能传递字符串类型的参数，不能是变量，也就是说不能传递data中的数据。

    第二种：上一种方法中我们可以得到指令绑定的DOM，那么我们就能拿到这个DOM的属性，所以这种方法就是给指令绑定的元素绑定自定义的属性，就能把data中的数据传递到指令中：

    浏览器打印：

    

    可以看到，指令中已经成功把我们需要的message打印出了

    第三种：v-abc="{phone: '小米',price: phonePrice,call:markCall}"

假设我们把一款手机的数据传给指令，手机品牌是小米，价格是data中定义好的，call是呼叫功能，我们想调用methods中的makeCall方法，然后makeCall方法会打印出我们想要呼叫的人：

浏览器打印输出：

从浏览器的打印结果可以看到，expression是我们写的字符串形式的指令表达式，而实际的绑定值是在value中，data中的phonePrice成功在指令中获取到，call绑定的makeCall也成功执行了，并输出了我们想要得到的结果。当然，我们也可以在指令中修改data中的数据，非常简单，就是在makeCall中拿到需要修改的属性，然后做处理就OK了 。

        简单总结下：

        1、自定义指令有全局指令和局部指令区分，写法有差别，注册全局定义用directive，注册局部用directives；

        2、自定义指令有5个钩子函数，分别是bind、unbind、inserted、updata、componentUpdata，钩子一共有4个参数，分别是el、binding、vnode、oldVnode，注意每个钩子函数的含义；

        3、自定义指令传参有三种方式：

              a：v-abc:foo，这种只能传递字符串类型的数据

              b：给元素绑定自定义属性，再通过el.getAttribute获取到el的属性

              c：v-abc=v-abc="{phone: '小米',price: phonePrice,call:markCall}"，这种方法用法更广，可以传变量和函数

        以上内容来自微信公众号 ‘HTML开发学习’，会分享一些前端的学习心得及总结，欢迎大家关注。