Todo-list案例
组件化编码流程（通用）
1.实现静态组件：抽取组件，使用组件实现静态页面效果
就是拆组件
把给好的代码一股脑的复制到这个页面中，然后拆结构
把css也拆分一下
初始化列表
2.展示动态数据：
数据的类型，名称是什么？
数据保存在哪个组件
通过遍历数组的方式来遍历MyItem数组
动态绑定数据。
添加
用uuid这个全国唯一的标识，因为uuid这个包太大了，我因此使用它的精简版nanoid
npm i nanoid
因为它返回的是一个函数，因此可以直接使用
有一说一确实好用
就是视频不让兄弟直接的传递，因此我们要用别的方法了
把todo放到app里
黄色的线实现了
传一个函数进去，然后把header里面的数据当做形参传回去
就是儿子给父亲传参数，父亲需要提前给儿子提供一个函数，儿子里面调用函数，函数这个定义本身就在父亲里面，那么父亲就能拿到这个值
可以添加了
优化完成
勾选
数据的双向并没有绑定
绑定click事件
现在先使用逐层传递
视图影响了数据的变化
删除
实现鼠标移入效果
实现删除功能
和上面的勾选todo的做法一样
底部统计
复习了reduce方法的使用
底部交互
总结
* 组件化编码流程：
(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
1).一个组件在用：放在组件自身即可。
2). 一些组件在用：放在他们共同的父组件上（``状态提升）。
(3).实现交互：从绑定事件开始。
* props适用于：
(1).父组件 ==> 子组件 通信
(2).子组件 ==> 父组件 通信（要求父先给子一个函数）
* 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
* props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
