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 看起來比較簡單，略過。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。