一、静态页面设置完毕后

1.设置动态生成li对象（数据指{id:'001',title:'eat',done:true},）

（1）list中添加todos对象存放数据，再在item组件标签添加v-for，同时用todo接受todos数据内容

（2）在item的Vue中添加props['obj']接受数据，同时在显示数据的标签span中设置插值语句{{obj.title}}

（3）设置数据前面的复选框状态 item.vue

在中的设置<input type="checkbox" :checked="obj.done" />，将传入的todo对象是否勾选的属性反应出来

2.输入数据能够添加数据（在myHeader.vue组件中实现）

思路：要获得用户输入数据，再把数据添加到list中
注意项：需要把用户输入的内容包装成一个todo对象，其中id属性可借用nanoid库来生成唯一id
（1）获取用户输入信息

①在input后面绑定‘弹起enter键触发’的add事件，@keyup.enter='add'

②在vue中methods添加add方法,有两种，一种是利用add(e){e.target.value}，可获得用户输入数据，另一种是在input中用v-model双向绑定数据title，其中在Vue的data(){return title:''}，this.title即为输入数据

③安装nanoid库，引入并使用（nanoid为函数）

问题一：

把数据添加到list中，由于obj数据是在list中，添加的数据在myHeader中，属于兄弟关系，所以要做调整：把list的数据交给APP，myHeader添加的数据交给APP即可

3.list数据交给APP

①把list中Vue的data剪切到APP中，同时由于list要使用数据，所以在list组件标签添加数据传输，

②传输后list要接收数据，所以在list的Vue中添加props进行接收

（注意：如接收过来的数据叫todos，上面item的v-for中也要遍历todos才可以）

4.myheader添加的数据交给APP(子给父传数据——父给子一个函数，子将数据通过函数传给父）

①在APP添加带参数方法addTodo（newtodo），在myheader标签中把方法传输给myheader

②myheader要接收方法，在Vue中添加props进行接收

③添加的数据的add方法中，利用this.addTodo(newtodo)把添加的数据传回去给APP

④在APP的addTodo方法中，利用unshift在数组开头添加数据

⑤最后在myheader中的add函数，利用e.target.value=''把用户输入设置为空

(但e.target.value=''属于亲自操作DOM，违背了原则，所以应采用第二种获取数据方法：v-model)

⑥.添加输入框限制 myheader

在add方法中，若用户输入为空，则return，trim()去掉输入的两边空格

5.复选框勾选不改变todos.done中数据，所以要设置成可改变

做法：用户勾选/不勾选，应可获得对应的数据id，再根据该id更改数据中的done，给它取反即可

①获得点击复选框相对应的数据id：给复选框添加change事件,同时要传入id数据

②把id传给APP：先在app中添加方法checktodo，传入id，利用foreach遍历数据，找到和传入的id相同的数据，把数据的done取反（但APP为爷爷，item为孙子，孙子把id传给爷爷，这里要利用全局事件总线）
③安装全局事件总线

④ APP组件收数据，item组件发数据，收数据的APP应绑定事件总线上的自定义事件（在挂载的时候绑定，在销毁前解绑）

⑤item组件进行事件触发

方法二，直接利用v-model双向绑定（但这样修改了props传进来的对象里的一个属性值“done”）

6、删除功能

做法：点击删除按钮，获得相对应数据的id，可利用confirm进行进一步交互，通知APP组件将对应的id数据过滤掉（孙给爷传数据，也要利用全局事件总线）

问题三：

点击编辑框，文字变成输入框后自动获取焦点，直接写会由于vue会等所有内容修改后再重新解析模板，导致input框还没有出现，focus的调用没有效果，因此必须借助$nextTick

7、底部统计功能

①footer组件要获得todo数据，APP给footer传数据（父给子传，用props）

②计算数据done值为true的数量，可用reduce方法来实现，

8、底部交互

①全选按钮：只有doneTotal和todos.length相等时勾选，并且没有todo数据时不勾选

②没有数据时footer组件要隐藏，可根据todo.length来判断数据有无

③点击全选，全部数据的done都要变为true，footer组件通过e.target.checked获得全选按钮的Boolean值，然后在APP组件中将所有数据的done值改为该Boolean值（父给子传数据）

方法二：全选按钮直接用v-model绑定isAll，由于isAll是计算属性，v-model绑定后涉及到修改内容，所以要写成完整模式

④清除所有已完成：绑定clearAll事件，不用传参数，只需告诉APP组件将所有done为true的数据过滤掉（子给父传信息）

9、浏览器存储

做法：利用watch对todos数据进行监视，把最新的todos数据存储在localstorage中，在data数据中，要用localstorage的get方法读数据。

注意事项1：初始数据为null时，是读取不到length长度的，所以应加一个条件：若为空数据，则data返回【】

注意事项2：复选框勾选后，浏览器刷新后不会保存，原因：watch没有开启深度监视，检测不到todo.done的变化

10、编辑功能

思路：点击编辑按钮，出现input框，失去焦点时表示编辑完毕，input框输入的内容变成文本模式。
做法：
①点击编辑，todo.isedit来表示是否处于编辑状态。首先要给todo添加一个isedit属性，（利用$set追加属性，当todo有isedit属性时，即第二次点击编辑时只需将todo.isedit值改为true即可）