介紹
除了內(nèi)置指令与柑，Vue.js 也允許注冊自定義指令。自定義指令提供一種機制將數(shù)據(jù)的變化映射為 DOM 行為蓄坏。
可以用 Vue.directive(id, definition) 方法注冊一個全局自定義指令价捧，它接收兩個參數(shù)指令 ID 與定義對象。
正文
特點：
1涡戳、指令的定義一定要放到 new Vue({}) 代碼之前结蟋，否則報錯并且無效
2、在利用Vue.directive()注冊指令的時候渔彰，不需要加上v- 這個前綴
3嵌屎、在dom元素上使用的時候推正，必須加上v- 前綴
4、如果想要給自定義屬性指令傳入?yún)?shù)宝惰，則注意：
- 1在注冊的時候要利用 params:[] 來接收參數(shù)
- 2 通過bind:function(){}中 利用 this.params點出和parms:[]中定義的那個字符串同名的屬性
- 3在dom元素上使用的時候
- 4 通過 v-color空格更上 parmas:[]中定義好的同名的參數(shù)名稱
1.鉤子函數(shù)
定義對象可以提供幾個鉤子函數(shù)（都是可選的）：
?bind：只調(diào)用一次植榕，在指令第一次綁定到元素上時調(diào)用。
?update： 在 bind 之后立即以初始值為參數(shù)第一次調(diào)用尼夺，之后每當(dāng)綁定值變化時調(diào)用尊残，參數(shù)為新值與舊值。
?unbind：只調(diào)用一次淤堵，在指令從元素上解綁時調(diào)用寝衫。
<div v-my-directive="someValue"></div>
Vue.directive('my-directive', {
bind: function () {
// 準(zhǔn)備工作
// 例如，添加事件處理器或只需要運行一次的高耗任務(wù)
},
update: function (newValue, oldValue) {
// 值更新時的工作
// 也會以初始值為參數(shù)調(diào)用一次
},
unbind: function () {
// 清理工作
// 例如拐邪，刪除 bind() 添加的事件監(jiān)聽器
}
})
2.指令實例屬性
所有的鉤子函數(shù)將被復(fù)制到實際的指令對象中慰毅，鉤子內(nèi) this 指向這個指令對象。這個對象暴露了一些有用的屬性：
?el: 指令綁定的元素庙睡。
?vm: 擁有該指令的上下文 ViewModel事富。
?expression: 指令的表達式，不包括參數(shù)和過濾器乘陪。
?arg: 指令的參數(shù)统台。
?name: 指令的名字，不包含前綴啡邑。
?modifiers: 一個對象贱勃，包含指令的修飾符。
?descriptor: 一個對象谤逼，包含指令的解析結(jié)果
3.自定義屬性指令
1贵扰、自定義屬性指令Vue.directive(指令id（注意不能以v-開頭，將來在使用的時候自動加上）,function(){this.el})
屬性指令舉例：
<input type="text" v-focus> 中的 v-focus 這個指令我們稱之為自定義屬性指令
定義格式：
Vue.directive('focus',{
bind:function(){
//這個指令的邏輯
//可以利用this.el來獲取到當(dāng)前指令所在的元素對象
this.el.style.color = 'red';
}
});
////定義一個帶有參數(shù)的自定義指令
Vue.directive('color',{
params:['colorname'],
bind:function(){
//1.0 獲取到colorname的值
var cname = this.params.colorname;
//2.0 獲取到el以后給其賦予一個樣式
this.el.style.color = cname;
}
});
使用：
<input type="text" v-model="productid" v-color colorname="blue" > -----其實就是this.el.style.color = cname=colorname= “blue”流部，
4.自定義元素指令
<my-v-datefmt></my-v-datefmt>
//定義元素指令
Vue.elementDirective('my-v-datefmt',{
bind:function(){
//邏輯代碼
var date = new Date(this.vm.time);
var year = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
//輸出： yyyy-mm-dd
var fmtStr = year+'-'+m +'-'+d;
this.el.innerText = fmtStr;
}
});
new Vue({
el:'#app',
data:{
time:new Date()
},
methods:{
}
});
結(jié)果
2017-6-14
