[toc]

Lecture03-模板语法

1、本节讲什么

学会在模板里渲染数据、绑定属性、条件显示、遍历列表、绑定事件——这些是"在页面结构里写逻辑"的基本写法。参考完整演示：module01-Vue-Sample/src/App.vue（本课配套工程）。

2、概念速览

什么是模板：.vue 文件里 <template> 那一块，声明"页面长什么样"。它是第 10 节"渲染"里那个被填数据的"结构"，数据在运行时被填进去。

常用的几种写法（几乎都有"完整 / 简写"两种，简写更常用）：

正确 vs 误区：模板里只放简单表达式（如 age * 100 > 5000）；复杂逻辑放进函数或 computed（第 14 节），别在模板里堆一大段代码。

3、先看效果

一份"水果数据"被渲染成表格、按年龄条件显示文字、点按钮弹提示——这是 Vue 页面最常见的样子：

<script setup lang="ts">
interface Fruit { fruitId: number; fruitName: string; fruitPrice: number }
const age = 125
const fruitArr: Fruit[] = [
  { fruitId: 5, fruitName: '苹果', fruitPrice: 555.55 },
  { fruitId: 6, fruitName: '香蕉', fruitPrice: 666.66 },
  { fruitId: 7, fruitName: '橘子', fruitPrice: 777.77 },
]
function doClick() { alert('Hello Vue!!!') }
</script>

<template>
  <p>年龄值是：{{ age * 100 > 5000 }}</p>   <!-- {{ }}：渲染表达式结果 -->

  <!-- 条件显示：v-if / v-else-if / v-else，满足哪个显示哪个 -->
  <p v-if="age < 18">太小，不能上班</p>
  <p v-else-if="age < 65">可以上班，还不能退休</p>
  <p v-else>符合要求，可以退休</p>

  <!-- v-for：遍历数组生成表格行。:key 给每行唯一 id -->
  <table>
    <tr><th>id</th><th>名称</th><th>价格</th></tr>
    <tr v-if="!fruitArr?.length"><td colspan="3">没有数据可显示</td></tr>
    <tr v-else v-for="fruit in fruitArr" :key="fruit.fruitId">
      <td>{{ fruit.fruitId }}</td>
      <td>{{ fruit.fruitName }}</td>
      <td>{{ fruit.fruitPrice }}</td>
    </tr>
  </table>

  <!-- 事件绑定：简写 @click -->
  <button @click="doClick">点我会开心</button>
</template>

4、照着做

① 渲染数据：{{ }} / v-text / v-html 的区别

<p>{{ age }}</p>                <!-- 插值：把 age 当文本显示 -->
<p v-text="age"></p>            <!-- 等价于 {{ }}，直接当文本 -->
<p v-html="info"></p>           <!-- 把 info 当成 HTML 渲染（能显示标签样式） -->

注意：用了 v-text / v-html 后，标签之间不能再写别的内容（会覆盖）。v-html 能渲染 HTML，但有安全风险（别让它渲染不可信内容）。

② 绑定属性：完整 v-bind: vs 简写 :

<input type="text" v-bind:value="info" />   <!-- 完整写法 -->
<input type="text" :value="info" />         <!-- 简写，等价 -->

属性要动态变化时用 :，比如给元素动态绑 :class、:disabled。

③ 条件显示：v-if / v-else-if / v-else

<p v-if="age < 18">太小</p>
<p v-else-if="age < 65">能上班</p>
<p v-else>能退休</p>

注意：v-if 和 v-else 之间不能写其它内容（注释除外），否则 Vue 分不清属于哪个分支。

④ 遍历列表：v-for + 空数据判断

<tr v-if="!fruitArr?.length">没有数据</tr>   <!-- 空列表显示占位 -->
<tr v-else v-for="fruit in fruitArr" :key="fruit.fruitId">...</tr>

⑤ 绑定事件：@click + 事件对象

<button @click="doClick">点我</button>           <!-- 绑事件 -->
<div @mousemove="doMouseMove($event)">...</div>  <!-- 拿事件对象 -->

@click.once：事件只生效一次（典型场景：提交订单按钮，防重复提交）。

5、常见疑问

• Q：@click 和 v-on:click、:value 和 v-bind:value 是什么关系？ A：完全等价，@ 是 v-on: 的简写，: 是 v-bind: 的简写。教程和实际代码基本都用简写。
• Q：{{ }}、v-text、v-html 选哪个？ A：显示纯文本用 {{ }}；要渲染带样式的 HTML 才用 v-html（小心安全）；v-text 少用。记住"默认把数据当文本"就对了。
• Q：为什么 v-for 要写 :key？ A：:key 给每个列表项唯一标识，Vue 才知道"哪项变了、更新谁"。演示里不写能跑，但规范必须补，用唯一 id（如 fruit.fruitId），别用下标。
• Q：事件函数怎么拿鼠标坐标 / 阻止默认行为？ A：事件对象会作为参数传进来，@mousemove="doMouseMove($event)" 里 $event 就是事件对象，函数里 event.clientX / clientY 拿坐标、event.preventDefault() 阻止默认行为（如超链接跳转）。
• Q：模板里能写复杂逻辑吗？ A：只写简单表达式。复杂计算放函数或 computed（第 14 节），别堆在模板里。

6、规范要点

• v-for 必须写 :key（用唯一 id），这是最容易漏、也最容易出 Bug 的一条。
• v-html 慎用：只渲染可信内容，别把后端 / 用户输入直接 v-html（防 XSS）。
• 模板里只放简单表达式，复杂逻辑交给函数 / computed。
• 事件尽量抽成有名字的函数（@click="doClick"），别写一长串内联逻辑。

7、本节验证

• 会用 {{ }} 渲染数据，知道它默认把数据当文本 ✅
• 分得清 v-bind: 与 :、v-on: 与 @ 的完整写法与简写 ✅
• 会用 v-if / v-else-if / v-else 做条件显示 ✅
• 会用 v-for 遍历列表，并给每项加唯一 :key ✅
• 会用 @click 绑事件，用 $event 拿事件对象 ✅