Saber 酱的抱枕

Fly me to the moon

05/21
2018
学习 软件

Vue.js 制作的待办事项 todolist

Vue.js 制作的待办事项 todolist

前些时候学习 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

    1. saber 文章作者
      Google Chrome 66Google Chrome 66Windows 7Windows 7

      因为本地存储空间一般只有几兆,如果你选择的背景图比较大,铃声可能就存不上了。反过来也一样。可以把大的那个东西换成个小的腾出空间,或者直接清除设置。

      回复
  1. locationiskey
    Microsoft EdgeMicrosoft EdgeWindowsWindows

    先测试了几个东西
    1.背景图片是没缩放还是怎,不在正中间,小图的大小也怪怪的
    2.清除事项后事项计数没有归零,虽然加新的之后是正确的而不会变成2→_→
    3.不知为何第一次点事项的勾时卡了一小会,后来就没事了
    剩下的等会再说

    回复
    1. saber 文章作者
      Google Chrome 66Google Chrome 66Windows 7Windows 7

      背景图片的方式是cover,你可以看看这篇文章的末尾部分:
      https://saber.love/?p=2330

      另外设置了水平居中,不过垂直方向上没有居中,是顶头的。另外如果屏幕是横向的,选择的图片最好也是横向的,竖向的效果不好。

      计数和卡顿,怀疑是兼容性问题。(罗永浩:又不是不能用.jpg)

      感谢w君的测试~整体上没有大的问题。不清楚 Edge 的本次存储空间是多大。目前浏览器给的空间都比较小,希望未来能再扩大些。

      回复