使用vue实现简单的图书管理

这个小案例巩固了vue的基础知识，主要涉及了各种指令的操作，自定义指令、生命周期、侦听器、过滤器、计算属性等的实践。完成的功能有对图书的增删改和统计图书的总量。

功能介绍：

添加图书：输入编号和名称点击提交按钮即可添加图书，这里在名称表单中有一个监听器（name），如果名称相同提交按钮就失效，主要是使用数组的push()方法；
修改图书：点击修改按钮将图书的信息填充到表单中，但是编号不能修改，使用disabled=‘true’来使其失效，然后修改名称之后再点击提交进行修改。将数据填充到表单使用数组的filter()方法，然后使用some()方法来对数组进行遍历，修改指定索引的图书信息；
删除图书：方法一是通过获取删除图书的id来进行删除，使用的是数组的findIndex()方法，再使用splice()方法进行删除；方法二通过数组的filter()方法来进行过滤。
自定义指令：使用Vue.directive()定义一个获取焦点的全局指令（v-focus）并应用在输入编号的表单中；
过滤器：使用Vue.filter()定义一个过滤器（format）将将日期转为自己想要的格式；
计算属性：在vue实例中添加一个参数属性computed来统计图书的总数量，直接统计图书的长度即可实现；
侦听器：在vue实例中添加一个参数属性watch来验证图书是否存在，并且应用在输入名称的表单里，如果图书已经存在则提交按钮则会失效。
生命周期：使用mounted()钩子函数将数据填充到模板中。

页面展示：

HTML静态模板结构：

 <div id="app"><div class="title">图书管理</div><div class="book"><label for="id">编号：</label><input type="text" id="id" v-model='id' :disabled='flag' v-focus><label for="name">名称：</label><input type="text" id="name" v-model='name'><button @click='handle' :disabled='handleflag'>提交</button></div><div class="total"><span>图书总量：</span><span>{{total}}</span></div><table cellspacing="0"><tr><th>编号</th><th>名称</th><th>时间</th><th>操作</th></tr><tr :key='item.id' v-for='item in books'><td v-cloak>{{item.id}}</td><td v-cloak>{{item.name}}</td><td v-cloak>{{item.date | format('yyyy-MM-dd')}}</td><td><button @click='edit(item.id)'>修改</button> | <button @click='del(item.id)'>删除</button></td></tr></table></div>

css样式结构：

<style>* {padding: 0;margin: 0;}#app {width: 1200px;margin: 100px auto;text-align: center;}.title {font-size: 25px;}.book {margin-top: 20px;}table {margin: 30px 0 0 410px;}table tr:first-child {background-color: peru;}tr td,th {width: 100px;border: 1px dotted peru;}button {/* background-color: pink; */border: none;}.total {margin-top: 20px;background-color: orange;width: 100px;margin-left: 548px;}</style>

js代码：

<script>// 定义一个带参数的过滤器Vue.filter('format', function(value, arg) {if (arg == 'yyyy-MM-dd') {return value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate();}});// 自定义全局指令`v-focus`Vue.directive('focus', {bind: function(el) {// 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置},//当被绑定的元素插入到 DOM 中时……inserted: function(el) {// 获得焦点el.focus();},update: function() {// 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。}});var vm = new Vue({el: '#app',data: {id: '',name: '',date: new Date(),flag: false,handleflag: false,books: []},methods: {handle: function() {if (this.id == '' || this.name == '') {alert("请输入内容！！！");} else if (this.flag) {//修改后重新提交this.books.some(item => {if (item.id == this.id) {item.name = this.name;item.date = this.date;//完成更新后终止循环遍历return true;};})this.flag = false;} else {//添加图书var book = {};book.id = this.id;book.name = this.name;book.date = this.date;this.books.push(book);}this.id = '';this.name = '';},edit: function(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;},del: function(id) {//删除图书// 方法一：根据id从数组中查找元素的索引// var index = this.books.findIndex(function(item) {//     return item.id == id;// });// //根据索引删除数组元素// this.books.splice(index, 1);//方法二 通过数组的filter方法this.books = this.books.filter(function(item) {return item.id != id;});}},computed: {total: function() {//利用计算属性统计书本的总量return this.books.length;}},watch: {name: function(val) {//验证图书是否存在var flag = this.books.some(function(item) {return item.name == val;});if (flag) {this.handleflag = true;} else {this.handleflag = false;}}},mounted: function() {//该生命周期函数被触发的时候，模板已经可以使用//一般此时用于获取后台数据，然后把数据填充到模板var data = [{id: 1,name: '水浒传',date: new Date()}, {id: 2,name: '三国演义',date: new Date()}];this.books = data;}})</script>

使用vue实现简单的图书管理相关推荐

Oracle设计简单的图书管理
图书管理系统设计一个能够实现数据添加.删除.更新等操作的数据库,但是本文章主要涉及的内容是数据存储函数.存储过程的设计.至于简单的操作请各位按照自己的需求自行设计. 操作系统:Windows 10 ...
Spring+SpringMVC+Mybatis简单整合图书管理项目实现增删改查
Spring+SpringMVC+Mybatis项目 tomcat7插件配置 <build><plugins><plugin><groupId>org. ...
php+mysql一个简单的图书管理系统设计思路
** 1.登录注册页面 ** 1.如果数据库中没有查询到用户账号和密码相匹配的数据,就alert('用户名或者密码错误'),然后返回登录页面: 2.如果用户名密码相匹配,则在登录页面设置cookie[ ...
使用listview实现简单的图书管理
在主类布局文件中只需要一个listview即可 <?xml version="1.0" encoding="utf-8"?> <LinearL ...
hdu 1497(图书管理系统模拟）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1497 思路:就是一个简单的图书管理系统模拟,book的布尔值显示是否在图书馆:如果有一个人还书,那么那 ...
vue案例-图书管理
1.学习vue时做的一个小案例,本身案例很简单,经过优化又加些比较常用的功能,比如在添加图书前,先判断编号是否存在,并提示给用户,并且编号文本框只能输入数字等等优化. 2.使用到数组数据,方法,监视, ...
[Vue.js] 基础 -- 综合案例 -- 图书管理
综合案例 – 图书管理补充知识(数组相关API) 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 替换数组 ...
Vue前后端交互实现图书管理功能
源码链接:https://pan.baidu.com/s/1MzN9Jcrz-OLv7GVklK7UXQ 提取码:36qe 初始化项目: npm init -y 安装相应的第三方模块: npm ins ...
vue实现图书管理案例
需求: 1. 动态在页面中展示图书列表: 2. 在输入框中输入图书名称,按回车键实现图书添加功能(图书名称不能为空): 3. 点击"删除&qu ...

使用vue实现简单的图书管理

使用vue实现简单的图书管理相关推荐

最新文章

热门文章