自定义指令

转载

mob604756fca9f3 2021-09-28 22:49:00

全局指令

<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";
            },
          },