[IMWeb训练营作业]基于Vue的小demo--toodolist

功能描述:

该demo是用于记录用户的任务列表的。功能如下：

1. 在输入框内输入任务名可以增加新的任务；
2. 完成任务后可以勾选相应任务表示完成任务；
3. 对于不满意的任务可以双击进行修改；
4. 在修改中想要撤销新输入的内容可以按下esc键进行撤销；
5. 可以通过点击界面上相应分类查看“所有任务”，“未完成任务”和“完成任务”；
6. 刷新页面时，该任务列表的数据不会清空，还是之前那些数据。

效果预览：

github上完整代码---传送门

核心代码：

html部分

<div id="main">
		<div id="addTask">
			<h3>添加任务</h3>
			<input  type="text" 
					name="task" 
					placeholder="输入任务名称,按下回车键将添加" 
					@keyup.enter="addTask"
					v-model="todo" />
		</div>
		<div class="tips">
			<span class="notFinishTip" v-show="list.length">{{notFinishTask}}个任务未完成</span>
			<a class="kind" href="#all" :class="{outline:locationHash === 'all'}">所有任务</a>
			<a class="kind" href="#notFinish" :class="{outline:locationHash === 'notFinish'}">未完成任务</a>
			<a class="kind" href="#finished" :class="{outline:locationHash === 'finished'}">完成任务</a>
		</div>
		<div id="task">
			<span class="noTaskTip" v-show="! list.length">还没有添加任务</span>
			<ul>
				<li v-for="item in filterList">
					<div class="taskShow">
						<div class="check">
							<i class="fa fa-check-square-o fa-2x" v-show="item.finish"></i>
							<i class="fa fa-square-o fa-2x" v-show=" !item.finish"></i>
							<input type="checkbox" v-model="item.finish" class="hidden"/>	
						</div>				
						<label :class="{ delete: item.finish}" @dblclick="editing(item)">
							{{item.taskName}}
						</label>
						<div class="close">
							<i class="fa fa-close" ></i>
							<button type="button" @click="deleteTask(item,$event)" class=""></button>
						</div>
					</div>
					<div v-show="editTasking === item" class="editing">
						<input type="text" 
							name="edit"
							v-model="item.taskName" 
							v-focus = "editTasking === item"
							@keyup.13="edited(item)"
							@blur="edited(item)"
							@keyup.esc="cancel(item)"
						/>
					</div>
				</li>
			</ul>
		</div>
	</div>

js部分

var vm = new Vue({//vm实例
	el:'#main',
	data:datas,
	watch:{//监控数据
		list:{
			handler(val){
				storage.save('list',val);
			},
			deep:true
		}
	},
	methods: {//方法都写在这里，统一管理
		addTask(event) {

			//this.list.push({taskName:event.target.value});第一种写法直接获取dom的value值

			if(this.todo) {
			//第二种写法在input使用v-model使得表单相应value绑定todo变量,这样只需要操作todo即可
				this.list.push({taskName : this.todo,finish : false});
				this.todo = '';
			}
		},
		deleteTask(item,event) {
			//若事件处理函数还要传其他参数,对于event可以在事件调用时传入$event访问到
			console.log(event.target.type);
			var index = this.list.indexOf(item);
			this.list.splice(index,1);
		},
		editing(item) {
			this.editTasking = item;
			this.beforeTodo = item.taskName;
		},
		edited(item){
			this.editTasking = '';
		},
		cancel(item){
			item.taskName = this.beforeTodo;
			this.beforeTodo = '';
			this.editTasking = '';
		}
	},
	directives: {//自定义指令
		"focus": {
			update(el,binding) {//钩子函数update,
				if (binding.value) {//binding.value是指令的绑定值,在html上是v-focus="editTasking === item"中"editTasking === item"的值
					el.focus();
				}
			}
		}
	},
	computed:{//计算属性
		notFinishTask:function(){
			return this.list.filter(function(item){
				return ! item.finish;
			}).length;
		},
		filterList:function(){//计算属性不要写在data里
			return filterTask[this.locationHash] ? filterTask[this.locationHash](this.list) : this.list
		}	
	}
});

遇到的bug：

错以为数据都要放到选项对象data管理，刚开始顺手将某个计算属性变量写到了data里也写在了计算属性里，结果页面渲染的时候该变量没有丝毫变化，所以计算属性不用再次写到data里了。