模板语法与指令
Vue 模板就是「带超能力的 HTML」。核心指令五个，覆盖 90% 场景：v-bind（绑定属性，缩写 :）、v-on（绑定事件，缩写 @）、v-if/v-else（条件渲染，不满足时元素真的不存在）、v-for（列表渲染）、v-model（表单双向绑定）。
两个易混点要辨析：v-if 是「不渲染」（元素从 DOM 里移除），v-show 是「一直渲染、用 display:none 藏起来」——频繁切换显示用 v-show，条件很少变用 v-if。v-for 必须配 :key 绑定唯一值，key 帮框架识别哪些节点是同一个，从而高效复用与更新，乱写 key（比如用数组下标）在插入删除时会引发错乱。
v-model 是语法糖，等价于「:value 绑定 + @input 更新」，输入框、下拉框、单选复选全部通用，是表单开发的神器。
本节要点: 绑属性、@ 绑事件、v-if 真移除、v-show 靠 CSS、v-for 必配唯一 key、v-model 双向绑定表单。
代码
<!-- Vue 常用指令速查（模板部分） -->
<p>文本插值：{{ message }}</p>
<!-- v-bind: 绑定属性，: 是缩写 -->
<img :src="imgUrl" :alt="title">
<a :href="'/user/' + userId">个人主页</a>
<!-- v-on: 绑定事件，@ 是缩写 -->
<button @click="sayHi">打招呼</button>
<form @submit.prevent="onSubmit">...</form> <!-- .prevent 修饰符=preventDefault -->
<!-- v-if / v-else：条件渲染（不满足时元素真的不存在） -->
<p v-if="score >= 60">及格</p>
<p v-else>不及格</p>
<!-- v-show：一直存在，用 display:none 切换，适合频繁切换 -->
<!-- v-for：列表渲染，:key 必须是唯一标识 -->
<li v-for="item in list" :key="item.id">
{{ item.name }}
</li>
<!-- v-model：表单双向绑定 -->
<input v-model="keyword" placeholder="边输入 data 里就有值">
