标签：header styles table html ima jquery ace react inf
搞懂一个东西，最好的方式是学习它的使用，准守它的规则，那么
它的才能更好了解到它的内部建构。
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>
标签：header styles table html ima jquery ace react inf
原文地址：http://www.cnblogs.com/zhangzhicheng/p/6853321.html
