4、数据绑定

打开App.vue，对代码进行修改

一、文本：

1、使用 {{...}}（双大括号）

<template>
  <div id="app">
    <h2>{{msg}}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Vue学习笔记',
    }
  }
}
</script>

2、使用v-text

<template>
  <div id="app">
    <h2 v-text="msg"></h2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        msg: 'Vue学习笔记'
      }
    }
  }
</script>

二、Html：使用 v-html 指令用于输出 html 代码

<template>
  <div id="app">
    <div v-html="htmlText"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      htmlText:'<h3>Vue学习笔记</h3>'
    }
  }
}
</script>

三、对象

<template>
  <div id="app">
    <h2>{{obj.name}}</h2>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        obj: {
          name: '杜拉拉'
        }
      }
    }
  }
</script>

四、列表

<template>
  <div id="app">
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: ['星期一', '星期二', '星期三']
      }
    }
  }
</script>

<template>
  <div id="app">
    <table>
      <tr>
        <td>新闻标题</td>
        <td>作者</td>
      </tr>
      <tr v-for="item in news">
        <td>{{item.title}}</td>
        <td>{{item.author}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        news: [
          {title: '新闻一', author: '张三'},
          {title: '新闻二', author: '李四'},
          {title: '新闻三', author: '王五'},
          {title: '新闻四', author: '赵六'}
        ]
      }
    }
  }
</script>

五、绑定属性：HTML 属性中的值应使用 v-bind 指令

注：v-bind:title可以缩写为:title，v-bind:src可以缩写为:src

<template>
  <div id="app">
    <div v-bind:title="divTitle" v-bind:id="'div'+divID">鼠标滑上去看一下</div>
    <br/>
    <img v-bind:src="imgSrc"/>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        divTitle: '我是一个title',
        imgSrc: 'http://www.idcode.org.cn/static/img/idcode-logo.1d27b87.jpg',
        divID: 1
      }
    }
  }
</script>

<style lang="scss">

</style>