快捷導(dǎo)航

詳解Vue2.x-directive的學(xué)習(xí)筆記

更新時(shí)間：2017年07月17日 15:01:14 作者：鋒子鍋鍋

這篇文章主要介紹了詳解Vue2.x-directive的學(xué)習(xí)筆記，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

除了默認(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的意義

自定義指令是用來(lái)操作DOM的。

盡管數(shù)據(jù)驅(qū)動(dòng)是Vue的核心之一，但是在實(shí)際情況下，并不是所有的情況都可以用數(shù)據(jù)來(lái)驅(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 v-focus>
//input標(biāo)簽自動(dòng)獲得標(biāo)簽

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

鉤子函數(shù)

bind：在該元素綁定指令時(shí)調(diào)用且僅調(diào)用一次，用于初始化
inserted：元素插入父節(jié)點(diǎn)時(shí)調(diào)用（可能仍在虛擬Dom中）
update：模板更新時(shí)調(diào)用
componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
unbind: 只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

鉤子參數(shù)

el: 指令所綁定的元素，可以用來(lái)直接操作 DOM 。
binding: 一個(gè)對(duì)象，包含以下屬性：
1. name: 指令名，不包括 v- 前綴。
2. value: 指令的綁定值
3. oldValue: 指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無(wú)論值是否改變都可用。
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 }。
vnode: Vue 編譯生成的虛擬節(jié)點(diǎn)。
oldVnode: 上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

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

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

集成第三方插件

用了一段時(shí)間的vue，其實(shí)我都沒(méi)有留意directive具體使用，一般來(lái)言真的很少使用到。直到有一次需要集成第三方插件到Vue時(shí)才發(fā)現(xiàn)，原來(lái)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

<pre>
 <code v-highlight>
   //code here
 </code>
</pre>

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

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

<template>
  <pre>
    <code ref="code">
     <slot name="code"></slot>
    </code>
  </pre>
</template>
<script>
  import hljs from 'highlight.js'
  import 'highlight.js/styles/monokai-sublime.css'
  export default {
    mounted(){
     hljs.highlightBlock(this.$refs.code);
    }
  }
</script>

指令驗(yàn)證

如果需要一個(gè)可以復(fù)用的驗(yàn)證，我們也可以使指令來(lái)完成，下面來(lái)看一個(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

<input v-model='value1' v-checkName='value1'></input>
<input v-model='value2' v-checkName='value2'></input>
<input v-model='value3' v-checkName='value3'></input>
<input v-model='value4' v-checkName='value4'></input>

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

result