Vue 简写形式全解析：清晰记忆指南
Vue 简写形式全解析：清晰记忆指南
Vue 中的各种简写形式确实容易混淆，我将它们系统化整理，并提供了多种记忆方法，帮助你轻松掌握！
一、核心简写形式汇总表
| 完整形式 | 简写形式 | 适用场景 | 记忆技巧 |
|---|---|---|---|
v-bind:attribute | :attribute | 动态绑定属性 | : 像链条，表示"绑定" |
v-on:event | @event | 事件监听 | @ 像靶心，表示"监听" |
v-slot:name | #name | 插槽定义 | # 像插槽形状 |
v-slot:default | #default | 默认插槽 | 同上 |
v-model="data" | 无简写 | 双向数据绑定 | 本身就是简写 |
v-if / v-else-if / v-else | 无简写 | 条件渲染 | 已足够简洁 |
v-for="item in items" | 无简写 | 列表渲染 | 已足够简洁 |
:key="value" | 无简写 | 列表项唯一标识 | 已足够简洁 |
this.$store.state.xxx | mapState | Vuex 状态映射 | "映射"状态 |
this.$store.getters.xxx | mapGetters | Vuex Getter 映射 | "映射"计算属性 |
this.$store.commit() | mapMutations | Vuex Mutation 映射 | "映射"同步方法 |
this.$store.dispatch() | mapActions | Vuex Action 映射 | "映射"异步方法 |
Vue.component() | components: {} | 局部组件注册 | ES6 对象简写 |
function() { ... } | () => { ... } | 箭头函数 | ES6 语法 |
{ data: data } | { data } | 对象属性简写 | ES6 语法 |
二、详细解释与记忆方法
1. 模板指令简写（最常用）
v-bind 简写 :
<!-- 完整形式 -->
<img v-bind:src="imageSrc"><!-- 简写形式 -->
<img :src="imageSrc">
记忆方法：: 像一个链条，表示"绑定"数据到属性
v-on 简写 @
<!-- 完整形式 -->
<button v-on:click="handleClick">点击</button><!-- 简写形式 -->
<button @click=