Vue自訂指令詳解，vue自訂詳解

Vue自訂指令詳解，vue自訂詳解

在 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'})

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。