v-bind基础使用

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