vue-todolist完成成品。Vue-todolist基于Vue的TodoList示例。麻雀虽小，五脏俱全。技术栈Vue+localStorage+hash功能说明（使用说明）添加备忘录（输入标题回车添加，如果内容为空或只有空格会被清空，不添加任何内容）删除备忘录（点击标题后面的叉）完成备忘录（点击标题前的复选框）编辑备忘录（双击标题进入编辑模式）取消编辑备忘录（按ESC或失去焦点）完成编辑备忘录（按回车键完成【内容为空会自动删除】，此时也会调用失去焦点事件）一键完成所有备忘录（点击第一行的复选框）过滤任务，显示所有、未完成、已完成的备忘录（点击全部、未完成、已完成按钮）清除已完成的备忘录（点击清除已完成）Vue相关知识点练习：加载环境npminit-ynpmi-Sunderscorevuetodomvc-app-cssvimindex.html复制格式化的html导入css将英文标题改为中文标题导入vue.js新建一个Vue实例写一个默认任务：todoList:[{}]eloptionMountDOM//新建一个Vue对象实例vartodoapp=newVue({//mountel:'.todoapp',//datadata:{//memoarraytodoList:[//一个任务是一个对象，text表示任务名称，checked为true表示完成，false表示unfinished{text:'LearnVue',checked:false},{text:'LearnReact',checked:false}]},methodmethods:{},//计算属性computed:{}})属性数据：{newTodo:'',todos:todoStorage.fetch(),editedTodo:null,beforeEditCache:'',visibility}Computedproperties(get,set)computed:{//显示任务总数showTodos(){returnthis.todos.length>0},//未完成的activeCount(){returnfilters.active(this.todos).length},//完成的completedCount(){returnfilters.completed(this.todos).length},//判断所有任务allDone:{get(){returnthis.activeCount===0},set(value){this.todos.map(todo=>{todo.completed=value})}},//判断filteredTodos(){returnfilters[this.visibility](this.todos)}}//store.js判断获取(function(){varSTORAGE_KEY='todos'window.todoStorage={fetch(){try{returnJSON.parse(localStorage.getItem(STORAGE_KEY)||'[]')}catch(err){返回[];}},save(todos){localStorage.setItem(STORAGE_KEY,JSON.stringify(todos))}}})();属性观察变量过滤器s={全部：全部=>全部，活动：全部=>全部。过滤器（全部=>！全部。完成），完成：全部=>全部。过滤器（所有=>全部。完成）}varvisibility=location。hash.substr(location.hash.indexOf('/')+1)visibility=visibility===''?'all':visibilitywatch:{all:{deep:true,handler:allStorage.save//enclosure-with-value-value-save}}默认方法：{addAll(){this.newAll=this.newAll.trim()if(;!this.newAll){return}this.all.unshift({title:this.newAll,completed:false})this.newAll=''},removeAll(all){varindex=this.all.指数（全部）；this.all.splice(index,1)},editAll(all){this.editedAll=allthis.beforeEditCache=all.title},doneEdit(all){if(!this.editedAll){返回；}this.editedAll=null;all.title=all.title.trim()if(!all.title){this.removeAll(all)}},cancelEdit(all){if(this.editedAll){all.title=this.beforeEditCachethis.editedAll=null}},removeCompleted(){this.all=filters.active(this.all)}}删除指令：{focus:{update(the){the.focus()}}};
