vue中的自定義指令

vue中提供了豐富的內置指令，如v-if,v-bind,v-on......,除此以外咱們還能夠經過Vue.directive({})或者directives:{}來定義指令

在開始學習以前咱們應該理解，自定義指令的應用場景，任何功能的開發都是爲了解決具體的問題的， 

經過自定義指令，咱們能夠對DOM進行更多的底層操做，這樣不只能夠在某些場景下爲咱們提供快速解決問題的思路，並且讓咱們對vue的底層有了進一步的瞭解

1.自定義指令能夠是全局的，也能夠是局部的，全局和局部的區別估計不用多說，你們都知道。

下面咱們先了解一下Vue.directive({})內部的鉤子函數以及重要的鉤子函數的參數，有助於咱們對

自定義指令的瞭解

鉤子函數：

      1.bind: 此鉤子函數只會被調用一次，能夠定義一個在綁定時執行一次的初始化動做

      2.inserted: 當被綁定的元素插入到父元素中是低調用（此處的父元素不侷限於document中）

      3.update: 不論被綁定的值是否發生了變化，在末班更新時都會被調用，

      4.componentUpdated:被綁定的元素在模板完成一次更新週期時調用，

      5.unbind: 只調用一次，元素解綁時調用

參數： 

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

       2.binding: 一個對象，包含如下屬性

             name: 指令的名稱

             value： 指令綁定的值

             oldValue: 指令綁定前一個值

             expression: 綁定值的字符串形式

             arg： 傳給指令的參數

             modifiers: 這是一個包含修飾符的對象

 

代碼演示： 

 

輸出結果