常用特性应用场景
1. 过滤器(格式化日期)
2. 自定义指令(获取表单焦点)
3. 计算属性(统计图书数量)
4. 侦听器(验证图书存在性)
5. 生命周期(图书数据处理)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.grid {
margin: auto;
width: 500px;
text-align: center;
}
.grid table {
width: 100%;
border-collapse: collapse;
}
.grid th,td {
padding: 10;
border: 1px dashed orange;
height: 35px;
line-height: 35px;
}
.grid th {
background-color: orange;
}
.book div {
padding: 10;
line-height: 35px;
border-bottom: 1px solid green;
margin: auto;
background-color: orange;
}
.book input {
width: 150px;
}
.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/>
<label for="name">
名称:
</label>
<input type="text" id="name" v-model="name" />
<button @click="handle" :disabled="submitFlag">提交</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, index) in books">
<td>{{item.id}}</td>
<td>{{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="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" >
/*
常用特性应用场景
1. 过滤器(格式化日期)
2. 自定义指令(获取表单焦点)
3. 计算属性(统计图书数量)
4. 侦听器(验证图书存在性)
5. 生命周期(图书数据处理)
*/
/*
自定义指令,自动获取焦点
*/
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:{
msg: "hello",
id: '',
name: '',
flag : false,
submitFlag: false,
books: '',
},
methods: {
handle: function () {
if(this.flag){
//编辑操作 根据当前id更新数组对应的数据
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 = '';
this.books.push(book);
}
//清空表单内容
this.id = '';
this.name = '';
},
toEdit: function(id){
//修改的时候 禁用id修改
this.flag = true;
console.log(id);
//根据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;
},
del: function(id){
//删除
//根据id从数组中查找索引
var index = this.books.findIndex(function(item){
return item.id == id;
});
//根据索引删除元素
this.books.splice(index, 1);
}
},
//计算属性,计算图书总数
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.submitFlag = true;
}else{
this.submitFlag = false;
}
},
id: function(val){
//验证图书名称是否已经存在
var flag = this.books.some(function(item){
return item.id == val;
});
if(flag) {
//图书名称存在,提交按钮禁用
this.submitFlag = true;
}else{
this.submitFlag = false;
}
}
},
//该生命周期钩子函数被触发的时候,模板已经可以使用
//一般此时用于获取后台数据,然后把数据填充到模板
mounted: function(){
var data = [{
id: 1,
name: '七龙珠',
date: 2525609975000,
},{
id: 2,
name: '灌篮高手',
date: 2525609975000,
},{
id: 3,
name: '名侦探柯南',
date: 2525609975000,
},{
id: 4,
name: '鬼灭之刃',
date: 2525609975000,
}];
this.books = data;
}
});
</script>
</html>