Vue 图书管理案例：包含过滤器，自定义指令，计算属性，侦听器，生命周期知识点
必要知识点：
- => 箭头函数：函数里面的this指向父级作用域
this.books.some(function(item){})//里面的this指向window
this.books.some((item)=>{})//指向父级作用域
2.filter返回的是数组类型
3.forEach，filter，some 的区别和使用场景:
来说明图书管理遍历为何用some 主要是提高性能
<script>
var arr = ['pink', 'blue', 'red', 'green'];
forEach迭代 遍历
arr.forEach(function(value) {
if (value == 'blue') {
console.log('找到了blue');
return true; //这里的true不会终止迭代
}
console.log('我还在遍历');
})
如果查询数组中唯一的元素, 用some方法更合适,
arr.some(function(value) {
if (value == 'green') {
console.log('找到了该元素');
return true; // 在some 里面 遇到 return true 就是终止遍历 迭代效率更高
}
console.log(11);
});
arr.filter(function(value) {
if (value == 'green') {
console.log('找到了该元素');
return true; // // filter 里面 return 不会终止迭代
}
console.log(11);
});
</script>
4.时间格式化方法 :
用到正则表达式匹配 可以得到自己约定的时间类型
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);
});
5.生命周期钩子之一 mounted:
该生命周期钩子函数被触发的时候 模板已经可以使用了
一般此时用于获取后台数据，然后把数据填充到模板里
图书馆图书管理案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/vue.min.js"></script>
<title>Document</title>
<style type="text/css">
.grid {
margin: auto;
width: 530px;
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;
}
[v-cloak] {
display: none;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: #F3DCAB;
border-top: 1px solid #C2D89A;
}
</style>
</head>
<body>
<div id="app">
<div class="grid">
<div>
<h1>图书管理</h1>
<div class="book">
<div>
<label for="id">
编号：
</label>
<input type="text" id="id" v-model="id" :disabled="flag" v-focus>
<!-- 因为是事件绑定 所以disabled要加 : -->
<label for="name">
名称：
</label>
<input type="text" id="name" v-model="name">
<button @click="toAdd" :disabled="flag_">提交</button>
</div>
</div>
</div>
<div class="total">
<span>图书总数：</span>
<span>{{total}}</span>
</div>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr :key="item.id" v-for="item in books">
<td v-cloak>{{item.id}}</td>
<td v-cloak>{{item.name}}</td>
<td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
<td>
<a href="" @click.prevent="toEdit(item.id)">修改</a>
<span>|</span>
<a href="" @click.prevent="toDel(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
// 过滤器格式化时间 变成自己约定的格式
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, //默认不禁用输入
flag_: false,
id: '',
name: '',
books: [],
},
directives: {
focus: { //焦点
inserted(el) {
el.focus();
}
}
},
methods: {
toAdd: function() {
//去除空格 以便下面好判断输入框是否为空
this.id = this.id.trim();
this.name = this.name.trim();
// 判断是添加还是编辑操作 思路：如果id被禁用则说明是编辑操作 否则是添加操作
if (this.flag) {
//编辑操作
//就是根据当前的ID去更新数组中的数据
this.books.some((item) => { //箭头函数 里面的this指向父级作用域的this 就是toAdd的vue实例
if (item.id = this.id) {
item.name = this.name;
//完成编辑操作之后 需要终止循环 节约性能
return true;
}
});
this.id = '';
this.name = '';
this.flag = false;
} else if (this.id == '' || this.name == '') {
alert('不能为空');
} 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) { //传参
this.flag = true; //禁止修改id
console.log(id);
//根据id查询要编辑的数据
var bookDate = this.books.filter(function(item) {
return item.id == id; //查询对应的id数据 并返回书的数据对象
});
console.log(bookDate); //返回的是一个数组
//把获取到的信息填充到表
this.id = bookDate[0].id; //bookDate是数组 数据在索引号为0的位置 可看控制台
this.name = bookDate[0].name;
},
toDel: function(id) {
//删除图书
//根据id从数组中查找元素的索引
//方法1
// var index = this.books.findIndex(function(item) {
// return item.id == id;
// })
// this.books.splice(index, 1); // splice： 从index开始 删除一个
//方法2
this.books = this.books.filter(function(item) { //把筛选后的结果重新赋值给books
return item.id != id //返回那些id 不相等的对象 形成一个新的数组
})
}
},
//计算属性
computed: {
total: function() {
//计算图书的总数
return this.books.length; //返回books的length及是总数
}
},
watch: {
//侦听器 检测图书是否已经存在
name: function(val) {
var result = this.books.some((item) => {
return item.name == val;
});
if (result) {
this.flag_ = true; //图书已存在 禁用提交按钮
} else {
this.flag_ = false; //图书不存在 解禁
}
}
},
mounted:
//该生命周期钩子函数被触发的时候 模板已经可以使用了
//一般此时用于获取后台数据，然后把数据填充到模板里
//这里是写死的数据 原本这里是调用接口 ajax
function() {
var data = [{
id: 1001,
name: '三国演义',
date: new Date(),
}, {
id: 1002,
name: '水浒传',
date: new Date(),
}, {
id: 1003,
name: '红楼梦',
date: new Date(),
}, {
id: 1004,
name: '西游记',
date: new Date(),
}];
this.books = data;
},
})
</script>
</html>