Directive
看上去雖然和Angular中的定義類似，Directive 都是對DOM功能的一種拓展，但是 Vue 的 Directive 要弱的多。因為 Vue Component 其實本來就會包含對DOM的操作，所以大多數時候我們寫一個通用組件都是一個Component 而不是一個 Directive，而 在 Angular 我們寫一個通用的組件一般都是一個 Directive 。
所以我說 Vue 的 Directive 相比於 Angular 要弱的多，也可以說純粹的多，他就是對 DOM 功能的一個拓展，而不是為了封裝和DOM相關的邏輯。有興趣可以通過對比這兩個UI庫就能明白：
•Vux https://github.com/airyland/vux
•Angular Bootstrap https://github.com/angular-ui/bootstrap
對比就會發現，其實在 Vue 中我們封裝一個通用的組件（其實不管是不是通用）都是一個 Component，但是在 Angular 中卻是一個 Directive，因為 Angular 中的 Controller 其實只能創建一個 $scope 作用域。可以簡單的認為在 Vue Directive = Angular Directive + Controller。前面講到過 Vue 很多設計都和Angular2類似，Vue 中的 Directive 基本可以等價於 Angular2 的 Directive，但是千萬不要和 Angular 中的 Directive 搞混了。
為了避免誤導，所以後面不再拿 Angular Directive 作對比了。
生命周期
生命周期分為三步：
•bind 第一次綁定到DOM元素上的時候觸發
•update bind完成之後立刻觸發，以後每當參數更新的時候都會觸發
•unbind 解除和DOM元素的綁定時觸發
API 簡潔到哭。。。
其中 update 是最重要的，也就是當 Directive 接收到一個值的更新的時候就會執行對應的代碼。update函數接收的參數就是用戶通過 Attr 傳入的值。
我們下面實現一個簡單的 Directive，它的作用是對 Todo List 輸入的內容進行校驗（表單校驗）。Directive 基本結構如下：
Vue.directive("minlength", {
bind: function() {
},
update: function(value) {
},
unbind: function() {
}
});
然後，我們需要在用戶輸入的時候進行校驗，這裡實現一個簡單的 minlength 校驗，代碼如下：
Vue.directive("minlength", {
bind: function() {
var self = this;
var el = this.el;
el.addEventListener("keydown", function(e) {
if(e.keyCode === 13) {
if(el.value.length < self.minlength) {
e.preventDefault();
}
}
});
var submit = el.parentNode.querySelector("button, [type='submit']");
submit.disabled = true;
el.addEventListener("keyup", function(e) {
submit.disabled = (el.value.length < self.minlength);
});
},
update: function(value) {
this.minlength = parseInt(value);
},
unbind: function() {
}
});
基本邏輯就在在 bind 階段的時候就綁定事件，然後根據 update 時候傳入的 minlength 值來進行判斷。
目前看，Directive 應該就是為了實現類似的功能存在的，當然還有很多細枝末節的用法就不再細講了。Directive 在 Vue 中並不是很重要的一塊，大家平時寫代碼的時候更多還是寫 Component。
Filter 和 Mixins 看起來比較簡單，略過。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。