【IMWeb训练营作业】之todo list 练习总结

来源：互联网发布：什么行业需要网络推广编辑：程序博客网时间：2024/06/07 01:54

之前有用vue做过项目，但总感觉光会傻傻的用，概念性的东西不了解，正好遇到IMWeb训练营十天学习VUE，报名参加，提高也锻炼下自己。概念性的东西我也不多说了，文档是最好的帮手，看文档吧。

简单说下demo，任务计划列表，添加任务后再下方显示，任务可以编辑（编辑可取消）、删除、标记已完成和未完成以及有个类似tab切换的所有任务、未完成任务、完成任务。效果图如下：

todolist效果

不要问我这是啥软件？LICEcap，一般人我不告诉他~

JavaScript代码：

//存取localStorage中的数据var store = {save(key,value){//保存localStorage.setItem(key,JSON.stringify(value));},fetch(key){//获取return JSON.parse(localStorage.getItem(key)) || [];}}var list = store.fetch("zhifangVue");var filter = {all:function(){return list;},finished:function(){return list.filter(function(item){return item.isChecked;})},unfinished:function(){return list.filter(function(item){return !item.isChecked;})}};var vm = new Vue({el:".main",data:{list:list,todo:"",editorTodos:"", //记录正在编辑的数据beforeTitle:"", //记录正在编辑数据的titlevisibility:"all", //通过此属性值的变化对数据进行筛选taskListChecked:"", //记录},watch:{// list:function(){//监控list属性，当值发生变化执行此函数// store.save("zhifangVue",this.list);// }list:{handler:function(){store.save("zhifangVue",this.list);},deep:true}},computed:{//计算属性noCheckLength:function(){return this.list.filter(function(item){return !item.isChecked    }).length},filteredList:function(){//过滤list all finished unfinishedreturn filter[this.visibility] ? filter[this.visibility](list) : list;}},methods:{//添加任务addTodo(){//向list中添加任务console.log("触发按键");this.list.push({title:this.todo,isChecked:false});this.todo = "";},//删除任务deleteTodo(curitem){var index = this.list.indexOf(curitem);this.list.splice(index,1);},//编辑任务 记录编辑任务的title以便取消的时候赋值editorTodo(curitem){this.beforeTitle = curitem.title;this.editorTodos = curitem;console.log(this.editorTodos);},//编辑完成后editorTodoend(curitem){this.editorTodos = "";},//取消编辑cacelTodo(curitem){console.log("取消编辑");curitem.title = this.beforeTitle;this.beforeTitle = "";this.editorTodos = "";}},directives:{//自定义指令foucs"focus":{update(el,blinding){if(blinding.value){el.focus();}}}}});function watchHashChange(){var hash = window.location.hash.slice(1);console.log(hash);vm.visibility = hash;}window.addEventListener("hashchange",watchHashChange);

可到我的GitHub查看详细源码，时间原因，做的有些仓促，还有许多未完善，会慢慢完善~

0 0