Vue.js 自訂指令

標籤：vue.directive(id   definition)   

自訂指令

除了預設設定的核心指令（如：v-model，v-for），Vue.js也允許註冊自訂指令，自訂指令提供一種機制將資料的變化映射為DOM行為

Vue.js用 Vue.directive(id, definition)方法註冊一個全域自訂指令，它接收兩個參數：指令ID和定義對象。也可以用組建的directives選項註冊一個局部自訂指令

例如：聚焦一個 input 元素

<div id="directive-focus">    <input v-focus></div><script src="//cdn.bootcss.com/vue/2.0.7/vue.js"></script><script>    // 註冊一個全域自訂指令 v-focus    Vue.directive(‘focus‘,{        //將繫結元素插入到 DOM 中        inserted:function(el){            // 聚焦元素            el.focus();        }    })    new Vue({        el:‘#directive-focus‘    })</script>

當頁面載入時，元素將獲得焦點。事實上，你訪問後還沒點擊任何內容，input 就獲得了焦點。

也可以註冊局部指令，組件中接受一個 directives 的選項：

directives: {    focus: {        // 指令的定義---    }}

鉤子函數

Vue.js提供了幾個鉤子函數（都是可選的，相互之間沒有制約關係）：

bind  --  只調用一次，指令第一次綁定到元素上時使用，用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作

inserted  --  被繫結元素插入父節點時調用（父節點存在即可調用，不必存在document中）

update  --  被繫結元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新

componentUpdated  --  被繫結元素所在的模板完成一次更新周期時調用 

unbind  --  只調用一次，指令與元素解除綁定時調用

Vue.directive(‘my-directive‘,{    bind:function(){        //準備工作        //例如，添加事件處理器或只需要運行一次的高耗任務    },    update:function(newValue, oldValue){        //值更新時的工作        //也會以初始值為參數調用一次    },    unbind:function(){        //清理工作        //例如，刪除bind()添加的事件監聽器    }})

在註冊之後，便可以在Vue.js模板中這樣用（記著添加首碼 v-）：

<div v-my-directive="someValue"></div>

當只需要update函數時，可以傳入一個函數替代定義對象：

Vue.directive(‘my-directive‘,function(value){    //這個函數用作update()})

鉤子函數參數

所有的鉤子函數都將被複製到實際的指令對象中，在鉤子內，this指向這個指令對象。

el  --  指令所綁定的元素，可以用來直接操作DOM

binding  --  一個對象，包含以下屬性：

        name  --  指令名，不包含v- 首碼

        value  --  指令的綁定值，例如：v-my-directive = "1+1", value值是 2

        oldValue  --  指令綁定的前一個值，僅在update和componentUpdated鉤子中可用，無論值是否改變都可用

        expression  --  綁定值的字串形式，例如：v-my-directive = "1+1", expression的值是"1+1"

        arg  --  傳給指令的參數，例如：v-my-directive: foo, arg的值是"foo"

        modifiers  --  一個包含修飾符的對象，例如：v-my-directive.foo.bar，修飾符對象modifiers的值是 { foo: true, bar: true }

        descriptor  --  一個對象，包含指令的解析結果

vnode  --  Vue編譯產生的虛擬節點

oldVnode  --  上一個虛擬節點，僅在update和componentUpdated鉤子中可用

vm  --  擁有該指令的上下文ViewModel

除了 el 之外，其它參數都應該是唯讀，盡量不要修改他們。如果需要在鉤子之間共用資料，建議通過元素的 dataset 來進行。

一個使用了這些參數的自訂鉤子範例：

HTML:

<div id="hook-argument-example" v-demo:hello.a.b="message"></div>

JS:

Vue.directive(‘demo‘,{    bind:function(el,binding,vnode){        var s = JSON.stringify;        el.innerHTML = ‘name:‘+s(binding.name)+‘<br>‘+                        ‘value:‘+s(binding.value)+‘<br>‘+                        ‘expression:‘+s(binding.expression)+‘<br>‘+                        ‘argument:‘+s(binding.argument)+‘<br>‘+                        ‘modifiers:‘+s(binding.modifiers)+‘<br>‘+                        ‘vnode keys:‘+Object.keys(vnode).join(‘,‘)    }})new Vue({    el:‘#hook-argument-example‘,    data:{        message:‘hello‘    }})

頁面效果：

650) this.width=650;" src="http://s5.51cto.com/wyfs02/M02/8A/71/wKiom1gv6FuR_YK1AACJxEwPtBQ695.png" title="QQ20161119135105.png" alt="wKiom1gv6FuR_YK1AACJxEwPtBQ695.png" />

函數簡寫

大多數情況下，我們可能想在 bind 和 update 鉤子上做重複動作，並且不想關心其它的鉤子函數。可以這樣寫:

Vue.directive(‘color-swatch‘, function (el, binding) {    el.style.backgroundColor = binding.value})

對象字面量

如果指令需要多個值，可以傳入一個 JavaScript 對象字面量。記住，指令函數能夠接受所有合法類型的 Javascript 運算式。

<div id="demo" v-demo="{color:‘red‘, text:‘hello!‘}"></div><script src="//cdn.bootcss.com/vue/2.0.7/vue.js"></script><script>    Vue.directive(‘demo‘,function(el,binding){        console.log(binding.value.color);        console.log(binding.value.text);    })    var demo = new Vue({        el:‘#demo‘    })</script>

650) this.width=650;" src="http://s3.51cto.com/wyfs02/M02/8A/71/wKiom1gv6wfA6WYDAAArxV5-FPQ415.png" title="QQ20161119140202.png" alt="wKiom1gv6wfA6WYDAAArxV5-FPQ415.png" />

本文出自 “dapengtalk” 部落格，請務必保留此出處http://dapengtalk.blog.51cto.com/11549574/1874582

Vue.js 自訂指令