Vue.js---自定义指令
Posted web前端开发
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.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>之前看到过使用自定义指令携带修饰的方式做表单校验。感兴趣的可以找找看。
本内容完 ~！
推荐阅读
推荐图书
