全域性指令

<input v-color="'green'" v-focus="" type="text" v-model:value="msg" />

Vue.directive(引數一：名字不帶V-  引數二 物件 )
物件中三個鉤子函式{
　　一、bind 只調用一次，指令第一次繫結到元素時呼叫，用於初始化
　　二、inserted 元素已經渲染到介面上之後執行
　　三、update 元素更新時執行
}

Vue.directive("color", {
        // 初始化
        bind(el, binding) {
          console.log(el);
          console.log(binding);
 

          el.style.color = binding.value;
        },
        //  資料渲染到頁面上後觸發
        inserted(el) {
          console.log(el);
          el.style.fontSize = "40px";
        },

        // 資料更新，第一次渲染不會觸發
        update(dom) {
          console.log(dom);
          el.style.color = "blue";
        },
      });
 

區域性指令directives（注意多個s），與data平級，為一個物件，物件中的物件也有bind、inserted、update三個鉤子函式，多一個focus，資料渲染到頁面上後觸發

directives: {
          color2: {
            // 初始化
            bind(el, binding) {
              console.log(el);
              console.log(binding);
              //   el.style.color = "red";
              el.style.color = binding.value;
            },
            
 
//  資料渲染到頁面上後觸發
            inserted(el) {
              console.log(el);
              el.style.fontSize = "40px";
            },

            // 資料更新，第一次渲染不會觸發
            update(dom) {
              console.log(dom);
              el.style.color = "blue";
            },
          },