实用小项目——Vue.js 实现增删查改功能
最近学习了vue.js框架,尝试着做了一个增删查改功能的小项目。今天发博来跟大家交流交流经验。整体效果如下动态图:首先,我使用的是Bootstrap搭建整体框架:<!DOCTYPE html><html><head><meta charset="UTF-8">&
·
最近学习了vue.js框架,尝试着做了一个增删查改功能的小项目。
今天发博来跟大家交流交流经验。整体效果如下动态图:
首先,我使用的是Bootstrap搭建整体框架:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue Demo</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/vue.js"></script>
<style type="text/css">
#update-book{ // 先将修改页面div隐藏,点击修改按钮后显示
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1>Vue demo</h1>
<div id="app">
<table class="table table-hover ">
<br />
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for = 'book in filterBooks'>
<td>{{book.id}}</td>
<td>{{book.author}}</td>
<td>{{book.name}}</td>
<td>{{book.price}}</td>
<!--模板标签 v-if v-else-->
<template v-if = 'book.id %2 == 0'>
<td class="text-left">
<button type="button" class="btn btn-success" class="del" @click = "delBook(book)">删除</button>
<button type="button" class="btn btn-success" @click = "updateBook(book)" >修改</button>
</td>
</template>
<template v-else>
<td class="text-left">
// 创建点击事件
<button type="button" class="btn btn-danger" class="del" @click = "delBook(book)">删除</button>
<button type="button" class="btn btn-danger" @click = "updateBook(book)">修改</button>
</td>
</template>
</tr>
</tbody>
</table>
<!-- 添加书籍 -->
<div id="add-book">
<!--查询输入框-->
<div class="row" style="margin-bottom: 30px;">
<div class="col-md-4" style="text-align: left;font-size: 16px;line-height: 30px;">
请输入查询书名:
</div>
<div class="col-md-5" style="text-align: left;">
// v-model :在表单控件元素(input等)上创建双向数据绑定(数据源);跟Angular中 ng-model 用法一样。
<input type="text" class="form-control" v-model = "search" />
</div>
</div>
<h3>添加书籍</h3>
<hr />
<div class="form-group">
<label for="group">书名</label>
<input type="text" class="form-control" id="group" v-model = "book.name">
</div>
<div class="form-group">
<label for="author">作者</label>
<input type="text" class="form-control" id="author" v-model = "book.author">
</div>
<div class="form-group">
<label for="price">价格</label>
<input type="text" class="form-control" id="price" v-model = "book.price">
</div>
<button class="btn btn-primary btn-block" v-on:click = "addBook()">添加</button>
</div>
<!-- 修改书籍 -->
<div id="update-book">
<h3>修改书籍</h3>
<hr />
<div class="form-group">
<label for="group1">书名</label>
<input type="text" class="form-control" id="group1" v-model = "book.name">
</div>
<div class="form-group">
<label for="author1">作者</label>
<input type="text" class="form-control" id="author1" v-model = "book.author">
</div>
<div class="form-group">
<label for="price1">价格</label>
<input type="text" class="form-control" id="price1" v-model = "book.price">
</div>
<button class="btn btn-primary btn-block" v-on:click = "updatedBook()">完成</button>
</div>
</div>
</div>
</div>
// 导入JQuery 框架
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
// 导入自己的JS脚本
<script type="text/javascript" src="js/vue demo.js"></script>
</body>
</html>
框架搭好了,先导入一下数据(随手写的),在data中,最后的search是最后查询功能要用到的,与查询中 v-model = "search"绑定:
data : {
book : [{
id : 0,
author : '',
name : '',
price : ''
}],
books : [{
id : 1,
author : '曹雪芹',
name : '红楼梦',
price : 36.00
},{
id : 2,
author : '曹雪芹',
name : '三国演义',
price : 37.00
},{
id : 3,
author : '曹雪芹',
name : 'Good boy',
price : 85.00
},{
id : 4,
author : '曹雪芹',
name : '红楼梦',
price : 39.00
}],
search : "" // 查询功能使用,【注意】""中不能加空格,否则直接默认查询空格
}
接下来,要开始做功能了,在methods 里面写添加、删除、修改功能(函数):
var id = 0;
var vm = new Vue({
el : "#app",
// 计算函数 动态变化的数据
methods : { // 写函数
addBook : function(){
this.book.id = this.books.length + 1;
this.books.push(this.book);
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;
}
}
},
// 修改按钮
updateBook : function(book){
$("#add-book").css("display","none");
$("#update-book").css("display","block");
id = book.id;
},
// 修改完成后的 确认按钮点击事件
updatedBook : function(){
this.book.id = id;
this.books.splice(id-1,1,this.book);
$("#add-book").css("display","block");
$("#update-book").css("display","none");
this.book = {};
}
},
})
然后在computed中,定义过滤器。利用 computed 计算属性时,是将content和message绑定,只有当message发生变化时,才会触发content。
// 计算属性(过滤) 查询功能
computed : {
filterBooks : function(){
var books = this.books;
var search = this.search;
/*if(!search){ // 没有输入查询内容 ( 手动写的查询功能 )
return books;
}
var arr = [];
for(var i = 0; i < books.length;i++){
var index = books[i].name.indexOf( search );
if(index > -1){
arr.push(books[i]);
}
}
return arr;
*/
// vue 中的过滤器
return books.filter(function(book){
return book.name.toLowerCase().indexOf(search.toLocaleLowerCase()) != -1
// 不区分大小写查询
});
}
},
这样子我们的增删改查功能就完成了,虽然还有些许不完善,但是基本的功能已经实现了。
区区100行JS代码,就可以实现原生JS洋洋洒洒好几百行的代码功能,可以看出Vue.js确实很轻便、很好用。
但是,使用框架的前提也是在原生JS基础之上的,不能忽视基础的重要性!
今天的分享结束了,如有问题,可以提出来,小W同大家一起解决。如果有不妥的地方,欢迎拍砖~~
完整JS代码附上:
var id = 0;
var vm = new Vue({
el : "#app",
// 计算函数 动态变化的数据
methods : { // 写函数
addBook : function(){
this.book.id = this.books.length + 1;
this.books.push(this.book);
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;
}
}
},
// 修改按钮
updateBook : function(book){
$("#add-book").css("display","none");
$("#update-book").css("display","block");
id = book.id;
},
// 修改完成后的 确认按钮点击事件
updatedBook : function(){
this.book.id = id;
this.books.splice(id-1,1,this.book);
$("#add-book").css("display","block");
$("#update-book").css("display","none");
this.book = {};
}
},
// 计算属性(过滤) 查询功能
computed : {
filterBooks : function(){
var books = this.books;
var search = this.search;
/*if(!search){ // 没有输入查询内容
return books;
}
var arr = [];
for(var i = 0; i < books.length;i++){
var index = books[i].name.indexOf( search );
if(index > -1){
arr.push(books[i]);
}
}
return arr;
*/
// vue 中的过滤器
return books.filter(function(book){
return book.name.toLowerCase().indexOf(search.toLocaleLowerCase()) != -1
});
}
},
data : {
book : [{
id : 0,
author : '',
name : '',
price : ''
}],
books : [{
id : 1,
author : '曹雪芹',
name : '红楼梦',
price : 36.00
},{
id : 2,
author : '曹雪芹',
name : '三国演义',
price : 37.00
},{
id : 3,
author : '曹雪芹',
name : 'Good boy',
price : 85.00
},{
id : 4,
author : '曹雪芹',
name : '红楼梦',
price : 39.00
}],
search : "" // 查询功能,""中不能加空格,否则默认查询空格
}
})
更多推荐
已为社区贡献13条内容
所有评论(0)