跟着黑马18年的教程敲的。
最终效果
最终效果：可以进行图书增加、删除、修改。
开发思路
Part1: 图书列表
- 实现静态列表效果
- 基于数据实现模板效果
- 处理每行的操作按钮
Part2: 添加图书
- 实现表单的静态效果
- 添加图书表单域数据绑定
- 添加按钮事件绑定实现
- 添加业务逻辑
Part3:修改图书
- 修改信息填充到表单
- 修改后重新提交表单
- 重用添加和修改的方法
Part4: 删除图书
- 删除按钮绑定事件处理方法
- 实现删除业务逻辑
Part5：常用特性应用场景
- 过滤器（格式化日期）
- 自定义指令（获取表单焦点）
- 计算属性（统计图书数量）
- 侦听器（验证图书存在性）
- 生命周期（图书数据处理）
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<title>Document</title>
<style>
.grid {
margin: auto;
width: 500px;
text-align: center;
}
.grid table {
border-top: 1px solid #fff;
width: 100%;
border-collapse: collapse;
}
.grid th,
td {
padding: 10px;
border: 1px dashed orangered;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: orangered;
}
a {
text-decoration: none;
}
.book {
background-color: orangered;
padding: 5px 0;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: orangered;
border-top: 1px solid #fff;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<label for="id">编号：</label>
<input type="text" id="id" v-model='id' :disabled='flag' v-focus>
<label for="id">名称：</label>
<input type="text" id="name" v-model='name'>
<button @click='handle' :disabled='submitFlag'>提交</button>
</div>
</div>
<div class="total">
<span>图书总数：</span>
<span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key='item.id' v-for='(item,index) in books'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date|format}}</td>
<td>
<a href="" @click.prevent='toEdit(item.id)'>修改</a>
<span> | </span>
<a href="" @click.prevent='deleteBook(item.id)'>删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
id: '',
name: '',
flag: false,
submitFlag: false,
books: '',
},
methods: {
handle() {
// 判断是否为编辑模式
if (this.flag) {
// 根据当前的id更新数组中对应的数据
this.books.forEach(item => {
if (item.id == this.id) {
item.name = this.name;
return;
}
});
this.flag = false;
} else {
// 添加图书
let book = {};
book.id = this.id;
book.name = this.name;
book.date = '';
this.books.push(book);
}
// 清空表单
this.id = '';
this.name = '';
},
toEdit(id) {
// 禁止改变id
this.flag = true;
// 根据id查询要编辑的数据
let book = this.books.filter(item => {
return item.id == id;
});
// 把获取的信息填充表单
this.id = book[0].id;
this.name = book[0].name;
},
// 删除图书
deleteBook(id) {
// 根据id查询要删除的数据的索引
// let index = this.books.findIndex(item => {
// return item.id == id;
// });
// 根据索引删除数组元素
// this.books.splice(index,1);
// -------------------
// 方法二：通过数组的filter方法进行删除
this.books = this.books.filter(item => {
// 排除掉id不等于books.id中的项
return item.id !== id;
});
}
},
filters: {
format(value) {
let date = new Date(Number(value));
let year = date.getFullYear();
let month = date.getMonth() + 1;
if (month < 10) {
month = `0${month}`;
}
let day = date.getDate();
if (day < 10) {
day = `0${day}`;
}
return `${year}-${month}-${day}`;
}
},
// 自定义指令
directives: {
focus: {
inserted(el) {
el.focus();
}
}
},
computed: {
total() {
// 计算图书总数
return this.books.length;
}
},
watch: {
name: function (val) {
// 验证图书名称是否已经存在
this.submitFlag = this.books.some(item => {
// 如果存在则为真，将submitflag等于true
return item.name == val;
})
}
},
// 该声明周期钩子函数被触发时，模板已经可以使用了
// 一般此时用于获取后台数据，然后将数据填充到模板
mounted() {
var data = [
{
id: 1,
name: '三国演义',
date: '1291177600000',
flag: false
},
{
id: 2,
name: '水浒传',
date: '1344408000000'
},
{
id: 3,
name: '红楼梦',
date: '1623456000000'
},
{
id: 4,
name: '西游记',
date: '596851200000'
}];
this.books = data;
},
})
</script>
</body>
</html>