简介

自定义指令就像一个迷你的函数，把你自定义的功用塞进这个迷你函数里，在页面上疾速的挪用，增添用户体验。

Vue.directive('dyColor',{
    bind:function(el){
        el.onclick = () => {
            el.style.backgroundColor = '#' + Math.random().toString().slice(2,8)
        } 
    }
})
new Vue({
    el: '#app-1'
})

<div id="app-1">
    <div class="box bg-fw" v-dy-color>
        <h1>Lorem</h1>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat beatae neque, quo, hic molestiae accusamus maxime cupiditate impedit quia labore aspernatur doloribus necessitatibus! Odio, quod eaque consectetur dolor asperiores id.</p>
    </div>
</div>

上面这个简朴示例中，运用Vue.directive('name',hooks)定义一个指令，在页面上加上前缀v-运用。
bind()为一个钩子函数，也有其他几种钩子，在钩子中完成一些自定义功用，钩子上有几个划定的参数，上面el就是一个，钩子及参数背面剖析。

钩子函数

总共有五种Hook，bind、inserted、update、componentUpdated及unbind。

• bind: 在指令绑定到元素上时挪用。
• inserted: 在被绑元素插进去到父节点时挪用一次（父节点是不是插进去文档无所谓）
• unbind: 指令与元素解绑时挪用一次。

inserted是新版新加的，这个机遇发生在bind以后，增添点天真度，就目前为止没发现有什么用。

• update:在被绑元素被修正时，修正内容未被插进去时挪用
• componentUpdated: 在被绑元素被修正并把修正内容插进去后挪用

官网这里是外星人写的，看不清，我临时就这么理解了，这两个也是基于老版本update修正的。把一个时间分红两部分罢了。由于el援用的一个是修正前、一个是修正后的内容，照样有点用。

Vue.directive('test', {
    bind:function(el){
        el.onclick = () => {
            el.style.backgroundColor = '#' + Math.random().toString().slice(2,8)
        } 
        $(el).find('#info_update').append('<li><span class="emblem">'  + (el.parentNode?'有父元素':'无父元素') +'</span></li
        console.log(el.parentNode)
        console.log('bind')
    },
    inserted: function (el) {
        $(el).find('#info_update').append('<li><span class="emblem">'  + (el.parentNode?'有父元素':'无父元素') +'</span></li
        console.log('inserted')
    },
    update: function (el) {
        $(el).find('#info_update').append('<li><span class="emblem">'  + $(el).find('h3').text() +'</span></li>')
        console.log('update')
    },
    componentUpdated: function (el) {
        $(el).find('#info_update').append('<li><span class="emblem">'  + $(el).find('h3').text() +'</span></li>')
        console.log('componentUpdated')
    },
    unbind: function (el) {
        console.log('unbind')
    }
})
new Vue({
    el:'#app-2',
    data:function(){
        return {
            msg:'test directive',
            show:true
        }
    },
    methods:{
        updateData:function(){
            this.msg = 'hello'
        }
        
    }
})

<script>
.emblem {
    background-color: #f46;
    color: #fff;
    padding: 2px 4px;
    font-size: 14px;
    line-height: 15px;
    height: 15px;
    border-radius: 4px;
    margin-top:5px;
    display: inline-block;
}
</script>
<div id="app-2">
    <button @click="updateData" class="btn btn-warn btn-sm">update</button>
    <button @click="show = !show" class="btn btn-warn btn-sm">bind&Insert</button>
    <button @click="show = !show" class="btn btn-warn btn-sm">unbind</button>
    <div class="box" v-if="show" v-test>
        <h3>{{msg}}</h3>
        <p id="info_update">
        </p>
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reprehenderit ad aut cupiditate.</p>
    </div>
</div>

插进去被绑元素时，能够看到bind阶段的被绑元素没有父元素，而inserted阶段是有的；而update阶段运用的是修正前的数据，componentUpdated阶段是运用后的数据，点击解绑按钮就是移除被绑元素，天然指令也和元素解绑了。

钩子函数参数

由于这几个参数，直接致使Vue天真度*2，就像定义一个组件那样，自定义指令由于参数的开放性会有无穷种能够。

• el：指令所绑定的元素，能够用来直接操纵DOM

• binding：一个对象，包括与指令自身相干的一些属性：

  • name：指令名，不包括v-前缀
  • value：指令的绑定值，如例v-hello = “1 + 1″中，绑定值为2
  • expression：字符串情势的指令表达式。比方v-hello = “1 + 1″中，表达式为”1 + 1”
  • oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用，不管值是不是转变都可用
  • arg：传给指令的参数，可选。比方v-hello:message中，参数为”message”
  • modifiers：一个包括修饰符的对象。比方v-hello.foo.bar中，修饰符对象为{foo:true, bar:true}
• vnode：Vue编译天生的假造节点。能够算作el的底层表现，我们就能够经由过程它进一步去操纵被绑元素
• oldVnode: 修正前的VNODE，仅在update和componentUpdated两个钩子函数中可用

一个有意义的示例不能够掩盖它们，在这里只能做个视察，背面写插件时只管运用它们。