1. 数据绑定

Vue 框架很核心的功能就是双向的数据绑定， 双向是指：HTML 标签数据 绑定到 Vue 对象，另外反方向数据也是绑定的。通俗点说就是，Vue 对象的改变会直接影响到 HTML 的标签的变化，而且标签的变化也会反过来影响 Vue 对象的属性的变化。

方法1 绑定文本 {{}}

<span>Message: {{ msg }}span>
<script>
  var app = new Vue({         // 创建Vue对象。Vue的核心对象。
    el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
    data: {                   // data: 是Vue对象中绑定的数据
      msg: 'Hello Vue!'   // message 自定义的数据
    }
  });
script>

方法2 v-bind 针对html标签 属性绑定 即 ：

    vue中不能直接使用{{}}对html中的标签进行绑定，需要中到v-bind指令

<标签 v-bind:html标签属性名="要绑定的Vue对象的data里的属性名">

属性绑定简写：由于v-bind 使用非常频繁，所以 Vue 提供了简单的写法，可以去掉 v-bind 直接使用:即可。如

<div v-bind:id="MenuContaineId">等价于<div :id="MenuContaineId">

2.1 布尔类型值用于属性绑定：

<button v-bind:disabled="isButtonDisabled">按钮button>

   如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的  元素中。 如果为真值：按钮。

2.1 样式绑定

       对于普通的属性的绑定，只能用上面的讲的绑定属性的方式。而 Vue 专门加强了 class 和 style 的属性的绑定。可以有复杂的对象绑定、数组绑定样式和类。:class = "{className1:条件1,className2:条件2}"，其中，className可以加上''，也可以不加引号。

例子1：
 

<div id="app">
  <div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
  div>
div>
<script>
  var app = new Vue({
    el: '#app',
    data: {          // data: 是Vue对象中绑定的数据
      isActive: true,
      hasError: false
    }
  });
script>

结果

<div id="app">
  <div class="static active">
  div>  
div>

通过对class的active:data进行判断