一个简单的 vue-todolist Demo

vue-todolist

Hello ,在上次的博客(“前端程序员的一些有学习借鉴作用的网站”)中提到会po出自己做的todolist的demo,哈哈。历经不知道多长时间,终于做出来了,现在就po出来给大家分享一下,这个demo已经上传到自己的服务器上了(www.lglzy.cc/todolist)。还有很多bug,需要改进。但基本功能已经实现啦。闲话不多说,进入正题。

1.初次进入页面时,没有建立任何事件
2.第一个事件添加之后,默认状态是未完成的,底部显示为叉叉表示未完成
3.事件完成的话点击底部按钮,便会更改事件状态到已完成
4.点击右下角箭头会滑出有两个按钮的侧栏,并可以选择编辑此事件,或删除
5.点击编辑按钮,会切换到表单页面,并可以进行修改。再次点击右侧保存按钮,即可保存修改后的内容
6.点击Add New 按钮,进行新建事件,在弹框中进行编辑
7.添加完新的内容之后将会默认为未完成状态。

以上是这次要介绍的demo的截图。需要提到的几个点是

1.使用的是vue.js

2.数据存储用的是localstorage把数据存到浏览器中

3.页面样式使用bootstrap编写

4.这个demo是在慕课网学习vue.js时跟着视频学习的,然后根据自己的一些理解进行改进,对UI稍微做了一点优化。。

博主第一次分享自己的小玩意,有不足望多指教。欢迎大神来虐~

代码在GitHub上可以看到https://github.com/luogao/vue-todolist

原文出处Roy's Blog :http://www.lglzy.cc/2017/02/06/一个简单的-vue-todolist-demo/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 23,202评论 8 124
  • UI组件element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于...
    董董董董董董董董董大笨蛋阅读 8,586评论 6 123
  • 快速书写十五分钟,突然觉得内心有个小宇宙,很想要爆发。不知道是不是平时不说话压抑得太多,感觉内在有一张嘴不停在说。...
    风雨无阻ylxq阅读 239评论 1 1
  • 其实我知道也许某一天你会理都不理我,也许某一天你会见都不见我,哪怕我受再重的伤,对你来说也许只是一个熟悉的陌生人罢...
    淡定xx阅读 133评论 0 0
  • 书籍类型:时间管理类,提升职场技能的书 一、时间的数据 1、浪费的时间、集中精力工作的时间,这两者占一天工作中的多...
    通关怪我咯阅读 372评论 0 0