上图就是实现后的样子，可以实现记事本的基本功能，也可以当做备忘录来使用~
首先需要准备三个组件：
TodoHeader负责起标题和input文本框还有添加任务按钮
TodoMain负责显示任务列表
TodoFooter负责底部的任务数量合计还有一键清空任务
组件分别在App.vue里导入注册使用：
在App.vue里准备一个数组对象，用来存放记事数据：
利用组件通信的prop方法将App.vue里的数据传到TodoMain里进行渲染：
删除任务功能：
给button按钮绑定click事件，传入对应数据的id，并用$emit方法把id传给父组件App.vue，在App.vue里绑定自定义事件id，触发函数onDel，再用findIndex数组方法，返回对应id数据的下标，再使用数组删除方法splice将对应的数据删除。
添加任务功能：
给button按钮添加click事件，触发函数add，在data数据里设定一个属性inputValue，用v-model和input框进行双向绑定，再进行一个非空判断。然后利用$emit方法把inputValue的值传给App.vue，添加成功后清除input框的value值。
在App.vue里添加自定义事件add，触发函数onAdd，设定一个形式参数value，用来接收子组件TodoHeader.vue传过来的input框的value值，然后给list数据添加元素，id使用时间戳，可以保证数据唯一性，有效防止id重复，同时也方便删除时使用。
统计任务数量和一键清空任务功能：
在App.vue里将list数据传给TodoFooter.vue，任务合计数量可以用list.length来计算。 给清空任务按钮绑定click事件，触发函数clear，在该函数内，不用传任何数据给App.vue父组件，只需做一个自定义事件clear即可。
在App.vue里绑定自定义事件clear，触发函数onClear，在函数内将数据list变成空数组，就能实现清空任务功能
数据本地化存储
使用事件深度监听，当数据发生变化时，把list数据转成JSON字符串存到本地存储当中，在外部定义一个变量list用来存放死数据（也可以为空数组）。data函数里的list属性读取本地存储时，如果没有本地存储，则会等于外层定义的死数据list，如果有本地存储，则会优先读取到本地存储数据，用JSON.parse将JSON字符串转回数组对象类型。
