區(qū)別
v-bind:屬性綁定(簡寫:), v-on:事件綁定(簡寫@), v-model:雙向綁定
1.v-model用來進行data數(shù)據(jù)與頁面數(shù)據(jù)的雙向綁定。主要用于表單控件，被稱為雙向綁定
2.v-bind是data數(shù)據(jù)對頁面標(biāo)簽中屬性的綁定。被稱為單向綁定
3.v-on是methods對頁面事件的綁定。

1 .冒號屬性

：是指令 v-bind 的縮寫，v-bind指令可以用來綁定標(biāo)簽的屬性和樣式。要綁定的內(nèi)容是作為一個JS變量，因此只需要對該內(nèi)容編寫合法的JS表達式。
基礎(chǔ)的語法格式為：v-bind:屬性=“值”。

<h2  v-bind:style="{color:'red'}">這是2號標(biāo)題</h2>
<h2 :style="{color:'red'}">這是2號標(biāo)題</h2>

2. @屬性

@ 是指令 v-on 的縮寫，用來監(jiān)聽DOM事件，比如點擊、拖拽、鍵盤事件等等。
@click 相當(dāng)于v-on:click，@change相當(dāng)于v-on:change
@后還可以跟自定義事件，用于子組件向父組件傳值。

<button v-on:click="getData()"></button>
<button @click="getData()"></button>

3.v-model

v-model默認是綁定在value屬性上的，v-model后面加“:value”也是可以的，即v-model:value，但一般情況下直接寫v-model。
因為只有表單元素可以與用戶進行交互，所以v-model指令一般只用于表單控件或者是一些組件中。

<input type='text' v-model='message'>

在Vue實例的data數(shù)據(jù)中 有數(shù)據(jù)message 當(dāng)data中的message 有變化時輸入框的值變成相應(yīng)的這個值 當(dāng)輸入框輸入值時這里的data也會變 這就實現(xiàn)了數(shù)據(jù)的雙向綁定。