什么是自定义指令,有哪些钩子函数及自定义指令的使用场景?
有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
这里简单写一个选项卡的demo来说一下
我们实现一个点击切换并添加背景颜色的一个功能
代码1:
<template>
<div class="home">
<div class="nav-box">
<div class="nav" v-for="(item,index) in info" :key="index">{{item}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
},
data() {
return {
info: ['选项1', '选项2', '选项3']
}
}
}
</script>
<style lang="scss">
.nav-box {
width: 500px;
height: 50px;
border: 1px solid #000;
margin: 100px auto;
}
.nav-box .nav {
width: 33.33%;
height: 100%;
line-height: 50px;
float: left;
}
.nav-active {
background: #000;
color: #fff;
}
</style>
这样一个简单的demo就出来了,现在我们默认给第一个添加上背景颜色
<div class="nav-box">
<div :class="['nav',{'nav-active': status === index}]" v-for="(item,index) in info" :key="index">{{item}}</div>
</div>
data() {
return {
info: ['选项1', '选项2', '选项3'],
status: 0
}
}
这里我们就用到了bind绑定,自定义绑定一个类名nav-active(上面代码css里有定义到),因为我们是多个类名,可以写成数组的形式,如果,{‘nav-active’: false}直接冒号false,就是不添加这个类名,为true,就有这个类名。相同的写法我们可以写一个判断,我们在data里面去一定一个status,让他默认为0,这些讲上面的代码应该就可以好懂一些了
代码2:
<div class="nav-box">
<div :class="['nav',{'nav-active': status === index}]" v-for="(item,index) in info" :key="index" @click="onClick(index)">{{item}}</div>
</div>
export default {
name: 'Home',
components: {
},
data() {
return {
info: ['选项1', '选项2', '选项3'],
status: 0
}
},
methods: {
onClick(index) {
this.status = index;
}
},
}
我们去加一个点击事件,因为key值我们能取到,所以点击改变status,这样一个简单vue项目的选项卡就ok了
完整代码:
<template>
<div class="home">
<div class="nav-box">
<div :class="['nav',{'nav-active': status === index}]" v-for="(item,index) in info" :key="index" @click="onClick(index)">{{item}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'Home',
components: {
},
data() {
return {
info: ['选项1', '选项2', '选项3'],
status: 0
}
},
methods: {
onClick(index) {
this.status = index;
}
},
}
</script>
<style lang="scss">
.nav-box {
width: 500px;
height: 50px;
border: 1px solid #000;
margin: 100px auto;
}
.nav-box .nav {
width: 33.33%;
height: 100%;
line-height: 50px;
float: left;
}
.nav-active {
background: #000;
color: #fff;
}
</style>
其他更详细的自定义指令配置可以观看视频去学习一下,我这里的视频也是从腾讯课堂上的一个老师那得来的,提供大家一起学习下 链接
end~~~
如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!