vue指令是什么及有什么作用-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

vue指令是什么及有什么作用

这篇文章主要介绍了vue指令是什么及有什么作用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue指令是什么及有什么作用文章都会有所收获,下面我们一起来看看吧。

我们提供的服务有:成都网站设计、成都网站建设、微信公众号开发、网站优化、网站认证、庄河ssl等。为上千多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的庄河网站制作公司

在vue中,指令是带有“v-”前缀的特殊特性(属性),指令特性的值预期是单个JavaScript表达式,语法为“v-指令:参数="表达式"”。Vue作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为;因此可以将指令看作特殊的HTML特性。

vue指令是什么及有什么作用

如何快速入门VUE3.0:进入学习

本教程操作环境:windows7系统、vue3版,DELL G3电脑。

1、vue.js指令是什么?作用是什么?

Vue.js指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。

Vue.js作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。

指令的作用是:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。

每个指令都有自己的用途,当其绑定的表达式发生改变的时候,会响应式的影响dom的变化。而变化的具体则是看每个指令其本身的用途。比如v-bind指令是绑定属性值,当绑定的表达式发生改变,dom上属性的值也会发生对应的改变。

指令的语法是v-指令:参数="表达式"(参数并不是绝对需要的)

参数

:后面跟着的就是参数,但并不一定所有的指令都会有参数,只有特定的指令会需要参数,这是由于指令的性质决定的。这里的参数和函数的参数是类似的,就好比我这个指令需要对应的参数才能使功能生效。

v-bind:type="type"来说,v-bind指令用于绑定属性值,那么需要绑定什么属性呢,光靠这个指令无法确定,所以需要参数来进一步确定。也就是v-bind:type,冒号后面跟着的type就是传入指令中的参数。告诉指令,我要绑定属性type和表达式的关联。

上面我们也说了,并不是所有的指令都需要参数。比如v-html指令,这个指令是绑定元素内部的html,功能点已经非常明确,不需要额外的参数去确定,只需要指令和表达式即可完成指令的功能。

表达式

""引号内的值就是表达式,表达式一般可以是一个可执行的js表达式。它与指令本身是有绑定关联的,类似传入指令的值。并且当表达式内的响应式数据发生变化,也会引发dom的变化。

2、内置指令

2.1 Vue有哪些内置指令呢

内置指令指的就是Vue自带指令,开箱即用

Vue一共有16个自带指令,包括了:

v-textv-htmlv-showv-ifv-elsev-else-ifv-forv-onv-bindv-modelv-slotv-prev-cloakv-oncev-memov-is,其中v-memo3.2新增的,v-is3.1.0中废弃

下面我们来了解一下这些内置指令的基本使用

2.2 了解16个内置指令的基本使用

2.2.1 v-text

v-text的作用是,用于更新元素的 textContent,例如:

h2元素的内容最终取决于msg的值

vue指令是什么及有什么作用

2.2.2 v-html

v-text很像,只是v-html用于更新元素的 innerHTML,例如

Hello LBJ'">

vue指令是什么及有什么作用

需要注意的是,里头内容必须是按普通 HTML 插入

2.2.3 v-show

v-show可以根据表达式的真假值,切换元素的display值,用于控制元素的展示和隐藏,例如:

vue指令是什么及有什么作用

可以看到,当条件变化时该指令触发显示或隐藏的过渡效果

需要注意:v-show 不支持