在 AngularJs 中，它的指令使用 directive ( name,factor_function)來實現：

angular.module( 'myapp' ,[]).directive (myDirective,function (){    return{      template : '',      restrict: '',      replace: '',      ........    }})

除了內置指令,Vue.js 也允許組件自定義指令。
+ 自定義指令提供一種機制將數據的變化映射為 DOM 行為
+ Vue.js 用 directive ( id,definition) 方法注冊一個全局的自定義指令
+ 自定義的指令接受兩個參數： 指令 ID 與定義對象
+ 也可以用組件的 directives 注冊一個局部自定義指令 （此方法相當于 AngularJs restrict 屬性為A）

1. 鉤子函數

+ 鉤子函數是 Windows 消息處理機制的一部分
+ 通過設置“鉤子”，應用程序可以在系統級對所有消息、事件進行過濾，訪問在正常情況下無法訪問的消息。
+ 鉤子的本質是一段用以處理系統消息的程序，通過系統調用，把它掛入系統。
+ Windows 的鉤子函數可以認為是 Windows 的主要特性之一。利用它們，您可以捕捉您自己進程或其它進程發生的事件。
+ 通過“鉤掛”，您可以給 Windows 一個處理或過濾事件的回調函數，該函數也叫做“鉤子函數”，當每次發生您感興趣的事件時，WINDOWS 都將調用該函數。

angularjs 提供了兩個函數： compile 和 link ,其中編譯函數主要負責將作用域和 DOM 進行鏈接；鏈接函數用來創建可以操作 DOM 的指令

注意: compile 和 link 是互斥的，入如果同時設置這兩個選項，則會把 compile 返回函數當做 link 函數，而忽略 link 選項本身
Vue.js 同樣也提供了幾個鉤子函數都是可選的，相互之間沒有制約關系

鉤子函數：主要負責將作用域和 DOM 進行鏈接；鏈接函數用來創建可以操作 DOM 的指令

+ bind ― 只調用一次，在指令第一次綁定到元素上的時候調用,用這個鉤子函數可以定義一個在綁定時執行一次的初始化動作

inserted ― 被綁定元素插入父節點時調用（父節點存在即可調用，不必存在于 document 中）

update ― 在 bind 之后立即以初始值為參數第一次調用，之后每當被綁定元素所在的模板更新時調用，而不論綁定值是否變化。通過比較更新前后的綁定值，可以忽略不必要的模板更新，參數為新值與舊值。

componentUpdated ― 被綁定元素所在模板完成一次更新周期時調用

unbind ― 只調用一次，在指令從元素上解綁時調用

 Vue.directive('my-directive', {   bind: function(){    //做綁定的準備工作    //比如添加事件監聽器，或是其他只需要執行一次的復雜操作   },   inserted: function(){    //...   },   update: function(){    //根據獲得的新值執行對應的更新    //對于初始值也會調用一次   },   componentUpdated: function(){    //...   },   unbind: function(){    //做清理操作    //比如移除bind時綁定的事件監聽器   }  })

在注冊之后，便可以在 Vue.js 模板中這樣寫（記得添加前綴 v-）:

<div v-my-directive = 'someValue'></div>

當只需要 update 函數時，可以傳入函數替代定義對象：

Vue.directive( 'my-directive',function (value) {  // 這個函數作用 update()})

2. 指令實例屬性

所有鉤子函數都將被賦值到實際的指令對象中，在鉤子內 this 指向這個指令對象。
這個對象暴露了一些有用的屬性：
鉤子函數的參數：

el ― 指令綁定的元素，可以用來直接操作 DOM 。

binding ― 一個對象，包含以下屬性：
name ― 指令的名字，不包含前綴
value ―指令的綁定值， 例如： v-my-directive=”1 + 1”，value 的值是 2。
oldValue ― 指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression ― 指令的表達式，不包括參數和過濾器，綁定值的字符串形式。 例如 v-my-directive=”1 + 1” ， expression 的值是 “1 + 1”
arg ― 傳給指令的參數。例如 v-my-directive:foo， arg 的值是 “foo”。
modifiers ― 一個對象，包含指令的修飾符。例如： v-my-directive.foo.bar, 修飾符對象 modifiers 的值是 { foo: true, bar: true }。
vm ― 擁有該指令上下文 ViemModel
vnode ― Vue 編譯生成的虛擬節點。

oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

desciiptor ― 一個對象，包含指令的解析結果

注意：我們應當將這些屬性視為只讀，不要修改它們，我們也可以給指令對象添加自定義屬性，但是注意不要覆蓋已有的內部屬性

下面將講解一個簡單的例子，當頁面加載時，input輸入框將自動聚焦。
代碼如下：

//注冊一個全局自定義指令v-focus// 當綁定元素插入到DOM中// 聚焦元素 <div id="app">   <input v-focus> /div>Vue.directive('focus', {  inserted: function (el) {    el.focus() }  }); var app = new Vue({        el: '#app'      });

下面將講解一個使用鉤子函數參數的例子，將元素的字體色設置為 #fff，將背景色設置為傳入指令的參數 red，并將指令名指令綁定值，指令綁定值的表達式，傳入指令的參數顯示在中。

代碼如下：

 <div id="example" v-demo-directive:red="message"></div><script>  Vue.directive('demoDirective', {    bind: function(el, binding, vnode){      el.style.color = '#fff'      el.style.backgroundColor = binding.arg      el.innerHTML =        '指令名 name:' + binding.name + '<br>' +       '指令綁定值 value:' + binding.value + '<br>' +       '指令綁定表達式expression:' + binding.expression + '<br>' +       '傳入指令的參數argument - '  + binding.arg + '<br>'      },    });    var demo = new Vue({      el: '#example',      data: {        message: 'hello!'      }    })    </script>

3. 對象字面量

+ 如果指令需要多個值，則可以傳入一個 javascript 對象字面量
+ 指令可以使用任意合法的 javascript 表達式

<div id="app" v-demo-directive="{ color: 'white', text: 'hello!' }"></div>Vue.directive('demoDirective', function(el, binding, vnode){    console.log(binding.value.color);    console.log(binding.value.text);  });var demo = new Vue({    el: '#app'  })

4. 字面指令

+ 當指令使用了字面修飾符時，它的值將按普通字符串處理并傳遞給 update 方法
+ update 方法將只調用一次，因為普通字符串不能影響數據變化
+ 若在創建自定義指令時，設置 inListerral: true 則特性值將被視作字符串，并將賦值給該指令的expression，字面指令不會建立數據監視。

div id="isExample" v-myEx.literal = 'foo bar baz'></div>Vue.directive('myEx',function(el, binding, vnode){  console.log(binding.value.literal)})var hah = new Vue({  el: '#isExample'})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。