Vue.js-自定義指令

學習筆記： 自定義指令

自定義指令

自定義指令的註冊方法分爲全局註冊和局部註冊，好比註冊一個v-focus指令，用於在<input>、<textarea>元素初始化時自動得到焦點，兩種寫法分別是：

//全局註冊
Vue.directive('focus', {});

//局部註冊
new Vue({
    el: '#app',
    directives: {
        focus: {}
    }
});

自定義指令的選項是由幾個鉤子函數組成，每一個都是可選的：

• bind：只調用一次，指令第一次綁定到元素時調用，用這個鉤子函數能夠定義一個在綁定時執行一次的初始化動做。
• inserted：被綁定元素插入父節點時調用（父節點存在便可調用，沒必要存在於document中）。
• update：被綁定元素所在的模板更新時調用，而不論綁定值是否變化。經過比較更新先後的綁定值，能夠忽略沒必要要的模板更新。
• componentUpdate：被綁定元素所在模板完成一次更新週期時調用。
• unbind：只調用一次，指令與元素解綁時調用。

能夠根據需求在不一樣的鉤子函數內完成邏輯代碼。在元素插入父節點時就調用，用到的最好是inserted。

<div id="app">
    <input type="text" v-focus>
</div>

Vue.directive('focus', {
    inserted(el) {
        el.focus();
    }
});
new Vue({
    el: '#app',
});

打開頁面，input輸入框自動得到焦點，成爲可輸入狀態。

每一個鉤子函數都有幾個參數可用：

• el 指令所綁定的元素，能夠用來直接操做DOM

• binding 一個對象，包含如下屬性：

  • name 指令名，不包括v-前綴
  • value 指令的綁定值
  • oldValue 指令綁定的前一個值，僅在update和componentUpdate鉤子中可用。不管值是否改變均可用。
  • expression 綁定值的字符串形式。
  • arg 傳給指令的參數。
  • modifiers 一個包含修飾符的對象。
• vnode Vue編譯生成的虛擬節點。
• oldVnode 上一個虛擬節點僅在update和componentUpdate鉤子中可用。

<p data-height="265" data-theme-id="0" data-slug-hash="QxKQqY" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-自定義指令" class="codepen">See the Pen Vue-自定義指令 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

若是須要多個值，自定義指令能夠傳入一個JavaScript對象字面量。

<div id="app">
    <div v-test="{msg:'hello',name:'Andy}"></div>
</div>

開發一個實時時間轉換指令v-time

<p data-height="265" data-theme-id="0" data-slug-hash="wXoMpg" data-default-tab="html,result" data-user="whjin" data-embed-version="2" data-pen-title="Vue-實時時間轉換指令" class="codepen">See the Pen Vue-實時時間轉換指令 by whjin (@whjin) on CodePen.</p>
<script async src="https://static.codepen.io/ass...;></script>

Time.getFormatTime()方法就是自定義指令v-time所須要的，入參爲毫秒級時間戳，返回已經整理好時間格式的字符串。

在bind鉤子裏，將指令v-time表達式的值binding.value做爲參數傳入TimeFormatTime()方法獲得格式化時間，再經過el.innerHTML寫入指令所在元素。定時器el.__timeout__每分鐘觸發一次，更新時間，而且在unbind鉤子裏清除掉。

總結：在編寫自定義指令時，給DOM綁定一次性事件等初始動做，建議在bind鉤子內完成，同時要在unbind內解除相關綁定。