前言
经过前两天的学习,我已经对Vue的基础语法有了一定的理解,起码可以看得懂一部分代码了,那么今天就做一个小demo来练练手吧~
一、综合案例——图书管理系统
1.1 总体需求
1、通过列表实时展示图书数据
2、输入编号和名称点击提交按钮可添加图书数据
3、点击每行的修改按钮,可修改图书名称
4、点击每行的删除按钮,可删除图书数据
5、实时统计图书总数并显示
6、格式化时间为统一格式
7、添加图书数据时验证图书名称是否存在
1.2 效果展示
1.3 列表展示
1.3.1 准备默认数据
var vm = new Vue({
el: '#app',
data: {
books: [{
id: 1,
name: '三国演义',
date: ''
},{
id: 2,
name: '水浒传',
date: ''
},{
id: 3,
name: '红楼梦',
date: ''
},{
id: 4,
name: '西游记',
date: ''
}]
}
});
1.3.2 把提供好的数据渲染到页面上
<tr :key='item.id' v-for='item in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>
<a href="" @click.prevent>修改</a>
<span>|</span>
<a href="" @click.prevent>删除</a>
</td>
</tr>
注意:处理每行的按钮时,要通过设置@click.prevent 来阻止 a 标签的默认跳转
1.4 添加图书
1.4.1 通过双向绑定获取到输入框中的输入内容
<label for="id">
编号:
</label>
<input type="text" id="id" v-model='id'>
<label for="name">
名称:
</label>
<input type="text" id="name" v-model='name'>
注意:要在vue实例的data中添加id和name属性
1.4.2 给按钮添加点击事件
<button @click='handle'>提交</button>
1.4.3 把输入框中的数据存储到 data 中的 books 里面
methods: {
handle: function(){
// 添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.date = '';
this.books.push(book);
// 清空表单
this.id = '';
this.name = '';
}
}
1.5 修改图书
1.5.1 将需要修改的信息填充到表单
给修改按钮添加点击事件,需要把当前的图书的id传递过去,这样才知道需要修改的是哪一本书籍:
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
根据传递过来的id 查出books中对应书籍的详细信息,把获取到的信息填充到表单:
toEdit: function(id){
// 禁止修改ID
this.flag = true;
// 根据ID查询出要编辑的数据
var book = this.books.filter(function(item){
return item.id == id;
});
// 把获取到的信息填充到表单
this.id = book[0].id;
this.name = book[0].name;
}
1.5.2 修改后重新提交表单
定义一个标识符, 主要是控制编辑状态下当前编辑书籍的id不能被修改。即处于编辑状态下,当前控制书籍编号的输入框禁用:
<input type="text" id="id" v-model='id' :disabled="flag">
修改handle方法,用户点击提交的时候判断flag的值,如果flag为true,即表单处于不可输入状态,此时执行修改数据操作:
handle: function(){
if(this.flag) {
// 编辑图书
// 就是根据当前的ID去更新数组中对应的数据
// 箭头函数中 this 指向父级作用域的this
this.books.some((item) => {
if(item.id == this.id) {
item.name = this.name;
// 完成更新操作之后,需要终止循环
return true;
}
});
this.flag = false;
}else{
// 添加图书
var book = {};
book.id = this.id;
book.name = this.name;
book.date = '';
this.books.push(book);
// 清空表单
this.id = '';
this.name = '';
}
// 清空表单
this.id = '';
this.name = '';
},
1.6 删除图书
1.6.1 给删除按钮添加事件,把当前需要删除的书籍id传递过来
<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
1.6.2 根据id从数组中查找元素的索引,根据索引删除数组元素
deleteBook: function(id){
// 删除图书
// 通过filter方法进行删除
this.books = this.books.filter(function(item){
return item.id != id;
});
}
1.7 常用特性应用场景
1.7.1 过滤器(格式化日期)
Vue.filter('format', function(value, arg) {
//具体代码请看上一章内容
}
1.7.2 自定义指令(获取表单焦点)
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
<input type="text" id="id" v-model='id' :disabled="flag" v-focus>
1.7.3 计算属性(统计图书数量)
computed: {
total: function(){
// 计算图书的总数
return this.books.length;
}
},
1.7.4 侦听器(验证图书存在性)
watch: {
name: function(val) {
// 验证图书名称是否已经存在
var flag = this.books.some(function(item){
return item.name == val;
});
if(flag) {
// 图书名称存在
this.submitFlag = true;
}else{
// 图书名称不存在
this.submitFlag = false;
}
}
},
1.7.5 生命周期(图书数据处理)
mounted: function(){
// 该生命周期钩子函数被触发的时候,模板已经可以使用
// 一般此时用于获取后台数据,然后把数据填充到模板
}
总结
这个Demo虽然看上去很简单(实际上确实很简单),但是它实现的功能是非常实用的,之后可以以此为基础,尝试做更多更复杂的功能。