利用vue做一个简单的todolist

最新推荐文章于 2023-09-15 20:00:20 发布
最新推荐文章于 2023-09-15 20:00:20 发布
阅读量3.5k 收藏 4
点赞数 2
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fdark/article/details/70234051
版权

非常适合vue初级入坑的同学…… 整体结构简单，清晰明了。

主要使用了vue+webpack 完成的一个基本的todo list。

时间有点急只是简单
目前只有基础的功能， 添加，标记完成，删除。

git 地址

欢迎star。

https://github.com/FUF-HOME/TodoLists



整个项目虽小，但都是按照vue官方建议的规范去写，个人感觉代码规范性上还是不错的……

这个项目有很多练手的扩展性

利用local Storage去缓存数据，持久化到本地。

学习路途 不畏艰险~~~~
fdark
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用Vue完成一个简单的todolist的方法
01-19
看了两天的Vue，还是上手写一个简单的todolist更实用（文末有彩蛋）。 一、使用vue-cli脚手架快速搭建一个框架 利用vue-cli来自动生成我们项目的前端目录及文件，方法： npm install -g vue-cli vue init webpack ...
vue实现todolist笔记
weixin_45732235的博客
03-19 2893
文章目录前言一、静态页面二、初始化列表三、添加演示四、勾选演示五、删除演示六、底部统计演示七、底部交互演示所有代码总结 前言 使用Vue实现简单的todo-list案例 🌴学习Vue只用通过不断的练习，和使用代码才能够熟记，我跟着视频敲了一遍后，想着要自己再敲一遍，捋一下逻辑，让自己记得更熟。 一、静态页面 🌾首先已经有了todolist的静态页面的html以及css文件，想办法用组件来实现就要进行拆分，看着静态页面思考一下拆分几个子组件，最后都放入父组件App.vue 🌾分好之后，确定哪个组件包含其
Vue实现 TodoList
X-77
12-29 5973
手把手教你完成TodoList，定制专属待办事项！
Vue实现todolist
qq_58705070的博客
11-13 529
todolist，又是todolist
（Vue案例）TodoList
qq_53388056的博客
12-07 608
（Vue案例）TodoList components里的MyHeader.vue components里的MyList.vue components里的MyItem.vue components 里的 MyFotter.vue 总结
利用vue写todolist单页应用
08-31
有很多关于vue的todolist小程序，这篇文章主要介绍了 用vue写todolist单页应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现留言板todolist功能
12-12
本文，就利用这些基础知识来实现一个留言板， 老外把他称之为todolist. 第一步、使用bootstrap做好布局 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>&...
Vue实现简易TodoList
liaoai的博客
02-23 4736
文章目录TodoList案例分析App.vue功能实现：1.Header部分Header.vue2.List部分List.vue3.Item部分Item.vue4.Footer部分Footer.vue TodoList案例 （省略样式部分） 分析 分为四个组件 Header List Item Footer App.vue <template> <div id="root"> <div class="todo-container"> <div
Vue TodoList完整案例
09-05
案例根据 http://todomvc.com/examples/vue/ 编写 完成功能：完成了所有的功能，如：添加、双击修改、ESC键取消编辑、清除所有已完成任务、一键全选任务、自动聚焦，本地保存等等。
VUE小案例---todolist
CathyleeQ的博客
03-11 3172
文章目录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
ToDoList待办事件（Vue实现）详解
最新发布
weixin_55355282的博客
09-15 1007
组件化编程流程：（1）拆分静态组件：组件按照功能点拆分，命名不与html元素冲突。（2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用（放在组件自身），还是一些组件在用（放在共同的父组件上面）。（3）实现交互：从绑定事件开始。props适用于：(1).父组件=>子组件 通信(2).子组件==>父组件通信（父组件先给子组件一个函数）使用v-model时要切记：v-model绑定的值不能使props传过来的，因为props是不可以修改的。
Vue：实现TodoList案例（尚硅谷）
做一只猫的博客
08-04 8667
TodoList案例
Vue实例-Todo-list案例
anxiangzsq的博客
08-10 392
基本效果图组件化编码流程(通用)1.实现静态组件:抽取组件，使用组件实现静态页面效果2.展示动态数据:2.1.数据的类型、名称是什么?2.2.数据保存在哪个组件?3.交互一从绑定事件监听开始。
Vue实现简单的todolist
qq_46362763的博客
05-09 1195
1、在输入框中输入内容后点击添加，即可把内容添加到下面的列表中（如果内容为空则不添加） 2、点击复选框，实现选中或不选中效果（即完成或未完成） 3、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表 4、已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（用到了本地存储） 直接上代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&
Vue | TodoList 案例【完整过程】
不爱吃菜的菜菜的博客
07-19 2774
是要渲染的数据，一开始存放在List里面，然后发现我们现在还没有学从Header传数据到List，所以现在把要渲染的数据放到App.vue里面。这里是todo案例，包含你要做的事情，是否完成，所以用对象来包裹最好，每一件事情item都是一个对象，所有事情list用数组来存放。父亲需要提前给儿子一个函数[props]，儿子再调用这个函数，函数的定义本身在父亲里，父亲就能收到参数了。每一个事情都是独一的，生成的id也是，为了简便，引入了。考虑数据的类型，名称，以及怎么存放。，里面的每一个对象为。........
vue的todoList案例
m0_55916923的博客
08-30 1274
todolist案例
一个小项目带你了解vue框架——TodoList（简单实用易上手）
DecorateCC的博客
05-04 2581
你是否还在为繁杂的事情感到头昏脑涨？你是否还在将便利贴贴满整个桌面？本文就为你解决这个烦恼，使用vue框架做一个todolist，将事情整理的井井有条不再是一个遥不可及梦！让我们行动起来吧！
使用Vue3.0完成一个todolist
06-11
好的，下面是一个简单的 Vue3.0 Todolist 示例代码： ```html <h1>Todolist <button>Add (todo, index) in todos" :key="index"> (index)"> <span :class="{completed: todo.completed}">{{ todo....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值