案例展示：点击进入

步骤及其操作方法：

1、拆分基础组件

目前App.vue中有完整的一整个页面，首先的操作步骤是，将App.vue中的完整项目，拆分成不同的组件，我们将页面拆分为三个组件分别是 头部组件(TodoHeader) 中间组件(TodoMain) 和 底部组件(TodoFooter)
操作步骤：
1. 新建三个组件并命名TodoHeader TodoMain TodoFooter [见下图1]
2. 将App.vue中的文件分开，分别放置到三个组件当中使App.vue只剩下三个组件标签 [见下图2]
3. 引入组件 注册组件 使用组件

2、渲染待办事项

然后，我们要做的是，渲染待办任务的列表，我们只需要一个ul 和 li ，使用v-for循环渲染，将一个列表内的数据都渲染给待办列表（要注意的是，我们的待办列表和数据不在一个组件内，需要用到父子通信中的父传子）
操作步骤：
1. 检查父组件App.vue中是否存在有效的list数据，然后使用父传子:list="list"传给子组件 [见下图1]
2. 子组件使用props 接收数据并进行判断数据类型是否为list:Array [见下图2]
3. 之后，在合适位置使用v-for渲染，v-for="(item, index) in list" :key="index" [见下图3]
4. 使用模板字符串将v-for 渲染的数据 在合适标签上展示。 {{ item.name }} [见下图4]

3、添加任务

添加任务有两个需要操作的东西，第一是：输入框的操作，第二是添加任务按钮的操作。
第一项：首先输入框需要 v-model 双向数据绑定，然后需要将数据传输给父组件
第二项：需要给按钮添加点击事件和键盘事件，添加一个v-on的methods函数，将方法和数据传给父组件
操作步骤：
1. 首先给输入框添加 v-model 双向数据绑定，然后添加 data 数据 return v-model 的数据 [见下图1]
2. 然后，给按钮添加点击事件给输入框添加键盘事件，使用一个函数将数据和方法返回给父组件
3. 书写返回方法，需要返回给父组件所以使用 $emit 将方法和数据返回给父组件 [见下图2]
4. 父组件接受子组件传来的数据，并做添加操作，将数据添加到待办列表内 [见下图3]
5. 人性化设计：在输入为空时弹出警示框，在添加之后清空输入框 [见下图4]

4、删除任务

在用户点击删除按钮后，传入一个方法和数据给父组件，然后父组件直接进行删除操作（通过id来识别）
操作步骤：
1. 给删除按钮添加 点击事件并绑定一个方法函数（把方法和id数据传给父组件）[见下图1]
2. 父组件操作，根据id来删除待办列表的对应项目 [见下图2]

5、底部合计

将父组件的待办列表数据传给子组件，直接在合计位置添加 list.length
操作步骤：
1. 父传子，将待办列表数据传给子组件，子组件接受并判断数据类型
2. 使用模板字符串将 list.length 传进去

6、清空功能

给清空按钮添加点击事件，然后写一个方法函数，将方法和数据传给父组件，父组件进行删除功能
操作步骤：
1. 给清空按钮添加点击事件，将数据传给父组件
2. 父组件进行清空操作（直接将待办列表数组变为空）[见下图1]

7、持久化存储

watch深度监视list的变化然后往本地存储，进入页面优先读取本地数据
操作步骤：
1. list: JSON.parse(localStorage.getItem('list')) || 在list 后添加JSON本地读取的代码
2. ||表示如果没有本地存储则使用待办列表 [见下图1]
3. watch监视list的变化，检测到变化后进行本地存储 [见下图2]