vue的动态绑定

vue更偏向于mvvm，实现了动态绑定,Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的

<div id = "box">
     {{name}}
     <p v-html="name"></p>
     <span>{{age}}</span>
     <p v-if="isShow">我是动态创建和删除</p>
     <p v-show="isShow">我是动态隐藏和显示</p>
     <button v-on:click="handleClick">测试</button>
    <span v-bind:title="message">
       鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
 </div>

• v-html 是显示html标签使用
• v-if 动态创建和删除
• v-show 动态隐藏和显示
• v-on 绑定事件响应
• v-bind 绑定元素特性

vue使用的基本模板（el ，data，methods）

1. el:element 需要获取的元素，一定是html中的跟容器元素
2. data: 用于数据的存储
3. methods: 用于存储各种方法

var vm = new Vue({
      el:"#box",
      data:{
          name:"<b>aaaaaa</b>",
          age:15,
          isShow:true,
          message: '页面加载于 ' + new Date().toLocaleString()
      },
      methods:{
          handleClick:function()
           {
//            console.log(11);
              this.name="xaiaohhh";
           }
      }
    })

• v-for 指令可以绑定数组的数据来渲染一个项目列表

<div id="app-4">
     <ol>
         <li v-for="todo in todos">
             {{ todo.text }}
         </li>
     </ol>
 </div>
  var app4 = new Vue({
      el: '#app-4',
      data: {
          todos: [
              { text: '学习 JavaScript' },
              { text: '学习 Vue' },
              { text: '整个牛项目' }
          ]
      }
  })

• v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})