Vue.js中Directive知識

近期所學的Vue.js這個MVVM前端技術緩解了我一直愁於先後端開發雜糅所帶來的痛苦。今天就來講說關於Vue.js裏面的Directive知識。

 

Directive

Directive看上去雖然和Angular中的定義相似，Directive都是對DOM功能的一種拓展，可是Vue的Directive要弱的多。

由於，Vue Component原本就包括對DOM的操做，因此大多數時候咱們寫一個通用組件都是一個Component而不是一

個Directive，可是在Angular中每寫一個通用組件，通常都是一個Directive。因此，相對來講，Vue的Directive要純粹

的多（它就是對DOM功能的一個拓展，而不是爲了封裝和DOM相關的邏輯）。

 

生命週期

生命週期分爲三個階段：

• bind　　　　:第一次綁定到DOM元素上的時候觸發

• update bind:完成以後當即觸發，之後每當參數更新的時候都會觸發

• unbind　　  :解除和DOM元素的綁定時觸發

 

其中，update是最重要的。update函數接收的參數就是用戶經過Attr傳入的值。

咱們來舉一個簡單的Directive案例：

它的做用是對Todo List輸入的內容進行校驗（表單校驗）。Directive基本結構爲：

 

1 Vue.directive("minlength", {
2     bind: function() {
3     },
4     update: function() {
5     },
6     unbind: function() {
7    }
8 });

 

接下來，咱們須要在用戶輸入數據的時候進行校驗，代碼以下:

 1 Vue.directive("minlength", {
 2   bind: function() {
 3     var self = this;
 4     var el = this.el;
 5 
 6     el.addEventListener("keydown", function(e) {
 7       if(e.keyCode === 13) {
 8         if(el.value.length < self.minlength) {
 9           e.preventDefault();
10         }
11       }
12     });
13 
14     var submit = el.parentNode.querySelector("button, [type='submit']");
15     submit.disabled = true;
16     el.addEventListener("keyup", function(e) {
17       submit.disabled = (el.value.length < self.minlength);
18     });
19   },
20   update: function(value) {
21     this.minlength = parseInt(value);
22   },
23   unbind: function() {
24   
25   }
26 });

 

從上述代碼來看，Directive應該就是爲了實現相似的功能存在的，固然還有不少其它的用法就再也不細說了。

其次，Directive在Vue中並非很重要的一塊，因此，建議你們平時寫代碼的時候更多仍是寫Component。