什么是自定义指令
vue官方提供了v-text、v-for、v-model、v-if等常用的指令。除此之外vue还允许开发者自定义指令。
分类
分为 私有自定义指令 和 全局自定义指令。
私有自定义指令
- bind函数
在每个vue组件中，可以在directives节点下声明私有自定义指令。示例代码如下：
| directives: {
red: {
bind(el) {
el.style.color = "red";
}
}
}
|
然后在对应的元素加入v-color属性即可：
如果我们想自己定义颜色，那应该怎么办呢？
这时官方给我们提供了一个binding.value值。
首先定一个color指令，在bind中增加一个binding的形参，而这个binding中的value属性，就存放着传递进来的值
1
2
3
4
5
6
7
8
9
10
11
12
13
| directives: {
color: {
bind(el, binding) {
el.style.color = binding.value;
}
}
}
|
然后在data中定义一个color值
1
2
3
4
5
6
7
8
9
| data() {
return {
color: 'blue';
}
}
|
最后就可以在HTML中传入color值
1
| <div v-color="color">这是头部</div>
|
此时双引号内的color是一个变量，需要在data中定义
而如果想直接给v-color直接传入一个值，那就需要再加一个单引号
1
| <div v-color="'green'">这是头部</div>
|
- update函数
bind函数只有在第一次绑定元素时才会执行，此时如果想通过button改变div的颜色，是不起作用的：
1
| <button @click="color='green'">改变div颜色</button>
|
因此想要通过button改变div的颜色，就需要用到update函数，定义方法跟bind类似
1
2
3
4
5
| update(el, binding) {
el.style.color = binding.value;
}
|
- 函数的简写形式
以上两个函数可以合在一起简写成下面这样子：
1
2
3
4
5
6
7
8
9
| directives: {
color(el, binding) {
el.style.color = binding.value;
}
}
|
全局自定义指令
全局可通过Vue.directive()来声明，完整代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| Vue.directive('color', {
bind(el, binding) {
el.style.color = binding.value;
},
update(el, binding) {
el.style.color = binding.value;
}
});
|
也可以简写成下面这个样子：
1
2
3
4
5
| Vue.directive('color', function(el, binding) {
el.style.color = binding.value;
});
|
参考：
Vue2.0-16.自定义指令 -
私有自定义指令的基础用法
Vue2.0-17.自定义指令 -
使用binding.value获取指令绑定的值
Vue2.0-18.自定义指令 -
update函数
Vue2.0-19.自定义指令 -
函数简写形式
Vue2.0-20.自定义指令 -
全局自定义指令