微客导航 » 文章资讯 » Vue.js的模板语法详解

Vue.js的模板语法详解

2023-08-01 12:15:03 174

Vue.js模板语法

Vue.js使用了基于HTML的模版语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。

Vue.js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

结合响应系统，在应用状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

使用“Mustache”语法(即用双大括号包裹)的文本插值：

Message:{{msg}}

Mustache标签将会被替代为对应数据对象上“msg”属性的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

如果使用v-once指令，你也能执行一次性插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定。

HTML

直接用双大括号包裹只是普通文本，如果想实现HTML代码效果，需要加入v-html指令

html部分：


	Usingmustaches:{{rawHtml}}
	Usingv-htmldirective:

js部分：

varvm=newVue({
	el:'#app',
	data:{
	rawHtml:'thisisred'
	}
});

v-html使用时在span标签的前标签内写入“v-html="xxx”，相当于将data中的值以HTML形式放入span标签内。

attribute（属性）

Mustache语法不能作用在HTMLattribute上，遇到这种情况应该使用v-bind指令：

格式：v-bind:属性="变量名"

html部分：

js部分：

data:{
textcolor:"red"
}

将变量textcolor的值“red"绑定在盒子的"color"属性上

对于布尔属性，v-bind使用为：

Button

如果isButtonDisabled的值是null、undefined或false，则disabledattribute甚至不会被包含在渲染出来的

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。

限制是：每个绑定都只能包含单个表达式，所以下面的例子都不会生效。


{{vara=1}}


{{if(ok){returnmessage}}}

指令

指令(Directives)是带有v-前缀的特殊attribute。指令attribute的值预期是单个JavaScript表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。回顾我们在介绍中看到的例子：

现在你看到我了

这里，v-if指令将根据表达式seen的值的真假来插入/移除

元素。

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind指令可以用于响应式地更新HTML属性值：

...

在这里href是参数，告知v-bind指令将该元素的hrefattribute与表达式url的值绑定。

另一个例子是v-on指令，它用于监听DOM事件：

...

在这里参数是监听的事件名。

动态参数

可以动态的绑定不同的属性，可以用方括号括起来的JavaScript表达式作为一个指令的参数：

...

这里的attributeName(命名中不能有逗号或冒号等符号)会被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用。

例如，如果你的Vue实例有一个data属性attributeName，其值为"href"，那么这个绑定将等价于...。

同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

...

在这个示例中，当eventName的值为"focus"时，v-on:[eventName]将等价于v-on:focus。

修饰符

修饰符(modifier)是以半角句号"."指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

简写v-bind缩写


...


...

v-on缩写


...


...

总结

以上所述是小编给大家介绍的Vue.js的模板语法详解，希望对大家有所帮助！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

Vue.js的模板语法详解

热门推荐

随机推荐