Vue | TodoList 案例【完整过程】

已于 2022-07-21 12:07:21 修改
阅读量2.8k 收藏 35
点赞数 6
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2022-07-19 10:55:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/muziqwyk/article/details/125851268
版权
本文详细讲解如何使用Vue.js实现一个完整的TodoList应用。从静态组件的拆分到动态数据的展示，再到功能实现，如按回车添加todo、勾选状态变化、删除、统计、交互、本地存储、自定义事件和全局事件总线等。同时涵盖了组件间的通信、数据绑定和动画过渡等关键点。
摘要由CSDN通过智能技术生成

文章目录


在这里插入图片描述

实现静态组件

拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
在这里插入图片描述

  • 创建组件
    在这里插入图片描述

  • 在App.vue 里引入组件并注册组件
    在这里插入图片描述

因为item 是在List 里面的，所以要在list 里面 引入 item在这里插入图片描述

  • 然后将静态页面都复制到App.vue 里面，template里面放的是html中的结构，style里面放的是样式在这里插入图片描述
  • 读代码，分析结构
  • 开始拆分复制过来的html结构
    把App.vue里的头部结构拿走，然后立即在App.vue里面写上<MyHeader/>，在这里占位，然后去MyHeader.vue里面的template结构里粘贴头部结构
    以此类推Footer，list，item在这里插入图片描述
    完成图
  • 开始拆分复制过来的css结构
    看注释，base是公共区域的，放在App.vue里面，然后把Header，Footer，List，Item分别拿到放到组件里面，然后加上scoped样式在这里插入图片描述
    在这里插入图片描述

展示动态数据

  • 考虑数据的类型，名称，以及怎么存放
    这里是todo案例，包含你要做的事情，是否完成，所以用对象来包裹最好，每一件事情item都是一个对象，所有事情list用数组来存放在这里插入图片描述

  • 数据存放在哪个组件
    这里是列表，所以存放在List里面在这里插入图片描述

  • 遍历数据在这里插入图片描述
    在这里插入图片描述

  • 传递和接收数据在这里插入图片描述

  • 传递数据从List到Item
    在这里插入图片描述

  • 接收数据
    在这里插入图片描述

  • 插值语法渲染数据

最低0.47元/天 解锁文章
不爱吃菜的蔡菜
关注
专栏目录
vue实现ToDoList简单实例
08-31
主要为大家详细介绍了vue实现ToDoList简单实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue的todoList案例
m0_55916923的博客
08-30 1368
todolist案例
Vue实现todo-list
最新发布
qq_58154778的博客
08-04 496
1：创建一个任务List2：删除一至多个任务list3：全选/反选任务list。
Vue实例-Todo-list案例
anxiangzsq的博客
08-10 1019
基本效果图组件化编码流程(通用)1.实现静态组件:抽取组件，使用组件实现静态页面效果2.展示动态数据:2.1.数据的类型、名称是什么?2.2.数据保存在哪个组件?3.交互一从绑定事件监听开始。
（Vue案例）TodoList
qq_53388056的博客
12-07 681
（Vue案例）TodoList components里的MyHeader.vue components里的MyList.vue components里的MyItem.vue components 里的 MyFotter.vue 总结
vue实现todolist笔记
weixin_45732235的博客
03-19 3212
文章目录前言一、静态页面二、初始化列表三、添加演示四、勾选演示五、删除演示六、底部统计演示七、底部交互演示所有代码总结 前言 使用Vue实现简单的todo-list案例 🌴学习Vue只用通过不断的练习，和使用代码才能够熟记，我跟着视频敲了一遍后，想着要自己再敲一遍，捋一下逻辑，让自己记得更熟。 一、静态页面 🌾首先已经有了todolist的静态页面的html以及css文件，想办法用组件来实现就要进行拆分，看着静态页面思考一下拆分几个子组件，最后都放入父组件App.vue 🌾分好之后，确定哪个组件包含其
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
vue-todolist案例
03-08
在这个"vue-todolist"案例中，我们可以看到一个基于Vue的简单待办事项列表应用。这个案例涵盖了Vue的基础知识，包括组件化开发、数据绑定、事件处理等核心概念。 1. **组件化开发**：Vue的核心特性之一就是组件化，...
vue3+ts入门（todolist案例）
02-10
在这个"vue3+ts入门（todolist案例）"中，我们将探讨如何结合 Vue3 和 TypeScript 创建一个简单的待办事项列表应用，即 Todolist。 1. **Vue3 的主要更新**： - **Composition API**：Vue3 引入了 Composition API...
Vue TodoList案例
09-02
在本"Vue TodoList案例"中，我们将深入探讨如何利用Vue.js实现一个功能丰富的待办事项列表应用。这个案例是基于知名的TodoMVC项目（http://todomvc.com/examples/vue/），该项目旨在通过在不同前端框架下实现相同的...
Vue：实现TodoList案例（尚硅谷）
热门推荐
做一只猫的博客
08-04 1万+
TodoList案例
VUE小案例---todolist
CathyleeQ的博客
03-11 3271
文章目录1. 模块拆分![在这里插入图片描述](https://img-blog.csdnimg.cn/e6764c9f72444133ad19f131e2cfc866.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAUmVhZHkgdG8gZ28=,size_20,color_FFFFFF,t_70,g_se,x_16)2.静态页面搭建1.案例目录2.主页 index.html3.main.js4.A
Vue实现 TodoList
X-77
12-29 6230
手把手教你完成TodoList，定制专属待办事项！
TodoList经典案例①
十八岁讨厌编程的博客
06-30 2909
如下图所示： 有几个小细节：当所有事件都被勾选之后，下面已完成前面的框也会自动勾选只有在至少一个事件被选中之后，才会出现“清除已完成任务”的按钮 当列表中没有待办事件的时候，已完成的那一行整体都不会显示 添加的事件出现在列表的最上面使用前端框架Vue实现 且不使用全局事件总线、消息订阅与发布的有关知识首先根据组件化我们肯定是要对这个待办列表进行拆分的。当然这里有很多拆法，我推荐两种：在这里我使用第二种方式，我们将每一个组件命名： 注意点： 注意点： 注意： 在做这一部分的时候，难点肯定是怎么作用到具体的元
Vue实现todolist
qq_58705070的博客
11-13 590
todolist，又是todolist
利用vue做一个简单的todolist
qq_50280292的博客
11-03 2189
vue
用vue.js写案例——ToDoList待办事项 （步骤和全码解析）
m0_73490019的博客
04-08 9186
首先在ToDoMain组件中声明并触发自定义事件，传递参数 6 id，接着在App组件中监听自定义事件，当自定义事件被触发时，执行对应的方法，进 行删除操作，删除任务的具体实现步骤如下。单击切换状态区域时，默认状态为all，即显示全部任务，当状态切换为active时， 显示未完成的任务，当状态切换为completed时，显示已完成的任务。② 新建并封装组件。App 组件为根组件，数据在App组件中，现在需要将App根组件中的初始数据传递 到列表区域，ToDoMain组件中。
ToDoList待办事件（Vue实现）详解
weixin_55355282的博客
09-15 1600
组件化编程流程：（1）拆分静态组件：组件按照功能点拆分，命名不与html元素冲突。（2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用（放在组件自身），还是一些组件在用（放在共同的父组件上面）。（3）实现交互：从绑定事件开始。props适用于：(1).父组件=>子组件 通信(2).子组件==>父组件通信（父组件先给子组件一个函数）使用v-model时要切记：v-model绑定的值不能使props传过来的，因为props是不可以修改的。
TodoList案例
m0_45219210的博客
07-08 1865
在vue脚手架的基础上做案例， 在src文件夹下 新建文件main.js,App.vue。新建文件夹components，里面新建Header.vue,List.vue,Item.vue,Footer.vue，（分别代表不同的组件）编写组件的结构,样式。 这里面的List相当于Item的父组件 组件之间的层级结构图 组件使用步骤 1、引入 2、注册 分别为全局注册和局部注册 3、写组件标签 main.js // 引入Vue import Vue from 'vue'; // .
vue todolist完整案例
03-27
以下是一个完整的Vue.js TodoList应用程序示例： HTML模板 ```html <h1>Todo List <button>Add (task, index) in tasks" :key="index"> <span>{{ task }} (index)">Remove ``` Vue实例 ```...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值