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=