03Vue.js---自定义指令

Posted web前端开发大全

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了03Vue.js---自定义指令相关的知识,希望对你有一定的参考价值。

    自定义指令的简介(官网):除了核心功能默认内置的指令,Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。

    自定义指令分为局部指令和全局指令。顾名思义,它俩的作用范围不同。

    注意:1. 自定义指令命名时使用驼峰命名规则。在使用时,遇到大写字母需要将大写改为小写并在该字母前加“-”。如:myVue==>my-vue。2. 使用自定义指令时,需要在名字前面加“v-”。如:myVue==>v-my-vue。

一、自定义指令

1、全局指令

    自定义全局指令的关键字是 Vue.directive,具体使用方法见代码及注释:

js部分代码:

window.onload = function (){// Vue.directive(id,[opt])//    会在Vue中注册一个新的指令//          新指令的名称 就是  在定义时所指定的 id//          自定义的指令  在注册到Vue中时 会被默认的增加一个前缀  v-

  Vue.directive("myVue",{        
      // 生命周期的钩子函数
      // 创建
      bind(){          // 指令第一次绑定到元素上时,所执行的方法 , 只会被调用一次
          console.log("bind");
      },      // 写入
      inserted(){          // 被该指令绑定的元素  写入到 DOM 结构中
          console.log("inserted");
      },      // 更新
      update(){          // 被绑定的元素 在模板中 发生更新 会调用该方法
          alert("update");
      },      // 模板更新
      componentUpdate(){          // 被绑定的元素  在模板完成一次更新时 会被调用
          alert("componentUpdate");
      },      // 销毁
      unbind(){          // 解除绑定的时候调用
          alert("unbind");
      }
  });  new Vue({
    el:"#app"
  });
}

html部分代码:

<body>
  <div id="app">
    <!-- 定义是的指令名是myVue,这里使用时是 v-my-vue -->
    <div v-my-vue></div>
  </div></body>

2、局部指令

    自定义全局指令的关键字是 directives,具体使用方法见代码及注释:

js部分代码:

window.onload = function (){  new Vue({
    el:"#app",
    directives:{        //指令名称,这里可以定义多个指令。
        // 注意指令的有效范围
        myVue:{
            bind(){                console.log("bind");
            },
            inserted(){                console.log("inserted");
            },
            update(){                console.log("update")
            },
            componentUpdate(){                console.log("componentUpdate")
            },
            unbind(){                console.log("unbind")
            }
        }
    }
  });
}

html部分代码:

<body>
  <div id="app">
    <!-- 定义是的指令名是myVue,这里使用时是 v-my-vue -->
    <div v-my-vue></div>
  </div></body>

 

    通过上述自定义指令,结合钩子(生命周期)函数,我们可以对 DOM 对象进行底层操作。但是,由于考虑到上述代码都比较多,而且我们对DOM操作基本上是在元素创建(bind)和更新(update)两个阶段。所以,官网也提供了自定义指令的简写方式。

二、简写方式

    全局方式的简写:Vue.directive( 指令名 , 函数 )。第二个参数(函数)会在指令 bind 和 update 的时候调用;

    局部指令的简写:directives:{ 指令名 : 函数 }。也是在指令 bind 和 update 的时候调用函数。具体见代码部分:

js部分代码:

// fun 只会在 指令 的bind  和 update 调用// 自定义全局指令简写Vue.directive("hello",function(){    console.log("调用全局指令");
});new Vue({    el:"#app",    data:{        msg:"消息"
    },    //自定义局部指令简写
    directives:{        world:function(){            console.log("局部指令");
        }
    }
});

html部分代码:

<body>    <div id="app">        <div v-hello>{{msg}}</div>        <div v-world>{{msg}}</div>        <input type="text" v-model="msg">    </div></body>

    通过这种简写方式,代码量确实少了很多。

三、参数传递

    上面介绍的自定义指令都是不带参数的。

    vue.js 的指令参数是以" : " 为关键字;

    vue.js 的修饰符是以 " . " 为关键字。(具体可见《Vue.js---指令》)。

    自定义指令的传参方式也是如此。自定义指令简写时的function可以传两个参数,第一个是 el,表示的是当前指指令所绑定元素的 DOM 对象;第二个是 args,args的具体内容可以根据下述代码打印出来研究一下。

js段代码部分:

new Vue({
    el:"#app",
    data:{
        msg:"消息",
        nums:[1,2,3,4]
    },    // 自定义局部指令
    directives:{        // 第一个自定义指令
        vueOne:function(el,args){            // el 所指的是 当前指指令 所绑定元素的 DOM 对象
            // 感兴趣的可以打印出el看看
            // console.log(el);
            // args 是参数结合
            // console.log(args);
            // el.innerHTML = "测试消息";
            el.innerHTML = args.value;                
            // Vue 帮开发者 省略对于DOM的操作
            el.style.color = "red";
        },        // 第二个自定义指令
        math:function(el,args){            // 打印args在控制台看看结果
            // console.log(args);
            let temp;            //传的参数是 sum 时做加法操作
            if(args.arg=="sum"){
              temp = 0;              for (let i = 0; i < args.value.length; i++) {
                temp = temp+(args.value[i]);
              }
            }            // 传递的参数是 mul 时做乘法操作
            if(args.arg=="mul"){
              temp = 1;              for (let i = 0; i < args.value.length; i++) {
                temp = temp*(args.value[i]);
              }
            }
            el.innerHTML = temp;
        },
        aaa:function(el,args){          // 当指令 v-aaa每携带一个修饰符,args中的modifiers(对象)会多个以key为该修饰符 值为true的元素
          console.log(args);          console.log(args.modifiers.f1);//携带修饰符f1时,打印true,否则打印false
          console.log(args.modifiers.f3);//携带修饰符f2时,打印true,否则打印false
        }
    }
});

html代码部分:

<body>
    <div id="app">
        <!-- <div v-world></div> -->
        <div v-vue-one="msg"></div>
        <input type="text" v-model="msg">
        <!-- v-math 指令传参 sum/mul -->
        <div v-math:sum="nums"></div>
        <div v-math:mul="nums"></div>
        <!-- 自定义指令v-aaa携带两个修饰符 -->
        <div v-aaa.f1.f2></div>
    </div></body>

    之前看到过使用自定义指令携带修饰的方式做表单校验。感兴趣的可以找找看。

链接:https://my.oschina.net/u/3563169/blog/1577061

好货推荐


敦陆秋冬长袖男装针织衫加绒加厚毛衣男士
【券后价】59元
【推荐理由】加绒加厚,优选舒适柔软面料,亲肤保暖,高密度保暖密热绒,精致做工,经典版型,简约时尚,舒适百搭,多码多款。【赠运费险】
或复制这条信息¥5LBb0RObYoI¥,打开☞手机淘宝☜即可查看并下单!

以上是关于03Vue.js---自定义指令的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Vue.js 2 的自定义指令中进行双向绑定?

Vue.js 自定义指令

Vue.js学习 Item13 – 指令系统与自定义指令

vue.js自定义指令入门

什么是vue.js中的自定义指令?

vue.js实现内部自定义指令和全局自定义指令------directive