前言

经过前两天的学习，我已经对Vue的基础语法有了一定的理解，起码可以看得懂一部分代码了，那么今天就做一个小demo来练练手吧~

---

---

一、综合案例——图书管理系统

1.1 总体需求

    1、通过列表实时展示图书数据
    2、输入编号和名称点击提交按钮可添加图书数据
    3、点击每行的修改按钮，可修改图书名称
    4、点击每行的删除按钮，可删除图书数据
    5、实时统计图书总数并显示
    6、格式化时间为统一格式
    7、添加图书数据时验证图书名称是否存在
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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
2
3
4
5
6
7
8
9
10
11
12

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
2
3
4
5
6
7
8
9
10

1.4.2 给按钮添加点击事件

<button @click='handle'>提交</button>
1

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
2
3
4
5
6
7
8
9
10
11
12
13

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

1.6 删除图书

1.6.1 给删除按钮添加事件，把当前需要删除的书籍id传递过来

<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
1

1.6.2 根据id从数组中查找元素的索引，根据索引删除数组元素

deleteBook: function(id){
	// 删除图书
	// 通过filter方法进行删除
	this.books = this.books.filter(function(item){
    	return item.id != id;
	});
}
1
2
3
4
5
6
7

1.7 常用特性应用场景

1.7.1 过滤器（格式化日期）

    Vue.filter('format', function(value, arg) {
    //具体代码请看上一章内容
}
1
2
3

1.7.2 自定义指令（获取表单焦点）

Vue.directive('focus', {
	inserted: function (el) {
		el.focus();
	}
});

 <input type="text" id="id" v-model='id' :disabled="flag" v-focus>
1
2
3
4
5
6
7

1.7.3 计算属性（统计图书数量）

computed: {
	total: function(){
		// 计算图书的总数
		return this.books.length;
	}
},
1
2
3
4
5
6

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1.7.5 生命周期（图书数据处理）

mounted: function(){
	// 该生命周期钩子函数被触发的时候，模板已经可以使用
	// 一般此时用于获取后台数据，然后把数据填充到模板
}
1
2
3
4

总结

这个Demo虽然看上去很简单（实际上确实很简单），但是它实现的功能是非常实用的，之后可以以此为基础，尝试做更多更复杂的功能。