Vue指令

v-bind

（运行中动态）添加属性 Attribute 或传输到子组件中的 Props 中的数据。

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

<img v-bind:src='imageSource'> 这句代码的意思是将变量 imageSource 的值动态地添加到 img 标签的 src 属性中去。

当属性名也需要动态指定时，需加上一个中括号：

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

v-model

用于表单数据的双向绑定，其实它就是一个语法糖，该语法糖背后做了这两个工作：

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 事件的回调函数的第一个参数，所以在自定义组件中，要实现数据绑定，还需要 $emit 去触发 input 的事件。this.$emit('input', value)