最近学习Vue.js感觉跟不上节奏了，Vue.js用起来很方便。
主要实现功能，能添加书的内容和删除。（用的Bootstrap的样式）demo链接
标题用了自定义组件，代码如下：
components: { 'my-title': { template: '<h1 v-text="title"></h1>', data: function () { return { title: 'Vue.js 实例练习 Bootstrap样式' } } } }
增加书的内容和表格用的都是指令+列表渲染，vue.js构造单页面应用确实很方便。
Vue.js提供的指令很快的渲染想要的内容。这里主要用了v-for嵌套使用。
v-for还包含2个特殊变量：$index,$key。能遍历数组和对象。 全部代码如下：
<!DOCTYPE html> <html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <style> #app { 990px; padding: 0 15px; margin: 0 auto; } </style> <div id="app"> <my-title></my-title> <div id="divTblBook"> <table class="table table-hover"> <thead> <tr> <th v-for="b in bookShow">{{ b }}</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="item in books"> <td v-for="b in item">{{ item[$key] }} </td> <td> <button class="btn btn-primary" v-on:click="delBook(item)">删除</button> </td> </tr> </tbody> </table> </div> <div id="divAddBook"> <p>添加书籍</p> <div v-for="b in bookShow"> <div class="form-group"> <label>{{ b }}</label> <input type="text" class="form-control" v-model="book[$key]"> </div> </div> <button class="btn btn-primary" v-on:click="addBook()">添加</button> </div> </div> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" /> <script src="http://apps.bdimg.com/libs/vue/1.0.14/vue.js"></script> <script> var vm = new Vue({ el: "#app", components: { 'my-title': { template: '<h1 v-text="title"></h1>', data: function () { return { title: 'Vue.js 实例练习 Bootstrap样式' } } } }, data: { books: [{ author: '曹雪芹', name: '红楼梦', price: 32.0 }, { author: '施耐庵', name: '水浒传', price: 30.0 }, { author: '罗贯中', name: '三国演义', price: 24.0 }, { author: '吴承恩', name: '西游记', price: 20.0 }], book: { Name: '', Author: '', price: '' }, bookShow: { Name: "书名", Author: "作者", price: "价格" } }, methods: { addBook: function () { this.books.push(this.book); this.book = ""; }, delBook: function (book) { this.books.$remove(book); } } }) </script> </body> </html>