自定義指令

demo： JSbin

除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也允許註冊自定義指令。註意，在 Vue2.0 中，代碼復用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令。

這篇博客寫得略水，因為差不多都是 Vue官方文檔 上有的內容，自己只不過是跟著demo敲了一遍，也算是溫習一下吧~

基本用法

和組件類似分全局註冊和局部註冊，區別就是把component換成了derective

鉤子函數

指令定義函數提供了幾個鉤子函數（可選）：

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

inserted: 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在於 document中）。

update: 被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前後的綁定值，可以忽略不必要的模板更新（詳細的鉤子函數參數見下）。

componentUpdated: 被綁定元素所在模板完成一次更新周期時調用。

unbind: 只調用一次， 指令與元素解綁時調用。

鉤子函數參數

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 }。

vnode: Vue 編譯生成的虛擬節點。

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

使用 demo

• 比如我們要讓一個頁面打開之後自動聚焦到某個輸入框：

<div id=‘#app‘>
    <input type=‘text‘ v-focus> 自動聚焦到此輸入框
</div>

// 註冊指令
Vue.directive(‘focus‘,{

    // 被綁定元素插入父節點時調用
    inserted:function(el){

        // 被綁定元素聚焦
        el.focus()
    }
})
var app = new Vue({
    el:‘#app‘
})

• 熟悉自定義指令的參數

<div id=‘#app‘>
    <div v-mydirective:damn.a.b=‘msg‘></div>
</div>

Vue.directive(‘mydirective‘,{

    // 只調用一次，指令第一次綁定到元素時調用
    bind:function(el,binding,vnode){
        let keys = []
        for(key in vnode){
            keys.push(key)
        }
        el.innerHTML = `
        name : ${binding.name}
        expression : ${binding.expression}
        value : ${binding.value}
        arg : ${binding.arg}
        modifiers: ${JSON.stringify(binding.modifiers)}
        ${keys}
        `
    }
})
var app = new Vue({
    el:‘#app‘,
    data:{
        msg:‘this\‘s directive‘
    }
})

// 輸出結果
/*
name : mydirective
expression : msg
value : this‘s directive
arg : damn
modifiers: {"a":true,"b":true}
tag,data,children,text,elm,ns,context,fnContext,fnOptions,fnScopeId,key,componentOptions,componentInstance,parent,raw,isStatic,isRootInsert,isComment,isCloned,isOnce,asyncFactory,asyncMeta,isAsyncPlaceholder
*/

Vue.js 創建一個 CNODE 社區(5)