Vue.directive(自定義指令)

阿新 • • 發佈：2020-11-05

_{Vue.directive指令(自定義指令)}　　

　　除了核心功能預設內建的指令 (v-model 和 v-show)，Vue 也允許註冊自定義指令。注意，在 Vue2.0 中，程式碼複用和抽象的主要形式是元件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。舉個改變dom元素顏色的例子，如下：

html頁面定義

Vue.directive("hello",function(el,binding,vnode){
　　　　//el是繫結指令的頁面元素例項，binding是一個物件，上面有很多方法可以獲取元素屬性；
       el.style["color 
"]= binding.value;
})

然後你可以在模板中任何元素上使用新的 v-focus property，如下:

<input     v-focus>    //用v-指令名    來使用自定義指令

全域性定義

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

區域性定義

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 建立指令(可以多個)
    directives: {
         
// 第一個自定義指令，指令名稱可以自定義，最好有意義
        first: {
            inserted(el) {
                // 指令中第一個引數是當前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對DOM進行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background  
= '#000';
            }
        },
        //第二個自定義指令
        second: {
            inserted(el) {
                // 指令中第一個引數是當前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 對DOM進行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

引數（每個指令都含有這三個引數）

el : 指令所繫結的元素，可以用來直接操作DOM
binding: 一個物件，包含指令的很多資訊
vnode: VUE編譯生成的虛擬節點

生命週期

bind 只調用一次，指令第一次繫結到元素時候呼叫，用這個鉤子可以定義一個繫結時執行一次的初始化動作。
- binding：一個物件，包含以下 property：
  - name：指令名，不包括 v- 字首。
  - value：指令的繫結值，例如：v-my-directive="1 + 1" 中，繫結值為 2。
  - oldValue：指令繫結的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
  - expression：字串形式的指令表示式。例如 v-my-directive="1 + 1" 中，表示式為 "1 + 1"。
  - arg：傳給指令的引數，可選。例如 v-my-directive:foo 中，引數為 "foo"。
  - modifiers：一個包含修飾符的物件。例如：v-my-directive.foo.bar 中，修飾符物件為 { foo: true, bar: true }。
inserted:被繫結的元素插入父節點的時候呼叫(父節點存在即可呼叫，不必存在document中)
update: 被繫結與元素所在模板更新時呼叫，而且無論繫結值是否有變化，通過比較更新前後的繫結值，忽略不必要的模板更新
componentUpdate :被繫結的元素所在模板完成一次更新更新週期的時候呼叫
unbind: 只調用一次，指令元素解綁的時候呼叫

Vue.directive("hello",{
        //bind 只調用一次，指令第一次繫結到元素時候呼叫
        bind:function(el,bingind,vnode){
            el.style["color"] = bingind.value;
            console.log("1-bind");
            console.log(el.parentNode);
        },
        //inserted:被繫結的元素插入父節點的時候呼叫(父節點存在即可呼叫，不必存在document中)
        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');
        }
 })