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）通过计算属性动态切换列表的数据

需求分析：

点击不同的按钮，切换显示不同的列表数据。此时可以根据当前激活按钮的索引，动态计算出要显

示的列表数据并返回即可！

四、运行结果

 源码地址：GitHub - uewui/project_3: 这是一个任务清单案例