一:项目的铺垫
(1):数组的方法
数组相关APL
变异方法 (mutation method) ---修改原始数据
push() pop() shift() unshift() splice() sort() reverse()
替换数组---生成新数组
filter()、concat() 和 slice()
<body>
<div id="app">
<div>
<input type="text" v-model="fname">
<button @click="add">添加</button>
<button @click="del">删除</button>
<button @click="change">替换</button>
</div>
<div>
<ul>
<li :key="item.id" v-for="(item,index) in fruit">
{{item}}
</li>
</ul>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
fname: '',
fruit: ['apple', 'banana', 'pear']
},
methods: {
add: function () {
this.fruit.push(this.fname);
},
del: function () {
this.fruit.pop(this.fname);
},
change: function () {
this.fruit = this.fruit.slice(0, 2); //不会影响原始数据,所以在赋值回去
}
}
});
</script>
</body>
(2):动态响应处理数据
动态响应处理数据
1:Vue.set(vm.items, indexOfItem, newValue)
或者 vm.$set(vm.items, indexOfItem, newValue)
01:参数一:要处理的数组名称 02:参数二:要处理的数组索引 03:要处理数组的值
2:vm.items.splice(newLength)
<body>
<div id="app">
<div>
<ul>
<li v-for="(item,index) in list" :key="item.index">{{item}}</li>
</ul>
</div>
<div>{{info.name}}</div>
<div>{{info.age}}</div>
<div>{{info.gender}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
list: ['apple', 'banana', 'pear'],
info: {
name: 'pink',
age: 18,
}
}
});
Vue.set(vm.list, 2, 'lemo'); //修改了list数据的索引号为2的数据为lemo
vm.$set(vm.list, 2, 'pear'); //修改了list数据的索引号为2的数据为pear
vm.$set(vm.info, 'gender', 'female'); //修改了info对象中gender属性的设置为female
//以下不是响应式的
// vm.info.gender = 'male';
// vm.list[1] = 'lemo';
</script>
</body>
二:图书管理
思路:
/*
常用属性应用场景
1:过滤器—格式化日期
2:自定义指令—获取表单焦点
3:计算属性—统计图书数量
4:监听器—验证图书存在性
5:生命周期—图书数据处理
*/
第一步:图书列表的渲染
1:构造视图,利用v-for循环去渲染数据
第二步:添加图书
1:点击提交,需要把id与name存入一个对象,然后推入books(数组)数据之中
2:并且清空表单的内容
3:
第三步:修改图书
1:点击修改图书-这是根据id来判断点击了哪一个,所以在修改处需要一个点击事件并且传递id过去(item.id)
2:禁止编辑id---这需要一个flag标志来判断(disable=“flag”)
3:点击修改后,把对应的数据传递到上面的表单内(依靠filter方法,根据id是否相等,返回一个新的数组)
4:再启动编辑功能,修改后,把数据再一次保存如books数据中,由于编辑功能逻辑可以写在添加功能里面,判断调价是id的标志为真的话,为编辑状态,为假就是添加状态
5:在编辑状态里面修改数据,利用some方法(根据当前的id去更新数组中对应的数据)---但是需要借助箭头函数
6:最后不管是添加还是修改,都需要表单的内容清空
第四步:删除图书
1: //根据点击的item的id删除,这可以借助filter方法,过滤。
第五步:图书的总数
computed: {
total: function () {
//计算图书的总数 就是数组中的长度
return this.books.length;
}
},
第六步:mounted---生命周期此处,渲染数据,因此把数据拿到此处,并且赋值给books
<title>图书管理</title>
<style>
[v-cloak] {
display: none;
}
#app {
width: 600px;
height: 500px;
margin: 10px auto;
text-align: center;
}
.book {
background-color: orange;
}
table {
border-collapse: collapse;
}
thead {
background-color: orange;
height: 50px;
}
td {
width: 200px;
border: 1px solid #ccc;
}
tr:nth-child(1) {
border-bottom: 1px solid #ccc;
}
td:nth-child(1) {
width: 80px;
}
.grid .total {
height: 30px;
line-height: 30px;
background-color: orange;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="grid">
<h2>图书管理</h2>
<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="submit">提交</button>
</div>
<div class="total">
<span>图书总数: </span>
<span>{{total}}</span>
</div>
<table>
<thead>
<td>编号</td>
<td>名称</td>
<td>时间</td>
<td>操作</td>
</thead>
<tbody>
<tr v-for="(item,index) in books" :key="item.id">
<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>
<script src="../js/vue.js"></script>
<script>
Vue.directive('focus', {
inserted: function (el) {
el.focus();
}
});
//使用过滤器格式化日期
Vue.filter('format', function (value, arg) {
function dateForamt(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 dateForamt(value, arg);
});
let vm = new Vue({
el: "#app",
data: {
flag: false,
id: "",
name: "",
books: ""
},
methods: {
submit: function (val) { //提交事件
if (this.flag) { //为真,证明id被禁用,为编辑状态
//修改里面的数据,然后把数据保存到books里面---就是根据当前的id去更新数组中对应的数据some方法
this.books.some((item) => {
if (item.id == this.id) {
item.name = this.name;
return true;
}
this.flag = false;
})
} else {
//添加图书
let book = {};
book.id = this.id;
book.name = this.name;
book.date = ""
this.books.push(book);
}
this.id = "";
this.name = "";
},
//修改图书,禁止编辑id
toEdit: function (id) {
// console.log(id);
this.flag = true;
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) {
//根据点击的item的id删除,这可以借助filter方法,过滤
this.books = this.books.filter(function (item) {
return item.id != id; //返回的是,不包含点击过的id
});
}
},
computed: {
total: function () {
//计算图书的总数 就是数组中的长度
return this.books.length;
}
},
mounted: function () {
var data = [{
id: 1,
name: '三国演义',
date: 2525609975001
},
{
id: 2,
name: '水浒传',
date: 2525609975001
}, {
id: 3,
name: '西游记',
date: 2525609975001
}, {
id: 4,
name: '红楼梦',
date: 2525609975001
}
];
this.books = data;
}
});
</script>
</body>