模板语法

这一课你将能做到

1. 使用插值、v-bind、v-if / v-show、v-for、v-on 写出可运行界面
2. 解释 :attr 与 @event 缩写，并正确写 v-for 的 key
3. 对照 JSX：条件与列表在 Vue 里更常写在模板指令中

为什么要学

模板是 Vue 的「界面说明书」。指令（v-）把常见 DOM 操作收成声明：要不要显示、怎么循环、绑定哪个属性。
与 React 的 {cond && <X/>} / map 同目的，不同语法。

先建立图像

{{ msg }}          文本插值
:title="x"         绑定属性（v-bind）
@click="fn"        绑定事件（v-on）
v-if / v-for       条件与列表

指令	人话	注意
v-if	条件为假时可不渲染	切换成本高时考虑 v-show
v-show	用 CSS 显隐	仍在 DOM
v-for	列表渲染	必配 key
v-bind	动态属性	缩写 :
v-on	事件	缩写 @

跟着做

步骤 1：插值与绑定

<script setup>
import { ref } from "vue";
const msg = ref("入门精讲");
const imageAlt = ref("示意图");
</script>

<template>
  <h1>{{ msg }}</h1>
  <img :alt="imageAlt" src="/favicon.ico" width="32" height="32" />
</template>

改 msg.value（可再加按钮）应看到标题变。alt 必须用绑定才能吃变量。

步骤 2：条件

<script setup>
import { ref } from "vue";
const published = ref(true);
</script>

<template>
  <p v-if="published">已发布</p>
  <p v-else>草稿</p>
  <button type="button" @click="published = !published">切换</button>
</template>

模板里对 ref 赋值会自动处理；观察 DOM：v-if 切换时节点出现/消失。

步骤 3：列表

<script setup>
import { ref } from "vue";
const lessons = ref([
  { id: 1, title: "模板语法" },
  { id: 2, title: "响应式基础" },
]);
</script>

<template>
  <ul>
    <li v-for="item in lessons" :key="item.id">{{ item.title }}</li>
  </ul>
</template>

:key 用稳定 id，不要用 index（列表会重排/插入时易出诡异复用）。

步骤 4：事件与参数

<script setup>
import { ref } from "vue";
const count = ref(0);
function add(n) {
  count.value += n;
}
</script>

<template>
  <p>{{ count }}</p>
  <button type="button" @click="add(1)">+1</button>
  <button type="button" @click="add(5)">+5</button>
</template>

步骤 5：v-show 对照

给某段加 v-show="published"，用开发者工具看：假值时元素还在，多半 display:none。
记：频繁切换显隐偏 v-show；权限上「不能存在于 DOM」偏 v-if。

步骤 6：对照 React 条件列表

在笔记写：React list.map ↔ v-for；condition ? a : b ↔ v-if/v-else。
同一产品逻辑，两套语法都能表达。

讲清楚要点

1. 模板表达式是受限 JS：可调用方法、三元，但别写复杂逻辑——放 script。
2. v-for 与 v-if 同节点： Vue 3 中 v-if 优先级更高，易踩坑；分开节点更清晰。
3. key 帮助复用与状态保持：错 key 会导致输入框「串行」。
4. 缩写要能还原：看到 :class 知道是 v-bind:class。
5. 事件修饰符（.prevent 等）后面表单课会用到，先会 @click。
6. 可访问性：按钮用 <button type="button">，别只用可点的 <div>。

你可能会懵的地方

• {{ }} 里能写 if 语句吗？
  不能写语句；写表达式。分支用 v-if 或三元。

• 为什么列表闪烁/错位？
  先查 key；再查是否直接改了数组却用了错误方法（下一课响应式）。

• v-html？
  可插 HTML，有 XSS 风险；用户内容默认别用。

• 动态组件 is？
  进阶；本课先打满常用指令。

• 和 JSX 插件？
  Vue 也支持 JSX，但主路径仍是模板。

错法对照

错法	问题	正解
v-for 无 key	难追踪、状态错乱	:key 稳定 id
用 index 当 key 且列表重排	输入串行	业务 id
在模板写超长逻辑	难测难读	挪到函数/computed
把 v-if 当权限唯一手段	仍可能泄露	配合路由/后端鉴权
@click="add" 与 add() 混淆	立即执行或丢事件	按是否要参数选择
静态 alt 写成 alt="imageAlt"	显示字面量	:alt="imageAlt"

自测三问

1. v-if 与 v-show 如何选？
2. 为什么列表 key 不该随便用随机数？
3. :title 和 title 在模板里差在哪？

小结一句话

模板指令把条件、列表、绑定、事件写成声明；先掌握插值与 v-if/v-for/v-bind/v-on。

动手加深

把本课「跟着做」再跑一遍，但这次故意先写出错法表里的一种写法，观察报错或错误现象 30 秒，再改回正解。
用自己的话补三条笔记：① 我最容易踩的坑；② 成功时屏幕/结果长什么样；③ 本课与上一课的衔接点。写不出来就重做步骤，不要只标完成。

官方延伸

• 模板语法
• 列表渲染
• 下一课：响应式基础