2.3 模板语法核心规则

Vue 的模板语法是将数据渲染到页面上的“翻译器”。你只需要在 HTML 中声明数据应该放在哪里、页面结构如何随数据变化，剩下的事情由 Vue 处理。掌握以下三个核心规则，就能开始构建动态页面。

插值表达式 `{{ }}`

插值表达式用于将 JavaScript 表达式的值输出到页面文本位置。语法为双大括号 {{ }}，内部可以写变量名、简单运算、三元表达式等，但不能写语句（如 if、for）。

<template>
  <div>
    <!-- 直接输出数据 -->
    <p>{{ message }}</p>
    
    <!-- 简单运算与表达式 -->
    <p>商品总价：{{ price * quantity }}</p>
    <p>{{ isLogin ? '欢迎回来' : '请先登录' }}</p>
    
    <!-- 调用方法并显示返回值 -->
    <p>{{ formatDate(now) }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello Vue!')
const price = ref(99)
const quantity = ref(3)
const isLogin = ref(true)
const now = ref(new Date())

function formatDate(date) {
  return date.toLocaleDateString()
}
</script>

注意：插值表达式只能用于元素内的文本内容，不能用于 HTML 属性。要想动态绑定属性值，需要使用下一节的指令。

指令体系

指令是 Vue 最强大也最常用的模板功能。指令是带有 v- 前缀的特殊属性，它的值是一个 JavaScript 表达式，当表达式的值变化时，指令会对所绑定的 DOM 元素产生“反应式”的影响。

最常用的几个指令：

v-bind（简写 :）：动态绑定属性。稍后会重点展开。
v-on（简写 @）：绑定事件监听。将在事件绑定章节详述。
v-if / v-else-if / v-else：条件渲染。根据表达式的真假，决定元素是否渲染（DOM 会被真正移除或插入）。

<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>

v-show：根据条件切换元素的 display CSS 属性。元素始终存在于 DOM 中，只是通过样式切换可见性。

<p v-show="isVisible">这个元素可能被隐藏，但 DOM 结构一直在。</p>

v-for：基于数组或对象渲染一个列表。必须为每个列表项提供一个唯一的 key 属性，帮助 Vue 跟踪节点身份。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

v-model：在表单元素上实现双向数据绑定，本质是 v-bind 和 v-on 的语法糖。

<input v-model="username" placeholder="请输入用户名" />
<!-- 等同于 -->
<input :value="username" @input="username = $event.target.value" />

v-once：让元素及其子元素只渲染一次，之后不再响应数据变化。适用于展示静态内容或性能优化场景。

<p v-once>这个内容只会渲染一次：{{ staticData }}</p>

v-html：将数据作为原始 HTML 插入元素内部。谨慎使用，防止 XSS 攻击。

<div v-html="rawHtmlContent"></div>

v-text：等价于 {{ }} 的另一种写法，将数据作为纯文本插入。

<span v-text="message"></span>

指令的强大之处在于，所有的值都是响应式的。当指令的表达式依赖的响应式数据发生变化时，指令对应的 DOM 行为也会自动更新。

属性绑定（`v-bind`，简写 `:`）

在 HTML 中，很多属性（如 href、src、class、disabled）需要设置为动态值。插值表达式不能用在属性上，所以必须使用 v-bind。

基础用法：

<!-- 完整写法 -->
<a v-bind:href="url">链接</a>
<img v-bind:src="imagePath" alt="产品图" />

<!-- 简写（推荐） -->
<a :href="url">链接</a>
<img :src="imagePath" alt="产品图" />

绑定布尔属性：当绑定的值为 null、undefined 或 false 时，属性会被移除。为 true 时属性会被添加。

<button :disabled="isSubmitting">提交</button>
<!-- 当 isSubmitting 为 true 时，渲染成 <button disabled> -->
<!-- 当 isSubmitting 为 false 时，disabled 属性被移除 -->

动态绑定多个属性：如果你有一个包含多个属性的对象，可以直接用 v-bind 不加参数进行绑定，此时对象的所有键值对都会作为属性应用到元素上。

<div v-bind="attrs"></div>
<!-- 假设 attrs = { id: 'app', class: 'container', 'data-id': '123' } -->
<!-- 渲染后：<div id="app" class="container" data-id="123"></div> -->

一次性绑定多个属性（不带参数的对象绑定）非常有用，尤其在封装组件透传 $attrs 时。

注意：属性绑定的表达式会在 v-bind 的引号中执行，因此你可以使用任意合法的 JavaScript 表达式，包括方法调用、三元运算等：

<input :placeholder="isSearch ? '搜索商品' : '输入内容'" />

理解插值表达式、指令体系和属性绑定这三块基石后，你已经能够构建出大部分动态 UI 了。后续会进一步展开 class 与 style 的动态绑定、事件绑定、表单双向绑定等，都是在这些核心规则上的组合与应用。

插值表达式 {{ }}

指令体系

属性绑定（v-bind，简写 :）

插值表达式 `{{ }}`

属性绑定（`v-bind`，简写 `:`）