Saber 酱的抱枕

前些时候学习 Vue.js，做了个 todolist（待办事项），可以把自己要做的事情写上去做个备忘。大致效果如上。

这是一个简单的单页应用，你可以直接在线使用。

Github 地址

功能介绍：

您可以自由的添加、删除事项；切换完成状态；重命名；视需要设置定时提醒。
默认没有背景图片，因为用户可以自己设置背景图。（右下角设置区域）
默认有一个提醒铃声，用户也可以自行更改。
本页面会保存工作状态，关闭页面也不会丢失数据。 重新打开页面就可以继续使用了。
所有数据存储在用户本地，不收集用户信息。（话说我哪来的用户啊）
其他详见使用说明。（右下角设置区域）

兼容性：

Chrome：完全兼容；
Firefox：不完全兼容；（定时提醒功能不可用）
Edge：完全兼容；（感谢w君的测试）
其他浏览器：未测试。

Firefox 的兼容性问题都出在定时提醒上。问题 1 是 Firefox 不能像 Chrome 那样，可以用一个输入框就输入时间和日期（参见此处）。问题 2 是 Firefox 在该播放铃声的时候没有播放。

问题 1 可以解决，但是麻烦；问题 2 没有头绪。所以我就没有去修复这些问题。也许未来会继续完善（望天）。

其最满意的功能大概是换背景功能（换装游戏？）。遗憾的地方是我办公的电脑没有音响，所以其实我是听不到铃声提醒的（那我做这个功能是……？）。好吧不要在意这些槽点啦~ 如果有人愿意使用我会很开心的啦~ (*^▽^*)

记录一些学习经验：

变量需要用分隔符的话用下划线 _ 最保险。用 - 的话在模板里有时会被当成减号。

组件的命名不推荐使用大写。有大写的话会被自动转换成带分隔符的小写，如组件名为 myLi，那么在页面中使用时需要写成 ，这样看起来不一致。

button 的鼠标点击会触发 click 事件，而按 enter 会同时触发 click 和 enter 事件，所以绑定时只需要绑定 click 就行了，点击或者按 enter 都可以兼顾。

v-for 出来的元素，在操作它绑定的数据时，不需要先获取v-for的index了，因为可以在传参的时候直接传递这个item

Vue.nextTick()
获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码。
在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中。

Vue.js 制作的待办事项 todolist