vue自定义指令的使用

什么是自定义指令，有哪些钩子函数及自定义指令的使用场景？

有的情况下，你仍然需要对普通 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~~~

如有错误或观点不一致的请评论留言共同讨论，本人前端小白一枚，根据自己实际项目遇到的问题进行总结分享，谢谢大家的阅读！