面試題系列---【Vue中的自定義指令和使用方式】

自定義指令
當Vue中的核心內置指令不能夠滿足我們的需求時，我們可以定制自定義的指令用來滿足開發的需求。

1、全局自定義指令
（1）定義全局自定義指令
以下就是一個自定義指令讓文本框獲取焦點的實例：

//自定義全局的指令
Vue.directive('focus', {
//第一個參數永遠是el，表示原生的js對象
bind: function (el) { //當指令綁定到元素上的時候，會立即執行bind函數，只執行一次，此時元素還沒有插入到DOM中,focus聚焦此時不會生效
el.focus()
},
inserted: function (el) { //當元素插入到DOM中的時候，會執行inserted函數，只執行一次
el.focus()
},
updated: function () { //當VNode的時候，會執行updated函數，可能出發多次
}
});

（2）使用全局自定義指令

<input type="text" class="form-control" v-model="keywords" v-focus">

 

2、私有自定義指令（組件內定義指令）
（1）和私有自定義過濾器類似，也是將作為和methods平級的屬性定義在VM的實例中

directives: {
'fontweight': {
bind: function (el, bingding) {
el.style.fontWeight = bingding.value;
}
},
'fontsize': function (el, bingding) { //這個function等同於把代碼寫到了bind和update中去
el.style.fontSize = parseInt(bingding.value) + 'px';
}
}

（2）在dom中使用該指令

 <div id="app2" v-color="'pink'" v-fontweight="200" v-fontsize="20">
    <p>{{date | dateFormat}}</p>
 </div>