搞懂一個東西，最好的方式是學習它的使用，准守它的規則，那么
它的才能更好了解到它的內部建構。
vue據說包含react+angular的的優點。
vue到底是什么?
一個mvvm框架(庫)、和angular類似
比較容易上手、小巧
mvc:
mvp
mvvm
mv*
mvx
官網:http://cn.vuejs.org/
手冊： http://cn.vuejs.org/api/
vue和angular區別?
vue——簡單、易學
指令以 v-xxx
一片html代碼配合上json，在new出來vue實例
個人維護項目
適合: 移動端項目,小巧
vue的發展勢頭很猛，github上start數量已經超越angular
angular——上手難
指令以 ng-xxx
所有屬性和方法都掛到$scope身上
angular由google維護
合適: pc端項目
共同點: 不兼容低版本IE
例子：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>Document</title> <link rel="stylesheet" href="./lib/bootstrap.min.css"> <script src="./lib/jquery-1.7.2.js"></script> <script src="./lib/bootstrap.js"></script> <script src="./lib/vue.js"></script> <script> /*有些方法在vue里，是和它內部的方法衝突的，例如delete，alert，所在標籤里無法使用的，不過在js還是可以使用的 既然使用vue那麼就準守它的規則 */ window.onload=function(){ var vue=new Vue({ el:"#tblPage", data:{ myData:[{username:"中國人",age:24},{username:"cliOu",age:20}], username:"", age:"", currentIndex:-1 }, methods:{ add:function(){ this.myData.push({username:this.username,age:this.age}); this.username=""; this.age=""; }, deleteTbl:function(index){ if(index<0){ this.myData=[]; }else{ this.myData.splice(index,1); } } } }); } </script> </head> <body> <div class="container" id="tblPage"> <form role="form"> <div class="form-group"> <label for="username">用戶名:</label> <input type="text" class="form-control" id="username" placeholder="請輸入" v-model="username"> </div> <div class="form-group"> <label for="age">年 齡:</label> <input type="text" class="form-control" id="age" placeholder="請輸入" v-model="age"> </div> <div class="form-group text-right"> <button type="button" class="btn btn-sm btn-primary" v-on:click="add()">添加</button> <button type="reset" class="btn btn-sm btn-danger">重置</button> </div> </form> <table class="table table-bordered table-hover"> <caption class="h4 text-info">用戶表信息</caption> <tr> <th>序號</th> <th>名稱</th> <th>年齡</th> <th>操作</th> </tr> <tr v-for="(item,index) in myData"> <td>{{index+1}}</td> <td>{{item.username}}</td> <td>{{item.age}}</td> <td> <button type="button" class="btn btn-xs btn-danger" v-on:click="currentIndex=index" data-toggle="modal" data-target="#layer">刪除</button> </td> </tr> <tr v-show="myData.length>0"> <td colspan="4" class="text-right"> <button type="button" class="btn btn-xs btn-danger" v-on:click="currentIndex=-1" data-toggle="modal" data-target="#layer">刪除全部</button> </td> </tr> <tr v-show="myData.length==0"> <td colspan="4" class="text-center text-muted"> 無數據... </td> </tr> </table> <!-- 模態框 --> <div role="dialog" class="modal fade" id="layer"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="btn btn-danger" class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title" v-show="currentIndex!=-1">你是否要刪除!</h4> <h4 class="modal-title" v-show="currentIndex==-1">你是否要刪除全部!</h4> </div> <div class="modal-body text-right"> <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal">取消</button> <button type="button" class="btn btn-sm btn-danger" data-dismiss="modal" v-on:click="deleteTbl(currentIndex)">確認</button> </div> </div> </div> </div> </div> </body> </html>