37 组件化编码流程(通用)Todo-list案例
本次通过一个案例：Todo-list案例，来演示组件化编码通用流程
功能：通过输入框添加一个待办，每一个待办里面都有对应的删除按钮，可以通过删除案例删除，这样待办列表中就会被清除，最下面会根据勾选的待办个数显示，还有按钮全分别部删除和全部勾选
37.1 实现静态组件
首先实现静态组件：抽取组件，使用组件实现静态页面效果
根据需求拆分组件，并一一创建命令，由App管理,并且写入对应的样式
注意：待办是一个组件，每一个待办项应该是它的字组件，这样比较合适
最终效果就是这样的,这样一个静态的页面就完成了
37.2 初始化列表
静态组件界面以及实现了，接下来就死展示动态的数据
所谓的动态数据就是把全部的数据放在一个容器里面进行管理，方便操作，所以我们要考虑数据的类型，名称是什么，以及要保存在哪个组件里面
这里用数组存比较好，数据里面是一个个的对象，存放在list组件比较好，因为是由list进行展示的
data() { return { todos:[ {id:'001',title:'吃饭',done:true}, {id:'002',title:'睡觉',done:false}, {id:'003',title:'打代码',done:true}, ] } },
数据集合定义好了之后，就可以去循环展示了
只需只需要写一个组件，通过v-for指令去循环展示，但是名称xxx，因为还没有用到对象里面的属性
这时候就可以使用props进行传参和接收了
使用插值语法展示即可
名称是出来了，但是如何判断复选框是否需要被勾选呢？
我们可以通过:checked=""的方式判断是否需要，之前定义对象的时候，专门定义了一个done的属性是否需要勾选，现在就可以用上了
done为true的都勾选上了
至此，动态展示数据就完成了
37.3 添加待办
接下来要完成的是在输入框输入待办事项然后回车，就会添加一个待办到列表里
首先要给输入框绑定一个keyup事件，并且要加上enter修饰，表示只要按下回车键才能触发
如何获取到输入的内容呢？有两个办法，这里我采用的第二种
1 使用v-model进行绑定属性，然后再组件里面定义data中这个属性，使用this获取即可
2 使用函数中的参数event,使用e.target.value也可以获取到
因为列表中存的都是对象，不仅有名称，还有id等属性，所以需要需要将输入的内容包装成一个对象放入到列表中
注意：由于需要生产id，如果有服务器可以借助数据库，但是这种单击版本需要自己生成id，可以借助第三方工具生成，比如uuid，但是uuid库比较大，而且生成的id比较长，所以有一个简化版本的叫nanoid,下面就去安装使用它
打开终端，输入npm i nanoid,然后回车，由于这个库非常小，所以下载也很快，大概3-5秒
npm i nanoid
下载完之后就可以引用了，nanoid使用了分别暴露的形式
// 引用nanoid第三方库 nanoid使用了分别暴露的形式 import {nanoid} from "nanoid";
nanoid是一个函数，直接使用它就可以获取到id
可以看到获取到了随机id
这样就可以继续组织组装对象了
看下格式，没有问题
这时候又有一个问题，组件传递数据传不过去，也就是不通，虽然可以通过vuex解决，但是这里使用最老(笨)的方法解决，不把数据对象定义在list了，而是定义在App里面，这样有App管理传递
这样我们在App里面定义函数，传给需要使用的组件，组件使用的函数里面传入需要传递的参数即可
然后把接收的参数添加到列表中即可
添加成功
但是不够完美。输入框输入完之后应该置空，很简单
实现功能
如果什么也不输入，就会为空，也应该处理下
解决问题
37.4 修改勾选状态
修改勾选状态，首先需要获取到这个对象的id进行修改
两个事件都可以完成，分别是click(单击)和change(改变)事件
首先使用click完成，需要定义单击事件并且把id作为参数传递
上面使用click完成了，然后再使用change完成，写法都是一样的只是事件名称不同
既然id传递和接收没问题，就可以根据id去修改对象的done属性了
数据在哪，就在哪定义方法
测试没问题
还有一种更简单的写法，就是直接使用v-model进行双向绑定，虽然props是只读的不能修改，但是vue对它的监视不深，可以利用这个漏洞去在一些场景使用，但是不推荐，因为会违反原则，只不过vue没有检测到
37.5 删除待办
每一个待办当鼠标悬浮的时候后面都会有一个删除按钮，点击可以从列表中删除选中的待办
删除的时候会有一个确认框，如果确认删除就删除，如果取消就取消删除
分析需求：很简单，给删除按钮绑定id参数，根据id删除列表的元素即可
完善代码
然后就可以在App里面定义函数，在需要用的组件中使用即可
这里的删除其实是过滤,把当前id对应的todo进行过滤
测试发现，可以正常删除
37.6 底部统计
继续完成底部统计的功能
想要地步实现统计，就需要把数据对象集合给这个底部组件，然后使用数组的length就可以展示全部的待办数了
然后就是已完成如何展示了，这个逻辑稍微麻烦些，需要遍历对象判断done值，这时候用computed比较合适
它的实现方式有很多种，以下是最简单的
这样虽然可以实现，但是b格不够，想要升级可以使用ES6中的一个api:reduce
37.8 底部交互
把一键勾选和清除已完成任务完成
分别使用计算属性完成
然后就是全选或全不选
还可以使用v-model实现，我们可以使用v-model配合计算属性的完全格式进行优化
然后就是全部清除了，还是使用过滤器进行过滤
37.9 总结
1. 组件化编码流程：
(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
1).一个组件在用：放在组件自身即可。
2). 一些组件在用：放在他们共同的父组件上（状态提升）。
(3).实现交互：从绑定事件开始。
2. props适用于：
(1).父组件 ==> 子组件 通信
(2).子组件 ==> 父组件 通信（要求父先给子一个函数）
3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
