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）

有条件缩写的场景

缩写需兼顾语义清晰度，以下情况建议保留完整指令：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• 动态指令名（如 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 插件自动格式化模板缩进与换行
• 新成员入职时同步一份《模板书写速查卡》，重点标注“什么必须缩写”“什么禁止缩写”“什么视情况而定”