自定义指令

全局指令

<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";
            },
          },
          focus: {             //  数据渲染到页面上后触发             inserted(el) {               el.focus();             },
          },
 

 

上一篇:vue 动态指令防抖节流


下一篇:Android开发 -- Jetpack 之 Data Binding 是什么、快速入门、简单使用、通俗解释