5体系化Vue再学习——Todo-list案例

界面功能展示

1、添加待完成事项

2、完成后可删除事项

开发步骤

一、实现静态组件：

1. 根据结构，将页面分为：Header、List、item、footer 组件。
2. 根据样式逐个将静态页面写完

二、展示动态数据

1. 定义数据类型
2. 确定数据保存

三、数据交互

一、实现静态组件

header

footer

List

Item

样式设置根据实际业务需求进行设置

二、展示动态数据

 动态数数据我们设置为这样的对象结构。

三、数据交互

1、数据输入

（1）回车调用add方法

（2）在生成id时，可以通过uuid去生成，uuid是根据 电脑mac地址、时区等信息，生成一个绝对不重名的id，但uuid，有点大，我们这里通过nanoid去处理

2、子组件间数据传输

这里，我们在header中获取了数据，单数需要将数据传输到list中，对此我们高级的方法有很多，如：全局总线、vuex等，但我们这里先用最简单的基础数据传输方式：header把数据给父组件，父组件再传给list。

 在这里父子间的数据传输需要在父组件中申明一个函数，然后由子组件调用对应的函数给数据给父组件。

父组件设置函数并传入子组件

 子组件申明并调用

3、孙子爷爷组件间数据

 对于item选中后的check数据，需要进行传递

APP组件

 list组件：

自己不用，直接下传

item组件

 

 违规但可行的方案：

违反了props中的属性只能读不能改的原则。利用v-model双向绑定进行修改。

 这里的数据传递关系为：

当item数据修改了，因为是通过v-model绑定的，则会引起todo的数据改变，而todo是list组件通过props传入的，则list的组件中todo数据改变。

正常操作的方案：

把checkTodo一层一层传到子组件，之后调用。

4、底部全部完成

在配置底部全部完成的按钮，我们可以通过设置v-model的get、set方法实现

 在computed中设置计算属性。

• 四、总结