搞懂一个东西，最好的方式是学习它的使用，准守它的规则，那么
它的才能更好了解到它的内部建构。
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>
时间： 2024-08-07 00:16:57