Vue指令

v-bind

（運行中動態(tài)）添加屬性 Attribute 或傳輸?shù)阶咏M件中的 Props 中的數(shù)據(jù)。

速記：BAP：v-Bind -> Attribute + Props

<img v-bind:src='imageSource'> 這句代碼的意思是將變量 imageSource 的值動態(tài)地添加到 img 標簽的 src 屬性中去。

當屬性名也需要動態(tài)指定時，需加上一個中括號：

<img v-bind:[key]='imageSource'>
其中變量 key 需要在 js 代碼中指定其值。

v-model

用于表單數(shù)據(jù)的雙向綁定，其實它就是一個語法糖，該語法糖背后做了這兩個工作：

1. v-bind 綁定一個 value 屬性
2. v-on 指令給當前元素綁定 input 事件。這里非常關鍵，因為我們可以在子組件中使用 this.$emit('input', val) 來響應該事件。

示例：
普通組件中
<input v-model="inputValue>
相當于
<input v-bind:value="inputValue" v-on:input="inputValue=$event.target.value">

在自定義組件中
<my-component v-model="inputValue"></my-component>
相當于
<my-component v-bind:value="inputValue" v-on:input="inputValue = arguments[0]"></my-component>
這個時候，inputValue 接收的值就是 input 事件的回調函數(shù)的第一個參數(shù)，所以在自定義組件中，要實現(xiàn)數(shù)據(jù)綁定，還需要 $emit 去觸發(fā) input 的事件。this.$emit('input', value)