Vue实现TodoList任务列表案例
发布时间
阅读量：
阅读量
一、初始化vite项目：
npm init vite-app todoList
npm instal5
二、梳理项目结构：
1）重置index.css中的全局样式；
2）重置App.vue组件的代码结构
三、封装组件
1.封装TodoList组件：
1）创建并注册TodoList组件
2）渲染列表组件（基于bootstrap)
1.在 main.js 入口文件中，导入 bootstrap.css 样式表。
2.在 App 组件中通过 list 属性，将数据传递到 TodoList 组件之中，为了接受外界传递过来的列表数据，需要在 TodoList 组件中声明props 属性。
3.渲染列表的DOM结构
通过 v-for 指令，循环渲染列表的 DOM 结构
通过 v-if 和 v-else 指令，按需渲染 badge 效果
通过 v-model 指令，双向绑定任务的完成状态
通过 v-bind 属性绑定，动态切换元素的 class 类名
2.封装TodoInput组件
1)创建并注册TodoInput组件
2）基于 bootstrap 渲染组件结构
3）通过自定义事件向外传递数据
3.封装TodoButton组件
1)创建并注册TodoButton组件
2）基于 bootstrap 渲染组件结构
3)通过props指定默认激活的按钮
4）同步数据
需求分析：
父 -> 子 通过 props 传递了激活项的索引（ active ）
子 -> 父 需要更新父组件中激活项的索引
这种场景下适合 在组件上使用 v-model 指令 ，维护 组件内外数据的同步 。
5）通过计算属性动态切换列表的数据
需求分析：
点击不同的按钮，切换显示不同的列表数据。此时可以根据当前激活按钮的索引，动态计算出要显
示的列表数据并返回即可！
四、运行结果
全部评论 (0)
还没有任何评论哟~