前些时候学习 Vue.js,做了个 todolist(待办事项),可以把自己要做的事情写上去做个备忘。大致效果如上。
这是一个简单的单页应用,你可以直接在线使用。
功能介绍:
您可以自由的添加、删除事项;切换完成状态;重命名;视需要设置定时提醒。
默认没有背景图片,因为用户可以自己设置背景图。(右下角设置区域)
默认有一个提醒铃声,用户也可以自行更改。
本页面会保存工作状态,关闭页面也不会丢失数据。 重新打开页面就可以继续使用了。
所有数据存储在用户本地,不收集用户信息。(话说我哪来的用户啊)
其他详见使用说明。(右下角设置区域)
兼容性:
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
-
Microsoft EdgeWindows 挺好用的。已经设置成主页(`・ω・´)
好东西,可以防鸽(滑稽)