自定义指令:自定义一些指令对普通 DOM 元素进行底层操作(可注册全局指令、局部指令)。
使用:如果想注册局部指令,组件中也接受一个 directives
的选项
案例一:设置dom字体颜色
一、简单入门:
局部注册:
<template>
<div>
<div class="study-directive" v-color='fontColor'>自定义指令总结:可以是变量
<!-- <div class="study-directive" v-color='"blue"'>自定义指令总结:可以是字符串 -->
<br />
<div v-colors='fontColors'>注册多个自定义指令</div>
<button @click="changeColor">改变颜色</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fontColor: "red",
fontColors: "green"
};
},
// 注册一个局部指令 v-color
directives: {
color: {
//被绑定元素插入父节点时调用(执行一次)
inserted: function(el, bind) {
el.style.color = bind.value;
},
//组件值更新时
update: function(el, bind) {
//当我们触发 changeColor 修改颜色值时,然而视图并没有更新,因为指令也存在生命周期 ,
//所以如果需要视图更新,使用更新阶段
el.style.color = bind.value;
}
},
//存在多个指令时:
colors: {
inserted: function(el, bind) {
el.style.color = bind.value;
},
update: function(el, bind) {
el.style.color = bind.value;
}
}
},
methods: {
changeColor() {
this.fontColor = "green";
}
}
};
</script>
<style scoped>
.study-directive {
margin: 200px 200px 10px;
background: gray;
padding: 40px;
width: 500px;
font-size: 18px;
}
</style>
全局注册:
//mian.js中
Vue.directive('color', {
inserted: function (el, bind) {
el.style.color = bind.value
}
})
全局注册多个自定义指令:
①:创建directive.js文件,然后编写全局的自定义组件;
export default (Vue) => {
Vue.directive('color', {
inserted: function (el, bind) {
el.style.color = bind.value
},
update: function (el, bind) {
el.style.color = bind.value;
}
})
Vue.directive('colors', {
inserted: function (el, bind) {
el.style.color = bind.value
}
})
}
②:在main.js文件中引入directive.js文件,然后使用Vue.use(directive)调用;
import directive from "@/utils/directives.js";
Vue.use(directive)
③:在需要使用的地方直接使用
<div v-color='"red"'> 哈哈哈哈哈哈哈哈哈</div>
1)、钩子函数:
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
-
bind
:只调用一次,指令第一次绑定到元素时调用。在这里可以进行默认值设置。 -
inserted
:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 -
update
:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 -
componentUpdated
:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind
:只调用一次,指令与元素解绑时调用。
2)、钩子函数参数:
el
:指令所绑定的元素,可以用来直接操作 DOM。binding
:一个对象,包含以下 property:name
:指令名,不包括v-
前缀。value
:指令的绑定值。oldValue
:指令绑定的前一个值,仅在update
和componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如v-my-directive="1 + 1"
中,表达式为"1 + 1"
。arg
:传给指令的参数,可选。例如v-my-directive:foo
中,参数为"foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为{ foo: true, bar: true }
。
vnode
:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode
:上一个虚拟节点,仅在update
和componentUpdated
钩子中可用。
二、划水了:
1)、动态指令参数:指令的参数可以是动态的。
假如我们需要动态设置元素定位的位置:
<p v-color:[direction]="200">content</p>
data() {
return {
direction: "left",
fontColor: "red"
};
},
directives: {
color: {
//被绑定元素插入父节点时调用(执行一次)
inserted: function(el, bind) {
console.log(bind);
el.style.color = bind.value;
el.style.position = "abosult";
var s = bind.arg == "left" ? "left" : "top";
el.style[s] = bind.value + "px";
}
}
},
2)、对象字面量 :
如果指令需要多个值,可以传入一个 JavaScript 对象字面量。记住,指令函数能够接受所有合法的 JavaScript 表达式。
<div v-color="{ color: 'white', text: 'hello!' }"></div>
directives: {
color: {
inserted: function(el, bind) {
console.log(bind)
}
}
},