Vue太难啦！从入门到放弃day03——图书管理系统案例

前言

经过前两天的学习，我已经对Vue的基础语法有了一定的理解，起码可以看得懂一部分代码了，那么今天就做一个小demo来练练手吧~

---

---

一、综合案例——图书管理系统

1.1 总体需求

    1、通过列表实时展示图书数据
    2、输入编号和名称点击提交按钮可添加图书数据
    3、点击每行的修改按钮，可修改图书名称
    4、点击每行的删除按钮，可删除图书数据
    5、实时统计图书总数并显示
    6、格式化时间为统一格式
    7、添加图书数据时验证图书名称是否存在

1.2 效果展示

1.3 列表展示

1.3.1 准备默认数据

var vm = new Vue({
   
	el: '#app',
	data: {
   
		books: [{
   
			id: 1,
			name: '三国演义',
			date: ''
		},{
   
			id: 2,
			name: '水浒传',
			date: ''
		},{
   
			id: 3,
			name: '红楼梦',
			date: ''
		},{
   
			id: 4,
			name: '西游记',
			date: ''
		}]
	}
});

1.3.2 把提供好的数据渲染到页面上

<tr :key='item.id' v-for='item in books'>
	<td>{
   {
   item.id}}</td>
	<td>{
   {
   item.name}}</td>
	<td>{
   {
   item.date}}</td>
	<td>
		<a href=