Vue3 模板语法 & 内置指令
30 分钟速查表（排版统一 · 可打印）
━━━━━━━━━━━━━━
🎯 一句话理解
"HTML 做骨架，JS 做数据，Vue 负责自动把数据填到骨架里。"
━━━━━━━━━━━━━━
1 数据填充（Mustache）
━━━━━━━━
语法：{``{ 表达式 }}
| 变量 | 计算 | 函数 | 三元 |
|---|---|---|---|
{``{ msg }} |
{``{ count * 10 }} |
{``{ getReverse() }} |
{``{ ok ? 'Y' : 'N' }} |
2 指令速览
━━━━━━━━
"v-" 开头，Vue 识别的特殊属性。
| 指令 | 缩写 | 作用 | 示例 |
|---|---|---|---|
| v-once | --- | 只渲染一次 | <span v-once>{``{ count }}</span> |
| v-text | --- | 纯文本 | <span v-text="msg"></span> |
| v-html | --- | 解析 HTML | <div v-html="htmlStr"></div> |
| v-bind | : |
动态属性 | <img :src="url"> |
| v-on | @ |
事件监听 | <button @click="add">+</button> |
| v-if | --- | 条件渲染 | <p v-if="show">Yes</p> |
| v-show | --- | display 切换 | <p v-show="show">Yes</p> |
| v-for | --- | 列表渲染 | <li v-for="i in list" :key="i.id">{``{ i.name }}</li> |
3 v-if vs v-show
━━━━━━━━
v-if：真正销毁/重建 DOM → 切换代价大，初始为 false 时不渲染。
v-show：始终存在，仅切换 display → 频繁显示/隐藏更省性能。
4 事件常用修饰符
━━━━━━━━
@click.stop 阻止冒泡
@submit.prevent 阻止默认提交
@keyup.enter 回车触发
5 学习路线（建议 4 步）
━━━━━━━━
① Mustache 显示数据 → ② v-bind 绑定属性 → ③ v-on 响应事件 → ④ v-if / v-for 控制结构。
6 核心思想
━━━━━━━━
声明式：描述"想要什么"，而非"如何操作"。
响应式：数据变 → 页面自动变。
━━━━━━━━━━━━━━
把这张表贴在显示器旁，写 demo 时对照 5 分钟就能上手！