Vue.js 模板语法教程：Mustache、v-html、指令与动态参数详解

Vue.js 模板语法概述

Vue.js 模板语法

Vue.js 采用基于 HTML 的模板语法，使开发者能够以声明式方式将 DOM 绑定到底层 Vue 实例的数据。

Vue.js 的核心机制是一个系统，它允许使用简洁的模板语法，将数据声明式地渲染到 DOM 中。

结合响应式系统，当应用状态发生变化时，Vue 能够智能计算重新渲染组件所需的最小代价，并高效地应用到 DOM 操作上。

文本插值与 HTML 渲染

使用“Mustache”语法（即双大括号包裹）进行文本插值：

<span>Message: {{ msg }}</span>

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

若使用 v-once 指令，可执行一次性插值。此时当数据改变时，插值处的内容不会更新，但需注意这会影响该节点上的其他数据绑定。

HTML

直接使用双大括号包裹仅显示普通文本。若需实现 HTML 代码效果，需使用 v-html 指令。

html部分：


<div id="app">
	<p>Using mustaches: {{ rawHtml }}</p>
	<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>

js部分：


var vm = new Vue({
	el:'#app',
	data:{
	 rawHtml:'<span style="color:red">this is red</span>'
	}
});

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

属性绑定与布尔属性处理

attribute（属性）

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

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

html部分：


<div v-bind:color="textcolor">123</div>

js部分：


data:{
 textcolor:"red"
}

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

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


<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false ，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

JavaScript 表达式在模板中的应用

JS表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。


{{ data变量 + 1 }}    //
{{ data变量/表达式 ? 'true代码' : 'false代码' }}   //三元运算
{{ data变量.split('').reverse().join('') }}   //可以进行函数调用

<div v-bind:id="'list-' + id"></div>

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

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


<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令、参数与动态参数

指令

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


<p v-if="seen">现在你看到我了</p>

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

参数

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


<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a>

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

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


<a v-on:click="doSomething">...</a>

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

动态参数

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


<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

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

例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 "href"，那么这个绑定将等价于 <a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a> 。

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


<a v-on:[eventName]="doSomething"> ... </a>

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

修饰符与指令缩写

修饰符

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

简写 v-bind 缩写


<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写


<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

总结

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

Vue.js 模板语法详解：从插值到指令的高级用法