一个简单的 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/