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=