人生实验室

# 给自己做一个todolist应用

根据自己的需求，给自己做一个todolist，放到个人博客上实际使用。
也借此进一步熟悉vue.js 作为demo上传到github，不要求一步完善，不好可以再改嘛，不然失去了传到github的本质意义

写到不懂时，可以借鉴：
https://www.cnblogs.com/yjzs/p/13173052.html https://blog.csdn.net/wangjiaohome/article/details/79910584

# 界面和功能初步设计

———————————界面草稿开始

【输入框：要做什么呢？】【按钮：提交】

（鸡汤：如）行到水穷处，坐看云起时。

进行中 3 【按钮：全部清除】

  • [ ] 事项1 X
  • [ ] 事项2 X
  • [ ] 事项3 X

已完成 4 【按钮：全部清除】

  • [x] 事项4 08:48 X
  • [x] 事项3 07:17 X
  • [x] 事项2 06:30 X
  • [x] 事项1 05:48 X

———————————界面草稿结束

功能备注：

  1. “进行中”事项点击可修改、可拖拽排序
  2. “已完成”事项点击可修改，但不可以可拖拽排序
  3. “全部清除”按钮要明显且隔远一点，不要误点
  4. 显示各个事项数量
  5. 存储在localStorage里
  6. “进行中”输入框，回车可以提交
  7. 先完成功能、再改bug、再做样式

# Vue事件修饰符.prevent

🍎 加了个.prevent之后，把删除数组后checkbox的bug改好了！原理是什么呢？

️.prevent不是js方法，是Vue事件修饰符！很大收获。

备注：用JavaScript的event.preventDefault()试了没有用。

Vue事件修饰符（二）.prevent .passive

# 回车可以提交

回车键盘事件
key值忘记写成:key，结果重复了
sublime 新文件格式快捷键 mac：command + shift + p

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
1
2
3
4

# 显示完成时间

🍎 学习了：

  1. 获取时间
  2. 给数组和对象添加属性、插入数组
  3. 在获取时间的方法中，还学习了箭头函数
    js中 => 的含义：=>是es6语法中的arrow
    function (x) => x + 6 相当于 function(x){ return x + 6; };

# 在markdown里放vue组件

在markdown里放vue组件，看文档https://vuepress.vuejs.org/zh/guide/using-vue.html
所有在 .vuepress/components 中找到的 .vue 文件将会自动地被注册为全局的异步组件，如：
. └─ .vuepress
     └─ components
        ├─ demo-1.vue
        ├─ OtherComponent.vue
        └─ Foo
             └─ Bar.vue

你可以直接使用这些组件在任意的 Markdown 文件中（组件名是通过文件名取到的）：
<demo-1/>
<OtherComponent/>
<Foo-Bar/>

具体怎么放：https://blog.csdn.net/qq_14863671/article/details/94005585

# 使用localStorage

# Window localStorage 属性

Window localStorage 属性

  • localStorage.getItem（取缓存数据）
  • localStorage.setItem（存数据）
    如：localStorage.setItem("lastname", "Smith")
  • localStorage.removeItem(“a”)(移除数据)

注意：.localStrorage存储的是文本
.JSON.stringify()//存的时候要将string转为json字符串
.JSON.parse()//取的时候要将json转为可用的对象

# mounted 与 window is not defined

ReferenceError: window is not defined
"ReferenceError: localStorage is not defined"

最有用：（解决了问题）https://segmentfault.com/q/1010000011016483
好像也可以，还没试过：https://forum.vuejs.org/t/localstorage-is-not-defined-when-using-with-vue-server-renderer-and-node/4179/5

created() —— 出问题，要改成 mounted https://blog.csdn.net/sunhuaqiang1/article/details/86702926 https://www.cnblogs.com/Geooo/p/11279500.html

# 为什么是用 let，不是var 或 const？

# 调用方法，前面也要加this.

# 只看已完成，只看未完成，查看全部

思路：
v-show 或者 v-if——最后用了v-if
下拉框或者单选checked——最后用了radio
watch 或 computed——最后用了methods
http://www.divcss5.com/html/h490.shtml https://blog.csdn.net/kermit_father/article/details/82723240
https://bbs.csdn.net/topics/320019711
https://jingyan.baidu.com/article/597a0643516738312b5243fe.html

# 点击修改

# 思路

  • li内同时存在显示事项的span和input，显示span，隐藏input
  • 双击li，隐藏span，出现input
    1. 声明一个showChangeTodo，一个showChangeDone，初始值默认false，双击取反值，先做showChangeTodo
    2. bug：做了之后所有的li都变成input了，需要showChangeTodo成为数组，然后取index，只隐藏和显示当前的
  • 输入完，回车，判断
    1. 判断1：内容为空，删除此条
    2. 判断2：不为空，隐藏input，显示内容为li
    3. 记得储存进localStorage

# dblclick 双击事件

dblclick，很容易漏掉中间这个“l”，事件如果没有触发，先找这个原因。

# v-if和v-show

https://www.jianshu.com/p/b9623407da6f

v-show小结：

  1. v-show仅仅控制元素的显示方式，通过display属性的none
  2. 当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销

v-if小结：

  1. v-if会控制这个DOM节点的存在与否。
  2. 如果在运行时条件很少改变，则使用 v-if 较好。

# 数组添加、修改、删除

https://www.cnblogs.com/rong88/p/11947252.html https://www.cnblogs.com/bigerf/p/6008304.html

用了比较麻烦的方式写完了，希望后面能改进成比较节省性能的方法。

# 拖拽

# 字数限制

# 做样式，测兼容性，改bug

# 上传到github

← JavaScript 30 →