這篇文章主要介紹Vue2.x-directive的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)秉承實(shí)現(xiàn)全網(wǎng)價(jià)值營(yíng)銷的理念，以專業(yè)定制企業(yè)官網(wǎng)，做網(wǎng)站、網(wǎng)站建設(shè)，微信平臺(tái)小程序開發(fā)，網(wǎng)頁設(shè)計(jì)制作，成都手機(jī)網(wǎng)站制作，成都全網(wǎng)營(yíng)銷幫助傳統(tǒng)企業(yè)實(shí)現(xiàn)“互聯(lián)網(wǎng)+”轉(zhuǎn)型升級(jí)專業(yè)定制企業(yè)官網(wǎng),公司注重人才、技術(shù)和管理，匯聚了一批優(yōu)秀的互聯(lián)網(wǎng)技術(shù)人才,對(duì)客戶都以感恩的心態(tài)奉獻(xiàn)自己的專業(yè)和所長(zhǎng)。

除了默認(rèn)設(shè)置的核心指令( v-model 和 v-show ),Vue 也允許注冊(cè)自定義指令。注意，在 Vue2.0 里面，代碼復(fù)用的主要形式和抽象是組件——然而，有的情況下,你仍然需要對(duì)純 DOM 元素進(jìn)行底層操作,這時(shí)候就會(huì)用到自定義指令。

官方建議directive是對(duì)純 DOM 元素進(jìn)行底層操作使用，一般情況下還是建議使用組件的復(fù)用。

directive的意義

自定義指令是用來操作DOM的。

盡管數(shù)據(jù)驅(qū)動(dòng)是Vue的核心之一，但是在實(shí)際情況下，并不是所有的情況都可以用數(shù)據(jù)來驅(qū)動(dòng)視圖，我們不可避免的會(huì)在有些情況下有操作DOM的需求，所以directive也就出現(xiàn)了。自定義指令就是一種有效的補(bǔ)充和擴(kuò)展，不僅可用于定義任何的DOM操作，并且是可復(fù)用的。

官方栗子

code

// 注冊(cè)一個(gè)全局自定義指令 v-focus
Vue.directive('focus', {
 // 當(dāng)綁定元素插入到 DOM 中。
 inserted: function (el) {
  // 聚焦元素
  el.focus()
 }
})

//局部指令
directive: {
 focus(el){
  el.focus()
 }
}

use

//input標(biāo)簽自動(dòng)獲得標(biāo)簽

是不是感覺很簡(jiǎn)單？相信自己，其實(shí)vue大法真心不難，難得是如何應(yīng)用。下面先來簡(jiǎn)單看看的鉤子函數(shù)。

鉤子函數(shù)

1. bind：在該元素綁定指令時(shí)調(diào)用且僅調(diào)用一次，用于初始化

2. inserted：元素插入父節(jié)點(diǎn)時(shí)調(diào)用（可能仍在虛擬Dom中）

3. update：模板更新時(shí)調(diào)用

4. componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。

5. unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。

鉤子參數(shù)

1. el: 指令所綁定的元素，可以用來直接操作 DOM 。

2. binding: 一個(gè)對(duì)象，包含以下屬性：

1. name: 指令名，不包括 v- 前綴。

2. value: 指令的綁定值

3. oldValue: 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。

4. expression: 綁定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。

5. arg: 傳給指令的參數(shù)。例如 v-my-directive:foo， arg 的值是 "foo"。

6. modifiers: 一個(gè)包含修飾符的對(duì)象。 例如： v-my-directive.foo.bar, 修飾符對(duì)象 modifiers 的值是 { foo: true, bar: true }。

3. vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)。

4. oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

實(shí)際應(yīng)用

directive的語法就這么簡(jiǎn)單，在合適的鉤子中做應(yīng)該做的事就可以了。下面會(huì)列出兩個(gè)使用指令的栗子

集成第三方插件

用了一段時(shí)間的vue，其實(shí)我都沒有留意directive具體使用，一般來言真的很少使用到。直到有一次需要集成第三方插件到Vue時(shí)才發(fā)現(xiàn)，原來directive是集成第三方插件最合適也是最簡(jiǎn)單的方式。凡是關(guān)于第三方的集成，都可以嘗試使用directive

import Vue from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'

Vue.directive('highlight', {
 bind(el){
  hljs.highlightBlock(el);
 },
})

use

 
   //code here
 

如上，我注冊(cè)了一個(gè)全局的指令 highlight。 指令的作用就是高亮代碼，當(dāng)元素帶上'v-highlight'時(shí)，hljs就會(huì)去初始化該Dom。

當(dāng)然我這是可以使用組件來實(shí)現(xiàn)這個(gè)功能，但絕對(duì)沒有指令那么方便快捷，下面是一個(gè)簡(jiǎn)略的組件，可以看出，不僅定義和使用都比指令來的復(fù)雜。

指令驗(yàn)證

如果需要一個(gè)可以復(fù)用的驗(yàn)證，我們也可以使指令來完成，下面來看一個(gè)簡(jiǎn)單的栗子：

Vue.directive('checkName', {
 //監(jiān)控?cái)?shù)據(jù)變化 
 update(el, binding){
   let regex = /^[a-zA-z]{6,10}$/g;
   //=value === oldValue, 避免重復(fù)更新
   if(binding.value !== binding.oldValue){
     el.style.border = regex.test(binding.value) ? '' : '1px solid red';
   }
 }
})

user

//當(dāng)value的值不是6-10的字母的時(shí)，input的boder變?yōu)榧t色;

result

結(jié)果很明顯，不符合規(guī)則的數(shù)據(jù)，input的邊框變紅了。

以上是“Vue2.x-directive的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站www.cdcxhl.com，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

當(dāng)前文章：Vue2.x-directive的示例分析-創(chuàng)新互聯(lián)
標(biāo)題URL：http://weahome.cn/article/dpopdd.html