小例--vue的todolist

知识点

1.v-on事件

.keyup， 从特定键触发时才触发回调，可以通过键别名或代码绑定;

<!-- 键修饰符，键别名 -->

<input @keyup.enter= "onEnter" >

<!-- 键修饰符，键代码 -->

<input @keyup.13= "onEnter" >

.dblclick//双击时触发

.blur//失焦时触发

2.computed取值get,设置set,默认get，更多解读 小例音乐盒

3.v m.$nextTick( [callback] )， DOM 更新循环之后执行调延

4.vm.$refs,功能类似于getElementsByTagName,前者返回数组，后者返回类数组

.在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；

.如果用在子组件上，引用就指向组件实例：

.$refs 只在组件渲染完成后才填充，并且它是非响应式的。

5.,根据条件找到某项，或某项下标，接收一个回调函数

.find()//返回第一个符合条件的元素，不符合undefined

.findIndex()//返回第一个符合条件元素的下标，不符合-1

6.window.οnhashchange=function(){}//监测hash变化时触发

7.localStorage.getItem（取缓存数据）localStorage.setItem（存数据）

.localStrorage存储的是文本

.JSON.stringify()//存的时候要将string转为json字符串

.JSON.parse()//取的时候要将json转为可用的对象

8.vm.$watch(prop，function(newVal，oldVal){})//

.第一个参数为监控的属性名或属性的路径

.常用写法

.深度监控（没有深度监控的话，对miaov的监控监测不到a的变化）；

功能

1. 增

2.全选

3.删除，从当前下标开始，删除一个

4.双选进入编辑状态，自动获取焦点

5.编辑完成，编辑完成为空时移除，编辑取消

6. 根据hash不同，过滤渲染的数据

a. 全部任务

b. 完成的任务

c. 未完成的任务

7.存储数据

思考

1.编辑函数，修改数据后马上获取焦点无效果

原因：数据修改了，但是DOM还没来的及更新，焦点在dom没更新前就聚焦了，因此更新后没效果

解决：vm.$nextTick（）

2.前者只能监控到list变化，但是list下的checked监控不到

转用深度监控

3.当编辑为空时，并enter完成编辑时，会同时触发enter和blur事件，也就是editDone会执行两次

eg：

li a

li b

li c

第一种情况：li上没有唯一key值，dom结构就地复用

清空enter第一个li ：a被删

第一次editDone执行removeTodo（‘li a'），执行splice（0，1），li a消失，此时就地复用规则使 得li b顶替了li a的位置

第二次editDone执行，由于li b内容不为空，不执行删除

清空enter最后一个li：bc同时被删

第一次editDone执行removeTodo（‘li c'），执行splice（2，1），li c消失,由于是最后一项，所以没有顶替者

第二次editDone执行removeTodo（‘li c'） ，因为li c不存在了返回-1，执行splice（-1，1），最后一项li b被删除

第二种情况：li上有唯一key值，dom结构不复用

清空enter第一个li ：ac被删

第一次editDone执行removeTodo（‘li a'），执行splice（0，1），li a消失，由于key值唯一不就地复用，无人顶替a

第二次editDone执行，由于li 不不存在，执行splice（-1，1），最后一项被删除

其他以此类推

解决：

优化

1.获取焦点由原生js方法

升级=》vm.$refs

2.判断hash值为那种情况，用if else

升级=>存个对象，三个中哪个存在就叫哪个，不存在的直接为all

3.过滤list，用switch

升级=>再次升级filterArr对象，存hash，筛选共用