v-bind能给元素动态绑定属性
img中的src在大多数情况下都是动态传递过来的数据，并非是写死的，这时就需要用v-bind的语法，做src属性的动态绑定。
在需要动态绑定的属性前加上v-bind:，告诉Vue这个属性我需要动态绑定。
<div id="app">
<img v-bind:src="imageUrl" alt="">
</div>
<script src="./js/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data : {
imageUrl : 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
}
})
</script>
image.png
v-bind的简写是：
也就是v-bind的语法糖是 ：
<div id="app">
<img v-bind:src="imageUrl" alt="">
<!-- v-bind 语法糖 : -->
<img :src="imageUrl" alt="" srcset="">
</div>
image.png
注意：
在动态绑定属性时，不能用Matach语法，Vue不会对属性值进行解析，显示出来的属性值只是一个字符串，Matach只能用在属性的content区域
<div id="app">
<img v-bind:src="imageUrl" alt="">
<!-- v-bind 语法糖 : -->
<img :src="imageUrl" alt="" srcset="">
<img src="{{imageUrl}}" alt="" srcset="">
</div>
image.png
