定義方式

• html頁面定義

Vue.directive("hello",function(el,binding,vnode){
       el.style["color"]= binding.value;
    })

• 全局定義

Vue.directive('hello', {
    inserted(el) {
        console.log(el);
    }
})

• 局部定義

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 創(chuàng)建指令(可以多個(gè))
    directives: {
        // 指令名稱
        hello: {
            inserted(el) {
                // 指令中第一個(gè)參數(shù)是當(dāng)前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對(duì)DOM進(jìn)行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

參數(shù)（每個(gè)指令都含有這三個(gè)參數(shù)）

• el : 指令所綁定的元素，可以用來直接操作DOM
• binding: 一個(gè)對(duì)象，包含指令的很多信息
• vnode: VUE編譯生成的虛擬節(jié)點(diǎn)

生命周期

• bind 只調(diào)用一次，指令第一次綁定到元素時(shí)候調(diào)用，用這個(gè)鉤子可以定義一個(gè)綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
• inserted:被綁定的元素插入父節(jié)點(diǎn)的時(shí)候調(diào)用(父節(jié)點(diǎn)存在即可調(diào)用，不必存在document中)
• update: 被綁定與元素所在模板更新時(shí)調(diào)用，而且無論綁定值是否有變化，通過比較更新前后的綁定值，忽略不必要的模板更新
• componentUpdate :被綁定的元素所在模板完成一次更新更新周期的時(shí)候調(diào)用
• unbind: 只調(diào)用一次，指令元素解綁的時(shí)候調(diào)用

Vue.directive("hello",{
        bind:function(el,bingind,vnode){
            el.style["color"] = bingind.value;
            console.log("1-bind");
            console.log(el.parentNode);
        },
        inserted:function(){
            console.log("2-insert");
            console.log(el.parentNode);
        },
        update:function(){
            console.log("3-update");
        },
        componentUpdated:function(){
            console.log('4 - componentUpdated');
        },
        unbind:function(){
            console.log('5 - unbind');
        }
    })