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

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

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

不要问我这是啥软件？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:"", //记录正在编辑数据的title
		visibility:"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 unfinished
			
			return 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查看详细源码，时间原因，做的有些仓促，还有许多未完善，会慢慢完善~