关于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中常用的8种v指令
Vue中常用的8种v指令根据官网的介绍,指令是带有 v- 前缀的特殊属性.通过指令来操作DOM元素指令功能 v-text="变量/表达式" 文本的设置字符串变量+数字可以 ...
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定) Vue 的介绍 Vue 是一套构建用户界面的渐进式前端框架. 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已 ...
Vue的常用指令有哪些，分别是什么作用？
Vue的常用指令有哪些,分别是什么作用? v-for指令用来遍历数组 v-model指令用来实现表单元素的双向绑定 v-if指令用来进行条件判断,可以根据表达式值的真假来插入或删除元素 v-else指 ...
【1】vue中的指令与插值表达式
为什么要用指令和插值表达式前面我们已经说到过,在Vue中不直接对DOM进行操作,而是通过数据的改变来改变页面的显示状态.但是如果在HTML中直接像这样设置页面内容,那么改变数据时将无法用到Vue提供 ...
mysql中的操作指令,MySQL中常用指令操作的介绍（代码示例）
本篇文章给大家带来的内容是关于MySQL中常用指令操作的介绍(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. l 创建数据库:CREATE DATABASE table_n ...
vue验证整数_前端Vue中常用rules校验规则
前端Vue中常用rules校验规则 1.是否合法IP地址 export function validateIP(rule, value,callback) {if(value==''||value== ...
vue中v-model指令的使用之Vue知识点归纳(九)
本文中描述 vue 中 v-model 指令的基本使用 1 简述 vue 中 v-model 用来获取和设置表单中的值 2 案例 <!DOCTYPE html> <html lan ...
vue中v-bind指令的使用之Vue知识点归纳(七)
本文中描述 vue 中 v-bind 指令的基本使用 1 简述 vue 中 v-bind 用来操作 html 元素标签中的属性 2 案例 <!DOCTYPE html> <html ...
vue中v-if指令的使用之Vue知识点归纳(六)
本文章描述 vue 中 v-if 的基本使用 vue 中 v-show 与 v-if 的区别 1 简述 vue 中 v-if 指令,顾名思义是用来进行条件判断的,直接操作 dom 2 案例 <! ...

关于Vue中常用指令总结

前言

指令

自定义指令

结语

关于Vue中常用指令总结相关推荐

最新文章

热门文章