关于Vue中常用指令总结

前言

关于我们在使用vue相关的技术开发时，经常需要使用到的一些指令和函数，可能由于长时间而被遗忘，对此做一个总结，避免每次都需要利用搜索引擎，既耗时还得确认准确性。

指令

①v-if，v-else

根据v-if的值去控制元素的显隐，有刷新组件的作用。另外，通常v-if和v-else通常搭配使用，控制两个元素显隐关系，此两个元素必须是处于同一块代码区域中的上下部分。

<div v-if="isShow"></div>
<div v-else></div>

一般情况下我们可以通过设置一个变量去控制我们的标签显隐，更进一步的用法还可以使用该标签去刷新我们的元素或者组件。比如我们加入以下一段代码，便可以做到刷新的功能。

this.isShow = false
this.$nextTick(()=>{
this.isShow = true
})

通过借助$nextTick和v-if去切换元素的显隐，从而达到我们刷新组件的目的。

②v-show

v-show其实就是控制元素的display值，当v-show的值为true时，display = block ， 反之则为 none。具体使用方法和v-if 基本一样，只是含义和程序所做的底层操作有所不同。

<div v-show="isShow"></div>

③v-for

跟v-if一样，作为一般项目中出场率最高的选手之一，通常用此指令遍历我们的数组数据，对象也是可以通过该指令遍历对象中的属性。

<div v-for="(item, index) in items" :key="index"></div>

v-for指令必须添加一个:key的值，在该v-for下的所有元素中必须唯一，否则会报错，不利于虚拟dom的列表操作。

除了一般的遍历显示数据，通常如果我们需要显示重复出现的一个元素，并且这个元素还会根据不同的属性值有不同的表现形式，那么我们就必须使用v-for指令。例如我们在制作一个tab组件的时候：

<div v-for="(item, index) in items" :key="index" :class=" index== activeIndex ? 'active' : '' "></div>

我们需要借用到数组的index与我们的变量去判断，从而动态地显示被选中元素的一个不同的样式。

④v-model

双向绑定的语法糖指令，实际上是@input和emit的一个语法糖。通常绑定在我们的input或者其他可输入元素上，当我们绑定在v-model上的变量或者输入框中的数据发生变化时，他们二者是同步变化的。

<input v-model="inputValue" />

通常我们封装一个具有双向绑定功能的input组件时，可以使用到该指令。但是需要注意的是，我们声明的变量值必须是value，不然双向绑定无效。

⑤v-html

渲染富文本数据，很简单而且实用的一个指令。

<div v-html="richData"></div>

⑥v-bind

给元素绑定变量，可以简写为 “ ：”，比如给input绑定一个value值，每当value值发生变化，input框内的值也会发生变化，但是input框的值发生变化影响不了value值的变化。通常动态class我们都会使用到此指令，还有v-for的key值也需要用到。

<div :class="richData"></div>

⑦v-on

为元素绑定页面原生事件，通常简写为“ @ ”

<div @click="clickEvent"></div>

自定义指令

全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

局部注册

directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}

自定义指令的钩子函数

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind：只调用一次，指令与元素解绑时调用。

结语

指令作为vue项目中的一个重要组成部分，几乎是一个vue项目必备的功能，熟练地掌握其使用原理和一些常用的组合，对于开发效率，开发成本都是一个很好的优化操作。

最后

以上就是典雅夕阳为你收集整理的关于Vue中常用指令总结的全部内容，希望文章能够帮你解决关于Vue中常用指令总结所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。