为什么需要一份 Vue 模板大全
日常写 Vue 时，很多时间花在“这个写法叫什么、怎么写更简洁”上。把常见模板集中整理，能减少翻文档的次数，也能让团队代码风格更统一。
基础插值与指令
文本与属性绑定
{{ message }}
{{ }} 用于文本插值，v-bind（简写 :）用于属性绑定，对象语法适合动态类名和样式。
条件渲染
加载中
出错了
内容
频繁切换用 v-show
v-if 是真实销毁与重建，v-show 只切换 display。切换频繁时优先 v-show。
列表、事件与表单
列表渲染
-
{{ index }} – {{ item.name }}
:key 建议用稳定唯一值，不要用索引，避免列表更新时出现状态错乱。
事件绑定
.stop、.prevent、.enter 等修饰符能减少手写事件判断。
表单双向绑定
…
v-model 本质是 :value 加 @input 的语法糖，.number、.trim 可自动处理常见输入格式。
组件、插槽与动态组件
组件通信模板
父传子用 props，子传父用 $emit，模板中直接绑定即可。
插槽
标题
正文
具名插槽让组件结构更灵活，默认插槽适合包裹通用内容。
动态组件与异步组件
配合 defineAsyncComponent 可按需加载，适合标签页切换或大型页面拆分。
容易踩坑的细节
v-for和v-if不要放在同一元素上，优先用计算属性过滤。- 模板中避免写复杂表达式，抽成
computed或方法更易读。 - 事件名建议用 kebab-case，如
@item-click，与 HTML 属性风格一致。 - 插值中不要放副作用逻辑，保持模板“只描述结果”。
小结
Vue 模板的核心并不复杂：插值、指令、条件、列表、事件、表单、组件与插槽。把这些常用写法整理成自己的“模板大全”，开发时直接查阅，比临时搜索更高效。
