V-bind指令基本用法

V-bind指令：

先看效果图：

摘要：

1. 可以动态的请求获取图片地址URL到data的中转站，然后绑定到src属性显示图片
2. 语法糖简写法

html核心代码如下：

<div id="app">
    <div>
        {{message}}
    </div>
    <div>
        <img v-bind:src="imgURL" alt="">
        <a v-bind:href="aHref">百度一下</a>
    </div>
    
    <!--语法糖简写法-->
    <div>
        <img :src="imgURL" alt="">
        <a :href="aHref">百度一下</a>
    </div>
</div>

scirpt核心代码如下：

<script src="../Vue_js/vue.js"></script>
<script>
    const app = new Vue ({
        el: '#app',
        data: {
            message: 'v-bind语法',
            imgURL: 'https://img12.360buyimg.com/babel/s1180x940_jfs/t1/162561/18/3566/99813/60081445E1bbc336f/bda8a923a78be472.jpg.webp',
            aHref: 'http://www.baidu.com',
        }
    })
</script>

css代码如下：

    <style>
        img {
            width: 200px;
            height: 200px;
        }
    </style>