vue图书管理系统毕业设计,基于vue框架的图书管理系统
这篇文章主要为大家详细介绍了某视频剪辑软件实现图书管理案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现图书管理的具体代码，供大家参考，具体内容如下
案例效果
案例思路
1、图书列表
实现静态列表效果
基于数据实现模板效果
处理每行的操作按钮
2、添加图书
实现表单的静态效果
添加图书表单域数据绑定
添加按钮事件绑定
实现添加业务逻辑
3、修改图书
修改信息填充到表单
修改后重新提交到表单
重用添加和修改方法
4、删除图书
删除按钮绑定时间处理方法
实现删除业务逻辑
5、常用特性应用场景
过滤器（格式化日期)
自定义指令（获取表单焦点)
计算属性（统计图书数量)
侦听器（验证图书和编号的存在性)
生命周期（图书数据处理)
代码
基本样式
style type=text/css 。网格{
边距：自动；
宽度：550像素
文本对齐：居中；
}。网格表{
宽度：100%;
边框-塌陷：塌陷；
}。网格th，
td {
填充：10;
边框：1px虚线橙色；
高度：35px
}。网格th {
背景色：橙色；
}。网格。书{
宽度：550像素
填充-底部：10px
填充顶部：5px
背景色：lawngreen
}。网格。总计{
高度：30px
行高：30px
背景色：lawngreen
边框-顶部：1px纯橙色；
}
/风格
静态布局
div id=应用程序
div class=grid
差异
氕图书管理/h1
div class=book
差异
=id 的标签
编号：
/标签
输入类型=text id=id v-model=id :禁用=flag v焦点
=名称的标签
名称：
/标签
输入类型=text id=name v-model=name
按钮@ click= handle :disabled=提交标志提交/按钮
/div
/div
/div
div class=合计
跨度图书总数：/spanspan{{total}}/span
/div
桌子
四羟乙基己二酰胺
tr
泰国(泰国)编号/th
泰国(泰国)名称/th
泰国(泰国)时间/th
泰国(泰国)操作/th
/tr
/thead
在需要分行下载处加上
tr:key= item。id v-for=图书中的项目
td{{item.id}}/td
td{{item.name}}/td
TD { { item。日期格式( yyyy-MM-DD hh:MM:ss )} }/TD
TDA href= @ click。防止=编辑(项目。id)修改/a
span/span
a href= @ click。防止=删除图书(项目。id)删除/a
/td
/tr
/tbody
/表格
/div
/div
效果实现
脚本类型=text/javascript src=./js/vue.js/script
脚本类型=文本/javascript
Vue.directive(focus ，{
插入：函数(el) {
埃尔。焦点()；
}
})
Vue.filter(format ，function (value，arg) {
函数日期格式（日期，格式){
如果(日期类型===字符串){
var MTS=日期。match(/(\/Date \((\ d)\)\/)；
if (mts mts.length=3) {
date=parse int(MTS[2])；
}
}
日期=新日期（日期);
如果(!date date.toUTCString()==无效日期){
返回"";
}
var map={
M: date.getMonth() 1，//月份
d: date.getDate()，//日
h: date.getHours()，//小时
m: date.getMinutes()，//分
s: date.getSeconds()，//秒
问：数学。楼层((日期。getmonth()3)/3)，//季度
S: date.getMilliseconds() //毫秒
};
格式=格式。replace(/([yMdhmsqS])/g，function (all，t) {
var v=map[t]；
如果(v！=未定义){
if (all.length 1) {
v= 0 v
v=v . substr(v . length-2)；
}
回归五；
} else if (t===y) {
return (date.getFullYear() ).substr(4-所有。长度)；
}
全部退回；
});
返回格式；
}
返回日期格式(value，arg)；
})
var vm=new Vue({
埃尔： #app ，
数据：{
标志：假，
submitFlag: false
id: ，
名称： ,
书籍：[]
},
方法：{
handle: function () {
if (this.flag) {
//编辑操作
//就是根据当前编号去更新数组中对应的数据
this.books.some((item)={
if (item.id==this.id) {
item.name=this.name
//完成更新操作后终止循环
返回真实的
}
})
this.flag=false
}否则{
//添加图书
var book={ }；
书。id=这个。id；
书。名字=这个。姓名；
这个。数据=" "；
this.books.push(本书);
}
//清空表单
这个。id=
这个。name=
}，toEdit:函数(id) {
//禁止修改编号
this.flag=true
//根据编号查询出要编辑的数据
var book=this。书籍。过滤器(功能(项目){
返回项目。id==id
});
console.log(图书)
//把获取到的编号提交到表单
this.id=book[0].id；
this.name=book[0].姓名；
},
删除图书：函数(id) {
//删除图书
//根据编号从数组中查找元素的索引
//var index=this。书籍。查找索引(函数(项目){
//返回项目。id==id
//});
//根据索引删除数组元素
//this.books.splice(index，1)
//-
//方法2通过过滤器方法进行删除
this.books=this.books.filter(函数（项目){
返回item.id！=id
})
}
},
计算值：{
总计：函数(){
//计算图书的总数
返回这个。书籍。长度；
}
},
观察：{
名称：函数(瓦尔){
//验证图书名称是否已经存在
var flag=this。书籍。某(函数(项){返回项。name==val})
如果（标志){
//图书名存在
this.submitFlag=true
}否则{
//图书名不存在
this.submitFlag=false
}
}
},
已安装：函数(){
//该生命周期钩子函数被出发的时候。模板已经可以使用
//一般此时用于获取后台数据，然后把数据填充到模板
定义变量数据=[{
id: 1，
名称： 三国演义，
日期：252597867777
}, {
id: 2，
名称： 水浒传，
日期：564634563453
}, {
id: 3，
名称： 红楼梦，
日期：345435345343
}, {
id: 4，
名称： 西游记，
日期：345345346533
}]
this.books=数据
}
});
/脚本
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。