Vue.js允許妳註冊自定義指令，本質上是讓妳教會Vue壹些新技能:如何將數據變化映射到DOM行為。您可以使用Vue.directive(id，definition)的方法，通過傳入指令id和定義對象來註冊全局自定義指令。定義壹個對象需要提供壹些鉤子函數(都是可選的):
Bind:僅在指令第壹次綁定元素時調用壹次。
update:bind後立即進行第壹次調用，得到的參數是綁定的初始值；以後，每當綁定值發生變化時，就會調用它來獲取新值和舊值。
Unbind:僅在指令解除元素綁定時調用壹次。
示例:
Vue。Directional ('my-directional '，{ bind:function(){//做好綁定的準備。
//比如添加事件偵聽器，或者其他只需要執行壹次的復雜操作。
}、update: function(新值，舊值){//根據獲取的新值進行相應的更新。
//初始值也會調用壹次。
}，unbind: function () {//做清理工作。
//例如，刪除bind()中添加的事件偵聽器
}
})壹旦註冊了自定義指令，就可以像這樣在Vue.js模板中使用了(需要加上Vue.js的指令前綴，默認為v-):
& ltdiv v-my-directive="someValue " >& lt/div & gt；如果只需要更新函數，可以只傳入壹個函數，而不傳入定義對象:
Vue.directive ('my-directive '，function(value){//這個函數將作為update()函數})所有的鉤子函數將被復制到實際的指令對象中，這個指令對象將是所有鉤子函數中的這個。
語境環境。壹些有用的公共屬性在指令對象上公開:
El:指令綁定元素
Vm:擁有該指令的上下文視圖模型。
表達式:指令的表達式，不包括參數和過濾器。
Arg:指令的參數
Raw:未解析的原始表達式。
名稱:不帶前綴的命令名。
這些屬性是只讀的，不要修改它們。您還可以將自定義屬性附加到指令對象，但註意不要覆蓋現有的內部屬性。
使用指令對象屬性的示例:
& lt！DOCTYPE html & gt& lthtml & gt& lthead lang="en " >
& ltmeta charset="UTF-8 " >
& lttitle & gt& lt/title & gt；
& ltscript src = "/Ajax/libs/vue/0.12.16/vue . min . js " & gt；& lt/script & gt；& lt/head & gt；& ltbody & gt& ltdiv id = " demo " v-demo-directive = " LightSlateGray:msg " & gt。& lt/div & gt；& lt腳本& gt
Vue.directive('demoDirective '，{
bind:function(){ this . El . style . color = ' # fff '
this . El . style . background color = this . arg
},
update:function(value){ this . El . innerhtml = ' name-'+this . name+' & lt；' br & gt'+' raw-'+this . raw+' & lt；' br & gt'+' expression-'+this . expression+' & lt；' br & gt'+'參數-'+this . arg+' & lt；' br & gt'+'值- ' +值
}
});var demo = new Vue({
埃爾:' #演示'，
數據:{
味精:‘妳好！’
}
})& lt；/script & gt；& lt/body & gt；& lt/html & gt；多重子句
在同壹特性中，用逗號分隔的多個子句將被綁定到多個指令實例中。在下面的示例中，創建並調用了指令兩次:
& ltdiv v-demo="color: 'white '，text: 'hello！'" & gt& lt/div & gt；如果希望用壹個指令實例處理多個參數，可以使用文字對象作為表達式:
& ltdiv v-demo="{color: 'white '，text: 'hello！'} " & gt& lt/div & gt；
Vue.directive('demo '，function(value){ console . log(value)//Object { color:' white '，text: 'hello！'}})文字指令
如果在創建自定義指令時傳入了isLiteral: true，那麽屬性值將被視為直接字符串，並賦給指令的表達式。文字說明並不試圖建立數據監控。
示例:
& ltdiv v-literal-dir = " foo " & gt；& lt/div & gt；
Vue.directive('literal-dir '，{ isLiteral: true，bind:function(){ console . log(this . expression)//' foo '
}
})動態文字指令
然而，在文字指令包含Mustache標簽的情況下，指令的行為如下:
指令實例將有壹個屬性。_ isdynamical設置為true；
如果沒有提供update函數，Mustache表達式將只計算壹次，其值將被賦給this.expression。將不會監視表達式的數據。
如果提供了update函數，指令將為表達式建立壹個數據監視器，並在計算結果改變時調用update。
雙向指令
如果您的指令想要將數據寫回Vue實例，您需要雙向傳遞:true。此選項允許在指令中使用this.set(value)。
Vue。指令(' example '，{twoway: true，bind: function () {this。handler = function(){//將數據寫回vm。
//如果指令被v-example="a.b.c "這樣綁定，
//您將在此處為vm.a.b.c '賦值。
this.set(this.el.value)
}.bind(this)this . El . addevent listener(' input '，this.handler)
}，unbind:function(){ this . El . remove event listener(' input '，this.handler)
}
)內聯語句
傳入acceptStatement: true可以使自定義指令接受像v-on:
& ltdiv v-my-directive = " a++ " & gt；& lt/div & gt；
Vue.directive('my-directive '，{ acceptStatement: true，update: function (fn) { //傳入的值是壹個函數，
//將在所有者虛擬機的中執行“a++”語句
//範圍。
}
})但是請明智地使用這個函數，因為通常我們希望避免模板中的副作用。
深度數據觀測
如果妳想在壹個對象上使用壹個自定義指令，並且該指令的更新函數也可以在對象中的嵌套屬性改變時被觸發，那麽妳應該在指令的定義中傳入deep: true。
& ltdiv v-my-directive = " obj " & gt；& lt/div & gt；
Vue。Directive ('my-Directive '，{deep: true，update:function(obj){//當嵌套在obj內部的屬性發生變化時，也會調用此函數。
}
})指令優先級
您可以選擇給指令壹個優先級編號(默認值為0)。相同元素上具有較高優先級的指令將比其他指令更早處理。具有相同優先級的指令將按照它們在元素屬性列表中出現的順序進行處理，但是不能保證這種順序在不同的瀏覽器中是壹致的。
壹般來說，作為用戶，不需要關心內置指令的優先級。有興趣可以參考源代碼。邏輯控制指令V-repeat和V-if被視為“結論性指令”，它們在編譯過程中始終具有最高的優先級。
元素指令
有時，我們可能希望我們的指令被用作定制元素，而不是特性。這和Angular的E級指令的概念很像。element指令可以看作是壹個輕量級的定制組件(後面會討論)。您可以註冊自定義元素指令，如下所示:
Vue。elementdirective ('my-directive '，{//與普通指令的API壹致。
Bind: function () {//操作this.el...
}
})在使用它時，我們不再使用這種寫法:
& ltdiv v-my-directive & gt；& lt/div & gt；上面寫著:
& lt我的指令& gt& lt/my-directive & gt；元素指令不能接受參數或表達式，但它可以讀取元素的特征以確定其行為。和平時的指導有很大的區別。元素指令是final，這意味著Vue壹旦遇到元素指令，就會跳過對元素及其子元素的編譯——也就是說，只有元素指令本身才能操作元素及其子元素。
相信看完這個案例，妳已經掌握了方法。更多精彩請關註Gxl上其他相關文章！
相關閱讀:
Android開發中如何與js交互
Vue.js 2.0+開發的graphite文檔風格的富文本編輯器
用Video.js實現H5直播界面