第二章 VUE数据绑定和渲染（1）

这节课主题是如何将数据动态绑定到html中并渲染出来。
在一般情况下，前端展示的动态数据，都是从后端（如JAVA,C#,PHP等后端语言提供数据，一般都是json格式）获得数据后，进行解析并渲染到html中。这里，为了演示效果，我们只是模拟少量的不从后端读取固定数据，来进行测试vue数据绑定相关知识点。

在VUE中，绑定数据一般常用的是使用模板语法来声明式地将数据渲染进 DOM 的系统。
我们先看第一个DEMO1

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world'
    }
  }
}
</script>

这是使用{{ 变量 }} 的模板语法绑定。
我们还可以使用 v-bind: 或者 英文半角符的冒号 : 进行绑定;
看下第二个DEMO2

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <br />
    <h2>{{obj.name}}</h2>
    <a v-bind:title="obj.name">{{obj.name}}</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world',
      obj: {
        name: '张三'
      }
    }
  }
}
</script>

注意：在使用v-bind 语法进行绑定时候，不需要加{{ }} 这样的模板语法符号。v-bind 是VUE中的一个指令，它们会把动态数据渲染在 DOM 上。