初识vue.js

一：为什么会想到用vue .js?

场景：ajax传回一个二维json，解析json数据，拼接html，追加到指定的DOM里.......

这个过程很繁琐，而且拼接html这一步也很容易出错.........

思考：有没有一种方法让页面的DOM随数据自己变化？

二 ：他的demo（原文点我）（ps:原文比我写得好的多，我只是写写我自己的理解~..~）

交互流程：点击create 列表增加一行，点击delete删除当前行。

分析：

1.列表里的数据一般是从数据库传回来的，返回一个二维数组，vue.js 可以将循环绑在tr上

   <tr v-for="(person,index) in people">

v-for 是一个循环指令，循环people数组，当前对象person，index是索引（0开始）

2.点击create，获取文本框的值，增加一行在末尾；vue.js 可以让数据和DOM绑定，简言之，我文本框的值是随我的Vue的实例对象里面的数据自动更新的

v-model指令创建双向绑定：

 <p>Name: <input type="text" v-model="newPerson.Name"/></p>

这样文本框的值就和 Vue实例对象里的newPerson.Name绑定起来

        3.点击delete，删除当前行；

v-on指令可以绑定点击事件，并且可以带参数，比如这里带上当前行的索引值

  <td><input type="button"  v-on:click="deletePerson(index)" value="delete"/></td>

这样一个vue.js的小demo就算完成了。

原文demo:点击打开链接

注：原文的demo删除有点小问题，可能是版本问题，请看原文的第九楼评论。

我的理解：在这个demo中vue.js就很好的实现了DOM与数据的绑定，我们没有去直接去操作DOM，而是操作Vue的实例去帮助我们操作demo，通过这个方式不仅减少了对DOM的操作（因为Vue已经将数据和DOM绑在一起了）加大效率，而且对数据的操作也变的更方便（MVVM）；