vue学习总结(二 todoMVC经典案例,技术涉及本地存储,侦听器,计算属性,和开发过程中遇到的坑)

效果

项目介绍:
这是一个input搜索框附带了一系列特效,它实现的功能有:
1.按回车,下面自动添加多数据;
2.点击右边实现删除操作;
3.点击左边实现完成某一项;
4.每条数据实现常驻;(用到了侦听器,并且是深度侦听的写法,实现每次数据变化时直接进行本地数据存储);
5.双击实现编辑(找双击标签的办法:,判断自己双击的对象和循环中的对象是否同一个,是的话加editing类名即可),
6.退出编辑保存内容;(直接用双向数据绑定即可)
7.左下方未完成个数实现(使用计算属性,计算数组对象里的isCompleted有多少个即可)
8.最下面的筛选:实现点击对应高亮;同时返回不同的数组(用计算属性重新定义一个循环li标签的数组,把符合条件的数组重新用计算属性返回,重新渲染页面即可)
9.左上方的全选和反选:(用到了双向数据绑定,计算属性,和数组的filter,forEach方法)

一.准备工作

初始文件有:结构(copy),两个样式(network里的preview里复制)和vue.js
1.发现三种状态(未完成,双击编辑和已完成)都是添加类名方式实现的,编辑和已完成添加的类名分别是editing和completed;
2.检查元素发现:大的盒子是todoapp,输入框是header,三种状态是main,里面三个li标签;

二.用Vue来实现

1.实例化Vue对象

2.要求数据格式:

因为有多条数据,所以才用数组todoList,数组里的每个数据是对象,包含两项信息:info事项(string类型)和isCompleted状态(布尔类型)
同时在标题地方使用双向绑定事件(绑定newTodo,去空格)和键盘按下事件(insertTodo)

3.添加数据

在insertTodo事件里,往数组中添加上面两项信息(注意数组里每一项是对象,对象里存两项信息),并使用v-for循环循环数组后渲染页面.
优化:1.在提交数据前非空判断:空的话提示并不添加;2.提交结束清空文本框内容;

4.删除数据

需求:点击右边的X实现删除数据
(鼠标悬停X出来,实现过程:hover时增加了一个类名,里面让它显示颜色即可实现)
在按钮里添加删除的removeTodo点击事件,传入循环数组的索引,在方法里根据索引删除即可

5.实现完成某一项

里面有两项功能:checkbox要选中,添加一个complete类名
选中:直接添加双向数据绑定即可,因为input单选框本身就支持双向数据绑定;
添加类名:使用v-bind属性指令的对象操作方法,让它同item.isCompleted值一致即可

6.完成数据常驻(使用本地缓存中的localStorage)

本地存储有一个特点:只能存基本数据类型,复杂数据类型无法存储,所以建议用字符串的形式存储
方法一:(这是以前js的思路,窗口关闭的时候触发)
a.本地数据读取
在加载页面前,即在data里的todoList中使用短路运算先读取

JSON.parse(window.localStorage.getItem('key'))//约定键是key

b.本地数据存储
在最后的关闭窗口事件(window里有一个onbeforeunload方法)前进行存储

window.onbeforeunload=function(){
   
window.localStorage.setItem('key',JSON.stringify(a