[Vue學習筆記]（四）Vue指令（中） — v-bind
Vue筆記（三）中說明了Vue的基本指令，此篇文章會介紹Vue中很常被使用到的指令，v-bind, v-model, v-on，雖然Vue筆記（二）中有淺談v-bind，本篇會深入講解v-bind的使用方式，我剛開始學習Vue時，花費很多時間才搞懂v-bind，要在本篇文章解釋也算是一個小挑戰～
ㄧ、v-bind 與屬性們的綁定
（一）初步了解 v-bind
在沒有使用框架時，我們經常會使用DOM直接對一些class, style, src等屬性進行操作，在Vue中，透過v-bind這個指令，我們可以很輕鬆地對屬性、資料進行動態綁定，那麼要如何去使用它呢？
這是以前未加上Vue的寫法，給div綁定一個名為red的class
<div class = "red"> </div>在Vue中，你則可以寫成這樣：
<div id = '#app'>
<div v-bind:class = "color"> </div>
</div>
<script>
var app = new Vue({
el:'#app',
data: {
color: 'red',
}
})
</script>如此一來，你就將div的class跟color綁定住了，這樣的好處是，當data中的color一改變，圖片的class就會跟著變，這樣講不太直覺，所以我們舉一個常見的用法：圖片標籤綁定
<img src= "images/1.jpg" />在Vue中我們會這樣寫：
<div id = '#app'>
<img v-bind:src = "imgSrc" />
</div>
<script>
var app = new Vue({
el:'#app',
data: {
imgSrc: 'images/1.jpg',
}
})
</script>查看上面程式碼，你會發現，img的src綁定的是data中的imgSrc屬性，如此一來以後當data中的imgSrc變化時，src就會重新繪製。通常動態網站的圖片位址會是動態刷新的，因此使用v-bind就能輕鬆掌握。
（二）v-bind 綁定 class
- 物件語法
當我們想要動態切換class時，我們可以使用物件語法，給予class一個物件
<div id = '#app'>
<div v-bind:class="{active: isActive}"></div>
</div>
<script>
var app = new Vue({
el:'#app',
data: {
isActive: true
}
})
</script>上述程式碼中，active這個class是否綁定由isActive決定，當isActive為true，則
<div class = "active"> </div>若為false
<div class = ""> </div>但如果class不只有一個屬性呢？ → 使用陣列的方式來綁定
2. 陣列語法
<div id = '#app'>
<div v-bind:class="[ac,color]"></div>
<script>
var app = new Vue({
el:'#app',
data: {
ac: 'active'
color: 'red'
}
})
</script>Vue渲染後為：
<div class = "active red"> </div>我們也可以將物件與陣列語法結合：
[{active: isActive},{red: isRed}] 這部分的意思是因為有兩個物件，我們就要用矩陣來包起來，而active是屬性名稱，isActive則是data中的資料名稱，為true則顯示，false則隱藏。
輸出則為：
3. 綁定style
綁定style也有物件語法跟陣列與法
- 物件語法
給style一個物件{}，裡面直接寫CSS的內容，但由於JS的語法關係，font-size要改寫為fontSize，要注意的是，冒號後面的redColor與font都是data中的資料名稱，必須在data中再次定義。 {屬性1: 資料名稱1,屬性2: 資料名稱2}
繪製結果：<div id="app" style="color: red; font-size: 40px;">hei</div>
- 陣列語法
繪製結果：<div id="app" style="color: red; font-size: 18px;">abc</div>
（三）簡化寫法
v-bind很常被使用，而且字很多，所以我們可以使用語法糖 :來縮寫它
v-bind:class="active" ＝ :class="active" 所以之後我們都會直接用簡化寫法來撰寫。
二、v-model 雙向綁定
當我們想要讓使用者在網站上變更資料的同時，資料跟著變化，就要使用到v-model這個指令，也就是説，v-model讓你可以使網站有「互動性」的功能。
v-model基本例子：
網頁渲染效果為：
當我改變輸入框中的input_val的內容時，{{input_val}}的內容也隨之改變，不管是DOM元素還是Vue物件的改變，資料改變就會影響另一個，也稱為「雙向資料綁定」。
接下來再介紹幾個v-model的例子：
（一）綁定textarea
（二）實現單選項綁定
可見當我們選中「男」時，sex就等於男，因此顯示男，選中女亦然。
v-model的語法能套用在很多地方上，如：input, checkbox, textarea等讓使用者可以輸入的欄位中，套用方式幾乎都ㄧ樣，十分簡單。
這篇總算把v-bind的筆記寫完，花了好一份心力，寫的過程中也才搞懂很多觀念。原本想在這篇就結束Vue指令，但發現篇幅太長可能不易閱讀，因此之後會有一篇下作為指令的結尾。
我是Andy，謝謝你看完這篇文章，如果文章有幫助到你的話，希望不吝於幫我拍手 🙌🙌
