vue-图书管理-常用特性应用
目录
文章目录
内容
上篇博文’vue-图书管理-基本功能’完成了图书管理的基本功能，但是还有很多没完善的地方，日期时间戳，表单项没有自动获取焦点，没有统计图书数量，对于添加图书的ID没有校验，数据不是从后端获取…
下面就使用vue的特性解决这些问题
1、过滤器（格式化日期）
-
代码1-1
... <td>{{ book.date | dateFormat}}</td> ... <script src="../../node_modules/moment/moment.js"></script> .. Vue.filter('dateFormat', function (value, args) { return moment(value).format(args || 'YYYY/MM/DD hh:mm:ss') }) ... -
效果图1-1：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OgQwOCQR-1595603879704)(./images/2020-07-24_filter-date.png)]](https://i-blog.csdnimg.cn/blog_migrate/0ccf2c33fc73a1020fd0a4feb904d49b.png)
-
解析：moment.js模块为时间处理模块，用法可自行查询相关文档，或者参考一下博文https://www.cnblogs.com/MrZhujl/p/11398704.html
2、自定义指令（表单项自动获取焦点）
-
代码2-1：
<span>编号：<input type="text" v-model="id" :disabled="flag" v-focus></span> // 自动获取焦点 Vue.directive('focus', { inserted(el) { el.focus() } }) -
效果：自己查看
3、计算属性（显示图书数量）
-
代码3-1：
<hr> <div> <span>图书总数：</span> <span>{{ total }}</span> </div> computed: { total() { return this.books.length } }, -
效果3-1：
4、侦听器（侦听图书ID不能重复且不能小于最后一个图书的ID）
-
代码4-1：
<button @click="addBook" :disabled="flagSubmit">添加</button> watch: { id(val) { // 判断ID是否重复 let flagID = this.books.some(book => { return book.id === val }) // 判断ID是否小于等于最后一条图书的ID let flagLt = ( parseInt(val) <= parseInt(this.books[this.books.length -1].id)) if( flagID || flagLt) { // ID不符合要求，提交按钮不可用 this.flagSubmit = true return } // ID 符合要求，提交按钮可用 this.flagSubmit = false } }, -
效果图示4-2 ID重复：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HdOChULy-1595603879705)(./images/2020-07-24_watch-ID重复.png)]](https://i-blog.csdnimg.cn/blog_migrate/37174d06d60dce3c5aa821ab1f29950e.png)
-
效果图示4-3 ID小于等于最后一条图示ID：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RQq2uqdk-1595603879706)(./images/2020-07-24_watch-ID-2.png)]](https://i-blog.csdnimg.cn/blog_migrate/cd8b16ec32e9eb667f83e1dab3baea02.png)
5、生命周期（模拟从后端获取数据）
-
代码5-1：
books: [] created() { // 此处只是模拟，真实情况是根据后端接口API获取数据 this.books = [ { id: 1, name: '三国演义', date: 2525609975000 }, { id: 2, name: '水浒传', date: 2525609975000 }, { id: 3, name: '西游记', date: 2525609975000 }, { id: 4, name: '红楼梦', date: 2525609975000 } ] },
6、完整代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02_图书管理</title>
<style>
* {
margin: 0;
padding: 0;
}
#grid {
width: 700px;
margin: 100px auto;
text-align: center;
background-color: orange;
box-shadow: 10px 10px 10px silver;
}
#grid .fi {
margin: 10px 0;
}
#grid table {
width: 100%;
border-collapse: collapse;
margin: 10px 0;
}
#grid table th, #grid table td {
border: 1px dashed orange;
height: 35px;
line-height: 35px;
}
#grid thead {
background-color: orange;
}
#grid tbody {
background-color: #ff99f0;
}
#grid a {
text-decoration: none;
cursor: pointer;
}
#grid a:hover {
color: orangered;
}
#grid input[type='text'] {
padding-left: 5px;
}
</style>
</head>
<body>
<div id="app">
<div id="grid">
<header>图书管理</header>
<hr>
<div class="fi">
<span>编号：<input type="text" v-model="id" :disabled="flag" v-focus></span>
<span>名称：<input type="text" v-model="name"></span>
<button @click="addBook" :disabled="flagSubmit">添加</button>
</div>
<hr>
<div>
<span>图书总数：</span>
<span>{{ total }}</span>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.name }}</td>
<td>{{ book.date | dateFormat}}</td>
<td>
<a @click.prevent="updateBook(book)">修改</a>|
<a @click.prevent="deleteBook(book.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="../../node_modules/vue/dist/vue.js"></script>
<script src="../../node_modules/moment/moment.js"></script>
<script>
// 格式化日期时间
Vue.filter('dateFormat', function (value, args) {
return moment(value).format(args || 'YYYY/MM/DD hh:mm:ss')
})
// 自动获取焦点
Vue.directive('focus', {
inserted(el) {
el.focus()
}
})
const app = new Vue({
el: '#app',
data: {
id: '',
name: '',
flag: false,
updatedBook: {}, // 被修改的图书对象
flagSubmit: false, // 提交按钮是否可用
books: []
},
created() {
// 此处只是模拟，真实情况是根据后端接口API获取数据
this.books = [
{
id: 1,
name: '三国演义',
date: 2525609975000
},
{
id: 2,
name: '水浒传',
date: 2525609975000
},
{
id: 3,
name: '西游记',
date: 2525609975000
},
{
id: 4,
name: '红楼梦',
date: 2525609975000
}
]
},
computed: {
total() {
return this.books.length
}
},
watch: {
id(val) {
// 判断ID是否重复
let flagID = this.books.some(book => {
return book.id === val
})
// 判断ID是否小于等于最后一条图书的ID
let flagLt = ( parseInt(val) <= parseInt(this.books[this.books.length -1].id))
if( flagID || flagLt) {
// ID不符合要求，提交按钮不可用
this.flagSubmit = true
return
}
// ID 符合要求，提交按钮可用
this.flagSubmit = false
}
},
methods:{
addBook() {
if (this.flag) {
// flag = true 修改操作
this.updatedBook.name = this.name
this.flag = false
this.updatedBook = {}
}else {
// flag = false 添加操作
this.books.push({id: this.id, name: this.name, date: 2525609975000})
}
this.id = ''
this.name = ''
},
updateBook(book) {
this.updatedBook = book
this.id = this.updatedBook.id
this.name = this.updatedBook.name
this.flag = true
},
deleteBook(id) {
this.books = this.books.filter(book => {
return book.id !== id
})
}
}
});
</script>
</body>
</html>
后记 ：
vue官网地址：https://cn.vuejs.org/
本项目为参考某马视频开发，相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档，持续更新。欢迎交流，本人QQ:806797785
前端项目源代码地址：https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA
扫一扫
519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
