Vue.js 的核心是一個響應的數據綁定系統，它讓數據與 DOM 保持同步非常簡單。在使用 jQuery 手工操作 DOM 時，我們的代碼常常是命令式的、重復的與易錯的。Vue.js 擁抱數據驅動的視圖概念。通俗地講，它意味着我們在普通 HTML 模板中使用特殊的語法將 DOM “綁定”到底層數據。一旦創建了綁定，DOM 將與數據保持同步。每當修改了數據，DOM 便相應地更新。這樣我們應用中的邏輯就幾乎都是直接修改數據了，不必與 DOM 更新攪在一起。這讓我們的代碼更容易撰寫、理解與維護。
html:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> 7 <script src="dist/vue.min.js"></script> 8 <style type="text/css"> 9 [v-cloak] { 10 display: none; 11 } 12 </style> 13 </head> 14 <body> 15 <div class="container"> 16 <div class="col-md-6 col-md-offset-3"> 17 <h1>Vue demo</h1> 18 19 <div id="app"> 20 <table class="table table-hover "> 21 <caption></caption> 22 <thead> 23 <tr> 24 <th>序號</th> 25 <th>書名</th> 26 <th>作者</th> 27 <th>價格</th> 28 <th>操作</th> 29 </tr> 30 </thead> 31 <tbody> 32 <tr v-cloak v-for="book in books"> 33 <td>{{book.id}}</td> 34 <td>{{book.name}}</td> 35 <td>{{book.author}}</td> 36 <td>{{book.price}}</td> 37 <template v-if="book.id%2==0"> 38 <td class="text-left"> 39 <button type="button" class="btn btn-success" @click="delBook(book)">刪除</button> 40 </td> 41 </template> 42 <template v-else> 43 <td class="text-left"> 44 <button type="button" class="btn btn-danger" @click="delBook(book)">刪除</button> 45 </td> 46 </template> 47 </tr> 48 </tbody> 49 50 </table> 51 52 <div id="add-book"> 53 54 <legend>添加書籍</legend> 55 56 <div class="form-group"> 57 <label for="">書名</label> 58 <input type="text" class="form-control" v-model="book.name"> 59 </div> 60 61 <div class="form-group"> 62 <label for="">作者</label> 63 <input type="text" class="form-control" v-model="book.author"> 64 </div> 65 66 <div class="form-group"> 67 <label for="">價格</label> 68 <input type="text" class="form-control" v-model="book.price"> 69 </div> 70 71 <button class="btn btn-primary btn-block" v-on:click="addBook()">添加</button> 72 </div> 73 74 </div> 75 76 </div> 77 </div> 78 <script type="text/javascript" src="1.js"></script> 79 </body> 80 </html>
js
new Vue({ el: '#app', methods: { addBook: function() { //計算書的id this.book.id = this.books.length + 1; this.books.push(this.book); //將input中的數據重置 this.book = {}; }, delBook: function(book) { var blength = this.books.length; this.books.splice(book.id-1, 1); for( var i = 0; i < blength ; i++) { if(book.id < this.books[i].id) { this.books[i].id -= 1; } } } }, data: { book: { id: 0, author: '', name: '', price: '' }, books: [{ id: 1, author: '曹雪芹', name: '紅樓夢', price: 32.0 }, { id: 2, author: '施耐庵', name: '水滸傳', price: 30.0 }, { id: '3', author: '羅貫中', name: '三國演義', price: 24.0 }, { id: 4, author: '吳承恩', name: '西游記', price: 20.0 }] } });