跟着大佬技术胖学vue系列 v-directive自定义指令

每天学一点，自己总结一下。记录一个萌新的爬坑之路，如果有错欢迎各位大佬指正O(∩_∩)O

前言

啦啦啦 第二季啦，第一季主要跟着技术胖大佬学了Vue的内置指令，第二季主要来学习Vue的全局api。话不多说现在开始。

全局api

什么是全局api呢，简单来说就是定义在外部的方法或者接口，我们使用的时候去调用或者去实现新的功能。

v-directive

简单的指令和自定义指令中的三个参数

v-directive主要是让我们定义一个自己的指令。 比如让一个div的style变为红色

    <div v-customize="color">{{num}}</div>

    <script type="text/javascript">
        Vue.directive('customize', function(el, binding, vnode) {
            console.log(vnode)
            console.log(el)
            console.log(binding)
            console.log(binding.name)
            console.log(binding.value)
            console.log(binding.expression)
            el.style = `color:${binding.value}`
        })

        var app = new Vue({
            el: "#app",
            data: {
                num: 10,
                color: 'red',
            },
        })
    </script>

既然是全局api就要定义在外部。然后注意点有Vue的V大写，另外这里directive('directiveName', 'xxx')有两个参数，第一个directiveName是自定义的指令名称，第二个'xxx'是要做的方法。这里我们简单的定义一个匿名函数，函数中有三个参数：

el: 指令绑定的元素名称，可以直接操作DOM；

binding：一个对象。包含很多所用的指令的信息。包括name，value，expression；

node：vue所编译生成的虚拟的节点。

用控制台输出可以看到相关信息。

v-directive的生命周期（钩子函数）

v-directive中一共有五个钩子函数，分别是bind，inserted，update，componentUpdated，unbind；

bind：指令第一次绑定对象时调用一次，且只调用一次，一般用于初始化指令的一些操作。

inserted：被绑定元素插入到父节点的时候调用，只要存在父节点便可。

update：绑定元素模板元素值更新的时候调用。通过比较可以忽略不必要的模板。

componentUpdated：绑定元素模板值完成一次值更新周期时调用。

unbind：指令解绑的时候调用，且只调用一次

还是以改变元素颜色为例，

<div v-life="chageColor">{{num}}</div>

        Vue.directive('life', {
            bind: function(el, binding) {
                console.log('1 bind 只调用一次，用于指令第一次绑定到元素使用，一般用于定义初始化动作')
                el.style = `color:${binding.value.color};font-size:${binding.value.fontSize}`
            },
            inserted: function() {
                console.log('2 inserted 用于被绑定元素插入到父元素节点时调用（父节点存在即可调用，不必存在于document中）')
            },
            update: function(el, binding) {
                console.log('3 updated 被元素绑定的模板更新时调用，不管值是否变化，都会作比较，可以忽略不必要的模板更新')
                el.style = `color:green`
            },
            componentUpdated: function() {
                console.log('4 componentUpdated 被绑定的元素在完成一次更新周期时调用')
            },
            unbind: function() {
                console.log('5 只调用一次，指令与元素解绑时调用')
            },
        })

有了这些方法，就可以在实际项目中按照自己的需要来进行相关操作啦！

结语

动图第一次上传，不太会搞，慢慢学习中。

每天记录一下学了什么，希望有所进步。萌新有说不清楚或者说错的地方欢迎大佬们吊打。