說明

今天介紹vue自定義指令。vue指令功能是提供給使用者操作dome的，雖然很多時候，我們可以透過選擇器是操作dome,但是當dome狀態改變是，我們很難捕獲，所以vue不建議使用者直接操作dome，而是使用指令的形式。
vue內建了很多指令，v-model,v-if,v-show,v-text,v-html等。某些時候這些指令不能滿足我們，我們可以透過自定義指令來實現我們想要的指令。

指令註冊

指令可以全域性註冊和區域性註冊，全域性註冊可以在整個專案使用，區域性註冊，只能在當前.vue頁面使用。下面介紹一下注冊方式：

<!doctype html><html lang="en"><head>
    <title>vue指令測試</title></head><body><div id="app"></div></body><!-- 開發環境版本，包含了有幫助的命令列警告 --><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></script><script>
    //這是全域性引入
    //Vue.directive('指令名稱','指令物件');

    var app = new Vue({
        el: '#app',
        data: {
            message: 'test!'
        },        //這裡區域性引入
        directives:{            '指令名稱':'指令配置'
        }
    })</script></html>

直接將指令掛載到vue物件上面，責為全域性引入，放到元件裡面的directives物件上，則為區域性引入。

指令各生命週期的鉤子

Vue.directive('lang', { //五個註冊指令的鉤子函式
            bind: function() { //只呼叫一次，指令被繫結
                console.log('1 - bind');
            },            inserted: function() { //當被繫結的元素插入到 DOM 中時……
                console.log('2 - inserted');
            },            update: function() { //所在元件的 VNode 更新時呼叫，此時資料不一定更新
                console.log('3 - update');
            },            componentUpdated: function() { //指令所在元件的 VNode 及其子 VNode 全部更新後呼叫
                console.log('4 - componentUpdated');
            },            unbind: function() { //只呼叫一次，指令與元素解綁時呼叫
                console.log('5 - bind');
            }
        })

可以看到，指令一開始會呼叫bind，在指令被繫結到dome時，會呼叫inserted，在有節點更新時，會呼叫update,節點更新完畢時，會呼叫componentUpdated，解除繫結時unbind被呼叫。下面我們實現一個指令，來具體講解。

指令實現，一個數字驗證輸入的指令

很多時候，輸入框內只能輸入正整數，比如說年齡，手機號等，如果自己實現校驗則比較麻煩，我們可以透過指令，操作輸入框，將使用者輸入的非數字字元給去掉。下面先引入自定義指令numCheck

<!doctype html><html lang="en"><head>
    <title>vue指令測試</title></head><body><div id="app">
    <input type="text" v-model="age" placeholder="請輸入年齡" v-num-check="changeAge">
    <button ='unbind()'>解綁</button></div></body><!-- 開發環境版本，包含了有幫助的命令列警告 --><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></script><script>
    var vm;    function unbind(){
        vm.$destroy();
    }    //這是全域性引入
    //Vue.directive('指令名稱','指令物件');
    //指令引數說明
    let args = {        el:'指令所繫結的元素，可以用來直接操作 DOM ',        binding:{            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 }。",
        },        vnode:"Vue 編譯生成的虛擬節點。",        oldVnode:"上一個虛擬節點"
    }    var numCheckObj = {        bind: function(el,binding) { //被繫結
            console.log('1 - bind');
            binding.value(el.value.replace(/[^0-9.]/g, ''))
        },        inserted: function() { //繫結到節點
            console.log('2 - inserted');
        },        update: function(el) { //元件更新
            console.log('before value ' + el.value)            console.log('3 - update');
        },        componentUpdated: function(el, binding, vnode) { //元件更新完成
            console.log('4 - componentUpdated');            //替換掉非數字
            binding.value(el.value.replace(/[^0-9.]/g, ''))
        },        unbind: function() { //解綁
            console.log('5 - bind');
        }
    }
    vm = new Vue({        el: '#app',        data: {            age:-10,            message: 'Hello Vue!'
        },        methods:{          //這裡需要改變data裡面的值，所以要新增一個回撥
          changeAge(val){             this.age = val;
          }
        },        //這裡區域性引入
        directives:{            'num-check':numCheckObj
        }
    })</script></html>

可以看到，我們給指令num-check傳遞了一個方法，來修改我們的age，當指令發現不符合規則是，會改變這個值，讓使用者看上去，這個框只能輸入數字。當我們改變輸入框的值，和銷燬例項是，可以看看控制檯列印。

執行效果：

執行效果

作者：伊澤瑞爾灬
連結：

vue系列自定義指令（三）

說明

指令註冊

指令各生命週期的鉤子

指令實現，一個數字驗證輸入的指令

相關文章