VUE案例实践-图书管理系统

2,655 阅读2分钟

案例基本框架

  概括一下实现这个图书管理系统的步骤——   首先,图书列表展示:   ①实现静态列表效果;   ②基于数据实现模板效果;   ③处理每行的操作按钮;

  第二,添加图书:   ①实现表单的静态效果;   ②添加图书输入域数据绑定;   ③添加按钮事件绑定;   ④实现添加业务逻辑;

  (下面这个图截得不好,就是简单的输入域数据双向绑定和提交按钮点击事件,直接往下看吧。。。=_=)

  第三,修改图书信息:   ①修改信息填充到标单;   ②修改后重新提交表单;   ③重复利用修改和添加的方法;

  写到下图这样整套添加以及修改逻辑已经完整了,添加和修改的逻辑有交叉所以写到这里作为一个节点,往下就要写删除功能了~

  第四,删除图书信息:   ①删除按钮绑定事件;   ②实现删除业务逻辑;

是时候展现真正的技术了

Vue常用特性的应用场景

  针对这一案例,我们之前学习的Vue常用特性有一下应用场景:   过滤器——格式化日期   自定义指令——获取表单焦点   计算属性——统计图书数量   监听器——检索图数是否存在   生命周期——图书数据处理

filter过滤器格式化日期

  这里还是直接使用那套大神封装好的日期格式化代码。用法在过滤器的笔记中说过,打包进一个对外暴露的js文件里然后在组件中引入调用就OK了。

  出来的效果是date在后台是以毫秒的形式存在的,渲染到页面后就成了格式化后的日期。

directive自定义指令获取表单焦点

  此处应有效果图。。。

computed计算属性统计图书数量

watch监听器检索图书是否存在

  这里做一个效果是当检索到所要添加的图书已存在时就禁用提交按钮。

  先给提交按钮加个tab来操控它是否被禁用。

  然后逻辑如下,利用数组方法some检索book是否包含某元素:

利用组件生命周期处理数据

  偷懒用假数据意思意思=_=。。。

  至此整个案例就写完了,完整的代码如下: