一、前端页面中(a.html):
引入vue.js库
准备data;
将data绑定到页面元素中
二、Crud 操作(没有与后端数据交互)
1.查询
-
效果查询效果.PNG
代码(a.html)
<html>
<head>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://how2j.cn/study/vue.min.js"></script>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
</tr>
</thead>
<tbody>
<tr v-for="hero in heros ">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//Model
var data = {
heros: [
{ id: 1, name: '盖伦', hp: 318},
{ id: 2, name: '提莫', hp: 320}
]
};
//ViewModel
var vue = new Vue({
el: '#app',
data: data
});
</script>
</body>
</html>
2.添加
- 利用双向绑定
-
效果添加.PNG
- 代码
<html>
<head>
<script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<script src="http://how2j.cn/study/vue.min.js"></script>
</head>
<body>
<div id="app">
<table id="heroListTable" >
<thead>
<tr>
<th>英雄名称</th>
<th>血量</th>
</tr>
</thead>
<tbody v-for = "hero in heroes">
<tr>
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
</tbody>
</table>
<br/>
英雄名字:<input type="text" v-model="hero4Add.name"><br>
血量:<input type="number" v-model="hero4Add.hp"><br>
<button type="button" v-on:click = "add">添加</button>
<!---->
<script type="text/javascript">
var data = {
heroes : [
{id:1,name:"gareen",hp:"1"},
{id:2,name:"kay",hp:"2"}
],
hero4Add:{id:0,name:"",hp:""}
};
var maxId = 3;
for (var i = 0; i < data.heroes.length; i++) {
if (data.heroes[i].id > maxId) {
maxId = data.heroes[i].id;
}
}
var vue = new Vue({
el : "#app",
data : data,
methods:{
add:function(event){
maxId++;
this.hero4Add.id = maxId;
if (this.hero4Add.name.length == 0) {
this.hero4Add.name = "Hero#"+this.hero4Add.id;
}
this.heroes.push(this.hero4Add);
this.hero4Add = { id: 0, name: "", hp: "0"}
}
}
});
</script>
</div>
</script>
</body>
</html>
3.删除
-
效果删除.PNG
- 代码
1）增加删除的链接
<td>
<a href="#nowhere" @click="deleteHero(hero.id)">删除</a>
</td>
2）
deleteHero: function (id) {
for (var i=0;i<this.heros.length;i++){
if (this.heros[i].id == id) {
this.heros.splice(i, 1);
break;
}
}
}
4.更新
-
效果
更新.PNG - 代码
1)增加链接
<a href="#nowhere" @click="edit(hero)">编辑</a>
2)增加用于编辑的 div
<div id="div4Update">
英雄名称:
<input type="text" v-model="hero4Update.name" />
<br>
血量：
<input type="number" v-model="hero4Update.hp" />
<input type="hidden" v-model="hero4Update.id" />
<br>
<button type="button" v-on:click="update">修改</button>
<button type="button" v-on:click="cancel">取消</button>
</div>
3)增加相关函数
一加载script先将$("#div4Update").hide();
edit: function (hero) {
$("#heroListTable").hide();
$("#div4Update").show();
this.hero4Update = hero;
},
update:function(){
//因为v-model，已经同步修改了，所以只需要进行恢复显示就行了
$("#heroListTable").show();
$("#div4Update").hide();
},
cancel:function(){
//其实就是恢复显示
$("#heroListTable").show();
$("#div4Update").hide();
}
