Vue自定義指令的示例分析

這篇文章主要介紹Vue自定義指令的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

10年積累的網(wǎng)站設(shè)計、網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有左貢免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

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

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

1. 鉤子函數(shù)

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

angularjs 提供了兩個函數(shù)： compile 和 link ,其中編譯函數(shù)主要負(fù)責(zé)將作用域和 DOM 進(jìn)行鏈接；鏈接函數(shù)用來創(chuàng)建可以操作 DOM 的指令

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

鉤子函數(shù)：主要負(fù)責(zé)將作用域和 DOM 進(jìn)行鏈接；鏈接函數(shù)用來創(chuàng)建可以操作 DOM 的指令

+ bind — 只調(diào)用一次，在指令第一次綁定到元素上的時候調(diào)用,用這個鉤子函數(shù)可以定義一個在綁定時執(zhí)行一次的初始化動作

inserted — 被綁定元素插入父節(jié)點時調(diào)用（父節(jié)點存在即可調(diào)用，不必存在于 document 中）

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

componentUpdated — 被綁定元素所在模板完成一次更新周期時調(diào)用

unbind — 只調(diào)用一次，在指令從元素上解綁時調(diào)用

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

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

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

當(dāng)只需要 update 函數(shù)時，可以傳入函數(shù)替代定義對象：

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

2. 指令實例屬性

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

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

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

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

desciiptor— 一個對象，包含指令的解析結(jié)果

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

下面將講解一個簡單的例子，當(dāng)頁面加載時，input輸入框?qū)⒆詣泳劢埂?br/>代碼如下：

//注冊一個全局自定義指令v-focus
// 當(dāng)綁定元素插入到DOM中
// 聚焦元素
 <div id="app">
   <input v-focus>
 /div>

Vue.directive('focus', {
  inserted: function (el) {
    el.focus() }
  });

 var app = new Vue({
        el: '#app'
      });

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

代碼如下：

 <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>' +
       '指令綁定表達(dá)式expression:' + binding.expression + '<br>' +
       '傳入指令的參數(shù)argument - '  + binding.arg + '<br>'
      },
    });
    var demo = new Vue({
      el: '#example',
      data: {
        message: 'hello!'
      }
    })
    </script>

3. 對象字面量

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

<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. 字面指令

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

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

以上是“Vue自定義指令的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：Vue自定義指令的示例分析
轉(zhuǎn)載源于：http://muchs.cn/article24/ghggje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、手機網(wǎng)站建設(shè)、虛擬主機、動態(tài)網(wǎng)站、響應(yīng)式網(wǎng)站、域名注冊

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容