模板与指令

这一课你将能做到

1. 用 {{ }} 插值把数据渲染到页面
2. 用 v-bind 动态绑定 HTML 属性
3. 用 v-if / v-show 控制元素显隐，并知道何时用哪个
4. 用 v-for 渲染列表，理解 key 的作用
5. 用 v-on 绑定事件，掌握常用事件修饰符

为什么要学

模板是 Vue 的「视图层」。你写的 HTML 不再是死的，而是能根据数据动态变化。指令（directive）就是 Vue 给 HTML 加的「超能力属性」，让标签会思考。

人话：指令就像 HTML 标签的「遥控器」。v-if 是开关，v-for 是复印机，v-bind 是变色龙，v-on 是门铃。

先建立图像

<script setup>
import { ref } from 'vue'
const show = ref(true)
const list = ref(['苹果', '香蕉', '橙子'])
</script>

<template>
  <button @click="show = !show">切换</button>
  <p v-if="show">我出现了</p>
  <ul>
    <li v-for="(item, i) in list" :key="i">{{ i + 1 }}. {{ item }}</li>
  </ul>
</template>

渲染结果：

[切换]
我出现了
1. 苹果
2. 香蕉
3. 橙子

跟着做

步骤 1：插值与表达式

<script setup>
import { ref } from 'vue'
const name = ref('Vue')
const num = ref(10)
</script>

<template>
  <p>{{ name }}</p>
  <p>{{ num * 2 }}</p>
  <p>{{ num > 5 ? '大' : '小' }}</p>
</template>

{{ }} 里可以写任意 JS 表达式，但不能写语句（如 if、for）。

步骤 2：v-bind 绑定属性

<script setup>
import { ref } from 'vue'
const url = ref('https://vuejs.org')
const isActive = ref(true)
</script>

<template>
  <a :href="url">官网</a>
  <p :class="{ active: isActive }">动态 class</p>
  <p :style="{ color: 'red', fontSize: '20px' }">动态 style</p>
</template>

v-bind: 简写为 :。:class 支持对象/数组语法，非常强大。

步骤 3：v-if vs v-show

<script setup>
import { ref } from 'vue'
const type = ref('A')
const visible = ref(true)
</script>

<template>
  <p v-if="type === 'A'">A 分支</p>
  <p v-else-if="type === 'B'">B 分支</p>
  <p v-else>其他分支</p>

  <p v-show="visible">v-show 控制</p>
</template>

• v-if：真正创建/销毁 DOM，切换开销大，适合条件很少变的场景
• v-show：只是 display: none，频繁切换用它

步骤 4：v-for 列表渲染