# Vue.js 學習旅程Mile 7 – 資料屬性綁定篇：v-bind
###### tags: `w3HexSchool` `Vue` `Javascript`

## 用途
用 `v-bind` 來動態綁定 DOM 元素內的屬性值 ( Attributes )

### 縮寫
可用 `：` 縮寫

### 範例

<div id="app">
  <img id="vueImg" v-bind:src="imgSrc" :class="className" :data="text" alt="">
</div>

var app = new Vue({
  el: '#app',
  data: {
    imgSrc: 'https://images.unsplash.com/photo-1479568933336-ea01829af8de?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=d9926ef56492b20aea8508ed32ec6030&auto=format&fit=crop&w=2250&q=80',
    className: 'img-fluid',
    text: 'Hello!'
  }
})


## 修飾符 Modifiers
### `.prop`
作為一個 DOM 特性 ( **property** ) 綁定，而不是作為 屬性 ( attribute ) 綁定。
[兩者差別 property v.s. attribute](https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html#answer-6004028)

如果沒有設定修飾符 `.prop`，綁在 DOM 上面的是 attribute。可以使用 `getAttribute` 取值。

let element = document.querySelector("#vueImg");
element.getAttribute('data'); // Hello!

但無法利用取 property 的方式取值，拿到的是undefined

element.data;  // undefined

若希望只是存資料待之後運算，並且不希望過份汙染 HTML，通常會設為 property，利用 `.prop` 改將綁定的屬性設定為 DOM property。

<div id="app">
  <img id="vueImg" v-bind:src="imgSrc" :class="className" :data.prop="text" alt="">
</div>

data 設為 property，在 HTML 上是看不到的。

這樣就可以使用取 property 的方式取值。

let element = document.querySelector("#vueImg");
element.getAttribute('data'); // null
element.data; // Hello!

### `.camel`
若使用 .camel，就會將帶有「-」分隔 (kebab-case) 的屬性名稱轉為小駝峰 (camelCase)。


<div id="svg">
  <svg :view-box.camel="id"></svg>
</div>

### `.sync`
編譯時存在的語法糖，可以擴展成為自動更新父組件屬性的 `v-on` 監聽器。
待之後談到父子元件傳值時會有詳細介紹。
#### 補充資料
* [[Vue]使用 props.async 同步父子組件之間的傳值](https://medium.com/%E4%B8%80%E5%80%8B%E5%B0%8F%E5%B0%8F%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E9%9A%A8%E6%89%8B%E7%AD%86%E8%A8%98/vue-%E4%BD%BF%E7%94%A8-props-async-%E5%90%8C%E6%AD%A5%E7%88%B6%E5%AD%90%E7%B5%84%E5%BB%BA%E4%B9%8B%E9%96%93%E7%9A%84%E5%82%B3%E5%80%BC-f7b1d3007836)
* [Day 20 Vue Component(元件)-props.sync 溝通方式](https://ithelp.ithome.com.tw/articles/10225314)

## 常用寫法範例

<!-- bind an attribute -->
<img v-bind:src="imageSrc">

<!-- dynamic attribute name (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- shorthand -->
<img :src="imageSrc">

<!-- shorthand dynamic attribute name (2.6.0+) -->
<button :[key]="value"></button>

<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">

<!-- class binding -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style binding -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- binding an object of attributes -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- DOM attribute binding with prop modifier -->
<div v-bind:text-content.prop="text"></div>

<!-- prop binding. "prop" must be declared in my-component. -->
<my-component :prop="someThing"></my-component>

<!-- pass down parent props in common with a child component -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

## 參考資料
* [Vue.js API](https://cn.vuejs.org/v2/api/)
* [Vue.js: 屬性綁定 v-bind、Class 與 Style 綁定](https://cythilya.github.io/2017/04/21/vue-v-bind-class-and-style/)
* [Day09 - [Directives] 屬性綁定(Class and Style Binding)](https://ithelp.ithome.com.tw/articles/10194379)