Vue2.x directive自定義指令

directive自定義指令

除了默認設置的核心指令( v-model 和 v-show ),Vue 也容許註冊自定義指令。

注意，在 Vue2.0 裏面，代碼複用的主要形式和抽象是組件——然而，有的狀況下,你仍然須要對純 DOM 元素進行底層操做,這時候就會用到自定義指令。

官方建議directive是對純 DOM 元素進行底層操做使用，通常狀況下仍是建議使用組件的複用。

directive的意義

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

儘管數據驅動是Vue的核心之一，可是在實際狀況下，並非全部的狀況均可以用數據來驅動視圖，咱們不可避免的會在有些狀況下有操做DOM的需求，因此directive也就出現了。自定義指令就是一種有效的補充和擴展，不只可用於定義任何的DOM操做，而且是可複用的。

官方栗子是自動聚焦輸入框
當頁面加載時，該元素將得到焦點 (注意：autofocus 在移動版 Safari 上不工做)。事實上，只要你在打開這個頁面後還沒點擊過任何內容，這個輸入框就應當仍是處於聚焦狀態。如今讓咱們用指令來實現這個功能：

// 註冊一個全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})


//若是想註冊局部指令，組件中也接受一個 directives 的選項：
directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

而後你能夠在模板中任何元素上使用新的  屬性，以下：

<input v-focus>v-focus

鉤子函數

　　一個指令定義對象能夠提供以下幾個鉤子函數 (均爲可選)：

• bind：在該元素綁定指令時調用且僅調用一次，用於初始化
• inserted：元素插入父節點時調用（可能仍在虛擬Dom中）
• update：模板更新時調用
• componentUpdated: 被綁定元素所在模板完成一次更新週期時調用。
• unbind: 只調用一次， 指令與元素解綁時調用。

鉤子參數

       指令鉤子函數會被傳入如下參數：

• el: 指令所綁定的元素，能夠用來直接操做 DOM 。
• binding: 一個對象，包含如下屬性：
  • name: 指令名，不包括 v- 前綴。
  • value: 指令的綁定值
  • 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 }。
• vnode: Vue 編譯生成的虛擬節點。
• oldVnode: 上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

實際應用

directive的語法就這麼簡單，在合適的鉤子中作應該作的事就能夠了。下面會列出兩個使用指令的栗子：

集成第三方插件

用了一段時間的vue，其實我都沒有留意directive具體使用，通常來言真的不多使用到。直到有一次須要集成第三方插件到Vue時才發現，原來directive是集成第三方插件最合適也是最簡單的方式。凡是關於第三方的集成，均可以嘗試使用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);
 },
})

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

　　如上，我註冊了一個全局的指令 highlight。 指令的做用就是高亮代碼，當元素帶上'v-highlight'時，hljs就會去初始化該Dom。

固然使用組件也是能夠實現這個功能，但絕對沒有指令那麼方便快捷，下面是一個簡略的組件，能夠看出，不只定義和使用都比指令來的複雜。

<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>

指令驗證

若是須要一個能夠複用的驗證，咱們也可使指令來完成，下面來看一個簡單的栗子：

//自定義指令
Vue.directive('checkName', {
 //監控數據變化 
 update(el, binding){
   let regex = /^[a-zA-z]{6,10}$/g;
   //=value === oldValue, 避免重複更新
   if(binding.value !== binding.oldValue){
     el.style.border = regex.test(binding.value) ? '' : '1px solid red';
   }
 }
})

//使用
<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>
 
//當value的值不是6-10的字母的時，input的boder變爲紅色;

result：（結果很明顯，不符合規則的數據，input的邊框變紅了。）

 

請記住指令的核心做用，irctive的意義：指令是用來操做DOM的。

參考：VUE-自定義指令、鋒子鍋鍋directive學習筆記