一.V-on： 縮寫@

綁定事件監聽器

<button v-on:click="doThis"></button>

on後面接著就是事件

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默認行為 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默認行為，沒有表達式 -->
<form @submit.prevent></form>

<!--  串聯修飾符 -->
<button @click.stop.prevent="doThis"></button>
 

二. v-bind 縮寫：（就一個冒號）

<!-- 綁定一個屬性 -->
<img v-bind:src="imageSrc">

<!-- 縮寫 -->
<img :src="imageSrc">

<!-- 內聯字符串拼接 -->
<img :src="‘/path/to/images/‘ + fileName">

用對象綁定class

:class="{red:isactive}" 
用isactive的 布爾值來判斷，可以寫一個事件動態操作這個布爾值




五.ref

<input ref="usernameInput"></input>
 

this.$refs.usernameInput.value  可以訪問上個input的內容

Vue 總結（1） 屬性綁定