自定義指令是用來操作DOM的。儘管Vue推崇資料驅動檢視的理念，但並非所有情況都適合資料驅動。自定義指令就是一種有效的補充和擴充套件，不僅可用於定義任何的DOM操作，並且是可複用的。

1.下面定義了一個v-test指令繫結資料name

<template>
  <div class="hello">
      <div v-test='name'></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
     name:
 
'我是名字',
    }
  },
  directives:{
      test:{
        inserted: function (el,binding) {// 指令的定義
           / /el為繫結元素，可以對其進行dom操作
           console.log(binding) //一個物件，包含很多屬性屬性
        },
        bind: function (el, binding, vnode) {
            el.innerHTML =binding.value
          }
      }
  },
  created:
 
function(){
  },
  mounted:function(){ 
  },
  methods:{
  }
}
</script>

2.效果如下

3.定義一個全域性自定義指令

全域性自定義一個指令v-red，來修改HTML元素的背景色為紅色:

<div id="box">
        hello<span v-red> welcome</span>
    </div>
    <script type="text/javascript">
        Vue.directive('red',{
            inserted:
 
function(el){
                el.style.background = 'red';
            }
        });
        var vm = new Vue({
            data:{
            
            },
        }).$mount('#box'); 
    </script>

4.自定義指令的鉤子函式

一個指令定義物件可以提供如下幾個鉤子函式 (均為可選)：
inserted：被繫結元素插入父節點時呼叫 (僅保證父節點存在，但不一定已被插入文件中)。

bind：只調用一次，指令第一次繫結到元素時呼叫。在這裡可以進行一次性的初始化設定。

update：所在元件的 VNode 更新時呼叫，但是可能發生在其子 VNode 更新之前。指令的值可能發生了改變，也可能沒有。但是你可以通過比較更新前後的值來忽略不必要的模板更新 (詳細的鉤子函式引數見下)。

componentUpdated：指令所在元件的 VNode 及其子 VNode 全部更新後呼叫。

unbind：只調用一次，指令與元素解綁時呼叫。

指令鉤子函式會被傳入以下引數：
el：指令所繫結的元素，可以用來直接操作 DOM 。
binding：一個物件，包含以下屬性：
name：指令名，不包括 v- 字首。
value：指令的繫結值，例如：v-my-directive=“1 + 1” 中，繫結值為 2。
oldValue：指令繫結的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
expression：字串形式的指令表示式。例如 v-my-directive=“1 + 1” 中，表示式為 “1 + 1”。
arg：傳給指令的引數，可選。例如 v-my-directive:foo 中，引數為 “foo”。
modifiers：一個包含修飾符的物件。例如：v-my-directive.foo.bar 中，修飾符物件為 { foo: true, bar: true }。
vnode： Vue編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

參考---https://blog.csdn.net/smlljet/article/details/91874728

參考---https://blog.csdn.net/baidu_31333625/article/details/70473839