3. 模板语法

这是什么：模板语法 = HTML 加上几个 v- 开头的指令，让你在标签里插值、绑属性、绑事件、渲染列表。

为什么用：上一章的 {{ count }} 只是最基础的插值，光靠它写不出表单和列表。有了这些指令，数据和页面才算真正连起来。

如何用：本章把 {{ }}、v-model、v-if、v-for、v-bind 五件套讲齐，示例都在 2.2 那套「引入 → 数据 → 挂载」骨架上加东西。

3.1 插值：{{ }}

<p>名字：{{ name }}</p>
<p>{{ name.length }} 个字</p>       <!-- 可直接跑表达式 -->

双花括号会自动转义，不怕 XSS——它显示文本，不渲染 HTML。

3.2 双向绑定：v-model

表单输入和数据的黄金搭档，完整页面如下（可直接贴进运行场）：

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='utf-8'>
  <title>v-model 双向绑定</title>
  <script src='https://registry.npmmirror.com/vue/3.5.44/files/dist/vue.global.prod.js'></script>
</head>
<body>
  <div id='app'>
    <input v-model='msg' placeholder='输入点什么' />
    <p>你输入的是：{{ msg }}</p>
  </div>

  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const msg = ref('')
        return { msg }
      }
    }).mount('#app')
  </script>
</body>
</html>

你会看到：输入框每敲一个字，下面的段落同步变化。v-model = 值绑定 + 监听输入，一个指令顶 jQuery 十行。

不同控件用法与原生 value 一致：textarea、select、checkbox（boolean）、radio（值匹配）。

3.3 条件渲染：v-if / v-show

放进 2.2 骨架的模板里（假设数据里有 score）：

<p v-if='score >= 60'>及格</p>
<p v-else-if='score >= 0'>不及格</p>

v-if：不成立就不渲染（真删 DOM）
v-show：总在 DOM 里，只是切换 display: none（适合频繁切换）

3.4 列表渲染：v-for

完整页面（改数据、列表自动增长）：

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='utf-8'>
  <title>v-for 列表</title>
  <script src='https://registry.npmmirror.com/vue/3.5.44/files/dist/vue.global.prod.js'></script>
</head>
<body>
  <div id='app'>
    <ul>
      <li v-for='(task, index) in tasks' :key='index'>
        {{ index + 1 }}. {{ task }}
      </li>
    </ul>
    <button @click="tasks.push('新任务')">加一项</button>
  </div>

  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const tasks = ref(['学前端', '写教程'])
        return { tasks }
      }
    }).mount('#app')
  </script>
</body>
</html>

:key 给每行唯一标识（后续章节补充用 id 更佳），帮助 Vue 高效比对。

3.5 属性绑定：v-bind（缩写 :）

给 HTML 属性插变量，用 : 缩写：

<img :src='imgUrl' :alt='imgAlt' />
<a :href='site'>去逛逛</a>

记忆口诀：内容用 {{ }}，属性绑 :，表单 v-model，条件 v-if，列表 v-for——这五件套覆盖 90% 模板。

3.6 动手改

写输入框 + v-model，实时统计字数：{{ msg.length }}
用 v-if 实现字数为 0 时显示提示「还没输入」
3.4 的 tasks 换成你自己的三件事，观察列表自动渲染

3.7 小结

{{ }} 插值、: 绑属性、v-model 双向
条件 v-if（整删整建）/ v-show（display）
v-for 必配 key；列表数据变了视图自动变

下一章：响应式数据 🐸