Vue自定義指令基礎全面詳解

本文介紹Vue自定義指令基礎，採用註冊一個v-color的指令，給字體賦值顏色爲例子。若是以爲滿意的點個贊。

1、全局註冊

Vue.directive('color', {
    inserted: function (el,binding) {
        el.style.color=binding.value;
    }
})
複製代碼

使用

<template>
    <div>
        <h1 v-color="color">自定義指令</h1>
    </div>
</template>
<script>
export default {
    data() {
        return {
            color:'red'
        }
    },
}
</script>
複製代碼

渲染

2、局部註冊

<template>
    <div>
        <h1 v-color="color">自定義指令</h1>
    </div>
</template>
<script>
export default {
    data() {
        return {
            color:'red'
        }
    },
    directives:{
        color:{
            inserted:function(el,binding){
                el.style.color=binding.value;
            }
        }
    }
}
</script>
複製代碼

三 自定義指令的鉤子函數

從上面的例子的能夠看到inserted的選項，這個就是自定義指令的鉤子函數，自定義指令有五個鉤子函數：

1. bind：只調用一次，在指令第一次綁定到元素時調用，能夠在這個鉤子函數中進行初始化設置;
2. inserted：被綁定元素插入父節點時調用,在bind後面調用；
3. update：所在綁定的組件的VNode更新時調用，可是可能發生在其子VNode更新以前。 調用時指令的值不必定發生改變，經過比較更新先後的值來忽略沒必要要的模板更新；
4. componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用;
5. unbind：只調用一次，指令與元素解綁時調用。

Vue.directive('color', {
    bind:function(){
        alert('bind')
    },
    inserted: function (el,binding) {
        alert('inserted')
        el.style.color=binding.value;
    },
    update:function(el,binding){
        alert('update')
        el.style.color=binding.value;
    },
    componentUpdated:function(el,binding){
        alert('componentUpdated')
        el.style.color=binding.value;
    },
    unbind:function(){
       alert('v-color指令解綁')
    }
})
複製代碼

<template>
    <div>
        <h1 v-color="color" v-if="show">{{title}}</h1>
        <button @click="show=false">測試解綁v-color</button>
        <button @click="title='更換title'">更換title</button>
        <button @click="color='blue'">更換color</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            color: 'red',
            title: '自定義指令',
            show: true
        }
    },
}
</script>
複製代碼

4、鉤子函數的參數

從上面的例子的能夠看到inserted的選項的值是個Funcion,其中el binding就是鉤子函數的參數，其有4個參數：

1. el：指令所綁定的元素，能夠用來直接操做DOM；

2. binding：一個對象其中包括如下幾個屬性；

   • name：指令名，不包括 v- 前綴;
   • value：指令的綁定值，例：v-my-directive="1 + 1"中，綁定值爲 2；
   • expression：指令的綁定的表達式。例：v-my-directive="1 + 1"中，表達式爲 "1 + 1"；
   • arg：傳給指令的參數，例v-my-directive:foo中，參數爲 "foo";
   • modifiers：一個包含修飾符的對象。例:v-my-directive.foo.bar中，修飾符對象爲 { foo: true, bar: true },
   • oldValue：指令綁定的前一個值，僅在update和componentUpdated鉤子中可用。不管值是否改變均可用。

3. vnode：Vue 編譯生成的虛擬節點；

4. oldVnode：上一個虛擬節點，僅在update和componentUpdated鉤子中可用。

除了el以外，其它參數都是隻讀的，不能對其修改。若是須要在鉤子之間共享數據，要經過元素的dataset來進行。

5、註冊一個讓字體顏色閃爍的指令v-color

本例採用元素的dataset在不一樣的鉤子函數中控制setInterval，

採用動態指令參數來控制字體顏色閃爍頻率。

Vue.directive('color', {
    inserted: function (el, binding) {
        const interval = binding.arg ? binding.arg : 1000;
        if (Array.isArray(binding.value)) {
            let i = 0;
            el.style.color = binding.value[i];
            el.dataset.time = setInterval(() => {
                if (i > binding.value.length - 1) {
                    i = 0;
                }
                el.style.color = binding.value[i];
                i++;
            }, interval);
        } else {
            el.style.color = binding.value;
        }
    },
    componentUpdated: function (el, binding) {
        clearInterval(el.dataset.time);
        const interval = binding.arg ? binding.arg : 1000;
        if (Array.isArray(binding.value)) {
            let i = 0;
            el.style.color = binding.value[i];
            el.dataset.time = setInterval(() => {
                if (i > binding.value.length - 1) {
                    i = 0;
                }
                el.style.color = binding.value[i];
                i++;
            }, interval);
        } else {
            el.style.color = binding.value;
        }
    },
    unbind: function (el, binding) {
        clearInterval(el.dataset.time)
    }
})
複製代碼

<template>
    <div>
        <h1 v-color:[interval]="color">自定義指令</h1>
        <button @click="interval+=100">慢點閃</button>
        <button @click="interval-=100">快點閃</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            color: ['red','blue','green','yellow','Pink','purple'],
            interval:1000,
        }
    },
}
</script>
複製代碼