基于Vue的图书管理系统 Vue的常用使用特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src='./js/jquery.js'></script> <style type="text/css"> .grid { margin: auto; width: 500px; text-align: center; } .grid table { border-top: 1px solid #C2D89A; width: 100%; border-collapse: collapse; } .grid th,td { padding: 10; border: 1px dashed #F3DCAB; height: 35px; line-height: 35px; } .grid th { background-color: #F3DCAB; } .grid .book { padding-bottom: 10px; padding-top: 5px; background-color: #F3DCAB; } .grid .total { height: 30px; line-height: 30px; background-color: #F3DCAB; border-top: 1px solid #F3DCAB; } </style> <body> <section id='app'> <div class='grid'> <div> <h1>图书管理</h1> <div class="book"> <div> <label for="id"> 编号： </label> <input type="text" id='id' v-model='id' v-bind:disabled='flag' v-focus> <label for="name"> 名称： </label> <input type="text" id='name' v-model='name'> <button v-on:click='handle' v-bind:disabled='submitFlag'>提交</button> </div> </div> </div> <div class="total"> <span>图书总数：</span> <span>{{ total }}</span> </div> <table cellpadding="0" cellspacing="0"> <thead> <tr> <th>编号</th> <th>名称</th> <th>时间</th> <th>操作</th> </tr> </thead> <tbody> <tr v-bind:key='item.id' v-for='item in books'> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td> <td> <a href="" v-on:click.prevent='toEdit(item.id)'>修改</a> <span> | </span> <a href="" v-on:click.prevent='deleteBook(item.id)'>删除</a> </td> </tr> </tbody> </table> </div> </section> </body> <script src='./js/vue.js'></script> <script> Vue.directive('focus', { inserted: function(el){ el.focus(); } }); Vue.filter('format', function(value, arg) { function dateFormat(date, format) { if (typeof date === "string") { var mts = date.match(/(\/Date\((\d+)\)\/)/); if (mts && mts.length >= 3) { date = parseInt(mts[2]); } } date = new Date(date); if (!date || date.toUTCString() == "Invalid Date") { return ""; } var map = { "M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小时 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; format = format.replace(/([yMdhmsqS])+/g, function(all, t) { var v = map[t]; if (v !== undefined) { if (all.length > 1) { v = '0' + v; v = v.substr(v.length - 2); } return v; } else if (t === 'y') { return (date.getFullYear() + '').substr(4 - all.length); } return all; }); return format; } return dateFormat(value, arg); }) // 此处的坑：过滤器中的日期数值是字符型，若是字符串，则出错 var vm= new Vue({ el: '#app', data: { flag: false, submitFlag: false, id: '', name: '', books: [] }, methods: { handle: function(){ if(this.flag){ // 根据当前的ID去更新数组中对应的数据 // var that= this; // var book= this.books.filter(function(item){ // return item.id == that.id; // }) // book[0].name= this.name; this.books.some((item)=> { if(item.id== this.id){ item.name = this.name; // 更新操作之后，终止循环 return true; } }); this.flag= false; }else{ // 添加图书 var book= {}; book.id= this.id; book.name= this.name; book.date= new Date(); this.books.push(book); } // 清空表单 this.id= ''; this.name= ''; }, toEdit: function(id){ // 禁止修改ID this.flag= true; // console.log(id); // 根据ID查询出要编辑的数据 // console.log(typeof(id)); var book= this.books.filter(function(item){ return item.id == id; }); console.log(book); // 将获取到的信息填充到表单 this.id= book[0].id; this.name= book[0].name; }, deleteBook: 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: {
// 监听：监听的对象为data中的键名，即监听响应式数据 name: function(val){ // 验证图书名称是否存在 var flag= this.books.some(function(item){ return item.name== val }); if(flag){ // 图书名称存在 this.submitFlag= true; }else{ this.submitFlag= false; } } }, mounted: function(){ // 该生命周期钩子函数被触发的时候，模板已经可以使用 // 一般此时用于获取后台数据，然后把数据填充到模板 var data= [{ id: 1, name: '三国演义', date: 1599202362443 },{ id: 2, name: '水浒传', date: 1599202407342 },{ id: 3, name: '红楼梦', date: 1599202421574 },{ id: 4, name: '西游记', date: 1599202433516 }]; this.books= data; } })
// 方法（增删改操作）
// 过滤器（格式化日期）
// 自定义指令（获取表单焦点）
// 计算属性（统计图书数量）
// 侦听器（验证图书存在性）
// 生命周期（图书数据处理）
</script> </html>
