3. 模板语法基础

本节目标：学会 Vue 模板的基本用法——文本插值、属性绑定、表达式和指令。

文本插值

最基本的数据绑定是”双花括号”语法：

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

{{ msg }} 会被替换为组件实例上 msg 属性的值，msg 变了，这里也会跟着变。

双花括号输出的是纯文本，不会解析 HTML。要输出真正的 HTML 用 v-html：

<p>纯文本：{{ rawHtml }}</p>
<p>HTML：<span v-html="rawHtml"></span></p>

const rawHtml = '<span style="color: red">红色文本</span>'

Warning

动态渲染 HTML 有 XSS 风险，只对可信内容使用 v-html，永远不要用在用户输入上。

花括号不能用在 HTML 属性里。要绑定属性用 v-bind：

<div v-bind:id="dynamicId"></div>

因为太常用，有简写语法——冒号：

<div :id="dynamicId"></div>

这两种写法完全等价，后面都用简写。

属性名和变量名一样时，可以进一步省略值：

<!-- 等价于 :id="id" -->
<div :id></div>

布尔属性用 v-bind 有特殊行为：

<button :disabled="isButtonDisabled">按钮</button>

当 isButtonDisabled 为 truthy 时，disabled 属性会被添加；为 falsy 时移除。空字符串也算 truthy（和 <button disabled=""> 一致）。

有一个属性对象，可以一次性绑定：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color: green'
}

<div v-bind="objectOfAttrs"></div>

Vue 模板支持完整的 JavaScript 表达式：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

表达式只能出现在两个位置：文本插值里、指令的属性值里。

每个绑定只能包含一个表达式。表达式是能求值为一个值的东西——简单判断就是能不能放在 return 后面。

下面这些不行：

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

<!-- 流程控制不行，用三元表达式 -->
{{ if (ok) { return message } }}

可以在表达式里调用组件暴露的方法：

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

Tip

模板里的函数每次组件更新都会调用，所以别在里面做有副作用的事——比如改数据、发请求。

模板表达式只能访问白名单里的全局对象，比如 Math、Date。window 上挂的自定义属性访问不到。

指令是带 v- 前缀的特殊属性。Vue 内置了不少指令，v-html 和 v-bind 已经见过了。

指令的值预期是一个 JavaScript 表达式（v-for、v-on、v-slot 除外）。

有些指令可以带参数，用冒号分隔：

<a v-bind:href="url">链接</a>
<a :href="url">链接</a>

<a v-on:click="doSomething">点击</a>
<a @click="doSomething">点击</a>

href 和 click 就是参数，告诉指令绑定哪个属性或监听哪个事件。

指令参数也可以是动态的，用方括号包裹：

<a :[attributeName]="url">链接</a>
<a @[eventName]="doSomething">点击</a>

attributeName 会被求值，结果作为最终参数名。如果 attributeName 的值是 "href"，那就等价于 :href。

Note

动态参数的值预期是字符串，null 表示移除绑定。其他非字符串值会触发警告。

修饰符是点号后缀，表示指令要以特殊方式绑定：

<form @submit.prevent="onSubmit">提交</form>

.prevent 修饰符告诉 Vue 在事件触发时调用 event.preventDefault()。