TodoList经典案例①

TodoList经典案例①

文章目录

​​案例介绍​​​​案例要求​​​​案例分析​​​​代码实现​​

​​App组件​​​​headers组件​​​​tasks组件​​​​task组件​​​​record组件​​

​​案例总结​​

案例介绍

如下图所示：

有几个小细节：

案例要求

使用前端框架Vue实现 且不使用全局事件总线、消息订阅与发布的有关知识

案例分析

首先根据组件化我们肯定是要对这个待办列表进行拆分的。当然这里有很多拆法，我推荐两种：

在这里我使用第二种方式，我们将每一个组件命名：

红色部分组件 – headers.vue绿色部分组件 – tasks.vue粉色部分组件 – task.vue蓝色部分组件 – record.vue

代码实现

App组件

注意点：

考虑到有几个组件可能会使用到tasks数据，所以我们把它放到这些组件的父组件App中，如此便于数据的传递tasks里面有几条示范数据。在实际时候删除，否则可能会报错。按照代码逻辑，如果你删除一个，再添加一个，就会出现两个id为3的数据，那么操作会发生混乱。我们使用props来实现父组件向子组件传递数据的功能如果子组件要向父组件传递数据，我们首先要在父组件中定义一个方法，传递给子组件，再让子组件调用即可虽然使用的是data的函数式，但是这里的tasks也是可以直接使用props传递的展示不需要修改的数据直接props就行；如果要改变数据，数据在哪里方法就在哪里

headers组件

注意点：

在输入完待办事件，按下enter添加之后，输入框要清空

tasks组件

注意：

使用了v-for的标签是不能当作根标签的，所以这里我使用div再包裹一层

task组件

record组件

注意：

v-show里面如果你这个表达式是一个方法，那么这个方法是要带()的

案例总结

总结TodoList案例

组件化编码流程：​ (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。​ (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：​ 1).一个组件在用：放在组件自身即可。​ 2). 一些组件在用：放在他们共同的父组件上（状态提升）。 (3).实现交互：从绑定事件开始。props适用于：​ (1).父组件 ==> 子组件 通信 (2).子组件 ==> 父组件 通信（要求父先给子一个函数）使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。