Vue.js模板缩写如:href、@click、#header为官方推荐且必须使用，动态指令名、复杂修饰符事件及自定义指令则禁止缩写；需配合ESLint规则、Prettier格式化与团队规范保障一致性。
Vue.js 的模板语法缩写（如 v-bind: → :、v-on: → @）不是可选项，而是官方推荐的书写习惯。合理使用缩写能显著提升模板可读性与维护性，但滥用或混用反而会降低代码整洁度。关键在于统一、明确、符合语境。
必须使用的标准缩写
这些缩写已被 Vue 社区广泛接受，不缩写反而显得冗余：
-
v-bind:href="url"→ 统一写作:href="url"（含任意属性，如:class、:style、:disabled） -
v-on:click="handleClick"→ 统一写作@click="handleClick"（含@input、@submit、@keyup.enter等） -
v-slot:header→ 统一写作#header（仅限具名插槽；默认插槽仍用v-slot或简写为#default）
有条件缩写的场景
缩写需兼顾语义清晰度，以下情况建议保留完整指令：
- 动态指令名（如
v-bind:[key]="value"）不缩写为:[key]，因易被误读为静态属性绑定 - 带修饰符的复杂事件（如
@click.stop.prevent.self）可缩写，但若逻辑关键（如表单拦截），首次出现时可加注释说明意图 - 自定义指令（如
v-focus）不缩写，避免与原生指令混淆；第三方指令同理（如v-permission）
保持模板结构整洁的实战技巧
缩写只是表层，真正影响可维护性的是结构组织方式：
- 长属性值换行对齐：将多个绑定属性按“指令+属性”分组，每行一个，冒号左对齐（如
:id、:class、:aria-label各占一行） - 条件逻辑外提：避免在模板中写三元运算符链（如
:class="type === 'primary' ? 'btn-primary' : type === 'danger' ? 'btn-danger' : 'btn-default'"），改用计算属性或方法封装 - 事件处理函数只做调度：模板中
@click="onSubmit"即可，具体校验、API 调用等全部移入 methods 或组合式 API 的函数中
团队协作中的落地建议
靠个人自觉难保长期一致，需机制保障：
- 在 ESLint +
eslint-plugin-vue中启用vue/v-bind-style（强制缩写）、vue/v-on-style（强制 @ 缩写）规则 - 提交前运行
prettier --write，配合 Prettier 的 Vue 插件自动格式化模板缩进与换行 - 新成员入职时同步一份《模板书写速查卡》，重点标注“什么必须缩写”“什么禁止缩写”“什么视情况而定”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
