Day8——v-bind的基本使用

一. 回顾

前面学习了Day7——v-once、v-html、v-text、v-pre指令的使用，今天学习v-bind的基本使用

二. v-bind介绍

2.1 v-bind使用的情景

除了将数据动态显示出来，有时候我们也需要对标签的某些属性进行动态设置。比如我想要动态展示图片，那么<img>的src属性就需要动态绑定值了，再比如动态设置<a>的href属性。

总结：v-bind的作用就是动态绑定属性

2.2 v-bind的语法

基本语法：v-bind:属性=“值”（注意，值 不需要用mustache语法{{变量}}，直接写变量即可）
语法糖：:属性=“值”，语法糖就是简单的写法，提高写代码的速度以及代码的可读性

2.3 例子

<div id="app">
  <!-- 注意使用v-bind，属性的值不需要使用mustache语法{{}}-->
  <img v-bind:src="imgUrl" alt="">
  <a v-bind:href="aHref">百度一下</a>
  <!-- 下面是v-bind的语法糖写法 -->
  <img :src="imgUrl" alt="">
  <a :href="aHref">百度一下</a>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      //imgUri的值是网上随便搜的一张图片的url值
      imgUrl: 'https://img10.360buyimg.com/imgzone/jfs/t1/40389/30/14719/506416/5d5a8a91E82132130/4c1d26255a2d0edf.jpg',
      aHref: 'http://www.baidu.com'
    }
  })
</script>

效果: