IMWeb训练营 todo list作业

跟着老师学了几天vue，还只是限于了解的阶段。也跟着老师的课程试着敲代码，今天做的是一个任务计划表。大致的效果图如下：

html代码如下：

<div class="page-top">
    	<div class="page-content">
        	<h2>任务计划表</h2>
        </div>
    </div>
    <div class="main">
        <h3 class="big-title">添加任务：</h3>
        <input 
                placeholder="例如：吃饭睡觉打豆豆，    提示：+回车即可添加任务"
                class="task-input"
                type="text"
                v-model="todo"
                v-on:keyup.enter="addTodo"
            />
        <ul class="task-count">
            <li>{{noCheckedLength}}个任务未完成</li>
            <li class="action">
          		<a class="action" href="#all">所有的任务</a>
                <a href="#unfinished">未完成的任务</a>
                <a href="#finished">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">
            <span class="no-task-tip" on-show="!list.length">还没有添加任何任务</span>
            <ul class="todo-list">
                <li class="todo" :class="{completed:item.isChecked,editing:item===edtorTodos}" v-for="item in filteredList">
                    <div class="view">
                        <input  
                        	class="toggle" 
                            type="checkbox" 
                            v-model="item.isChecked" />
                        <label @dblclick="edtorTodo(item)">
                        	{{ item.title}}
                        </label>
                        <button 
                        	class="destroy" 
                            @click="deleteTodo(item)">
                        </button>
                    </div>
                    <input 
                    	v-foucs="edtorTodos===item" 
                        class="edit" 
                        type="text" 
                        v-model="item.title" 
                        @blur="edtorTodoed(item)"
                        @keyup.13="edtorTodoed(item)"
                        @keyup.esc="cancelTodo(item)"/>
                </li>
              
            </ul>
        </div>
    </div>

js代码为：

//存取localStorage中的数据
var store = {
	save(key,value){
		localStorage.setItem(key,JSON.stringify(value));
		},
	fetch(key){
		return JSON.parse(localStorage.getItem(key)) || [];
		}
}
/*var list=[
	{
		title:"吃饭打豆豆",
		isChecked:false,
		},
	{
		title:"吃饭打豆豆",
		isChecked:true,
		},
];*/

//取出所有的值
var list = store.fetch("miaov-new-class");



var vm = new Vue({
	el:".main",
	data:{
		list:list,
		todo:"",
		edtorTodos:' ',//记录正在编辑的数据
		beforeTitle:' ',//记录正在编辑的数据的title
		visibility:"all"//通过这个属性值的变化对数据进行筛选
		},
	watch:{
		list:{
			handler:function(){
				store.save("miaov-new-class",this.list);
				},
			deep:true //深层监控
			}
		},
	computed:{
		noCheckedLength:function(){
			return this.list.filter(function(item){
                  return !item.isChecked
                  }).length
			},
	filteredList:function(){
		//过滤的时候有三种情况
		
		var filter ={
			all:function(list){
				return list;
				},
			finished:function(list){
				return list.filter(function(item){
					return item.isChecked;
					})
				},
			unfinished:function(){
				return list.filter(function(item){
					return !item.isChecked;
					})
				}
			}
			//找到了过滤函数，就返回过滤后的数据，如果没有就返回所有数据
			return filter[this.visibility] ? filter[this.visibility](list) : list;
			}
		},
	
	methods:{
		addTodo(){//添加任务
			this.list.push({
				title:this.todo,
				isChecked:false
				});
				this.todo='';
			},
			deleteTodo(todo){//删除任务
				var index=this.list.indexOf(todo);
				this.list.splice(index,1);
				},
			edtorTodo(todo){
				//编辑任务的时候：记录一下编辑这条任务的title，方便在取消的时候重新给之前的title
				this.beforeTitle = todo.title;
				this.edtorTodos = todo;
				
				},
			edtorTodoed(todo){//编辑任务成功
				this.edtorTodos = ' ';
				},
			cancelTodo(todo){//取消编辑认任务
				todo.title = this.beforeTitle;
				this.beforeTitle = '';
				 
				 //让div显示出来，input隐藏
				 this.edtorTodos = ' ';
				}
		},
	directives:{
		"foucs":{
			update(el,binding){
				if(binding.value){
					el.focus();
					}
				}
			}
		}
});


function watchHashChange(){
	var hash =window.location.hash.slice(1);
	vm.visibility =hash;
	
	//console.log(hash);
}

watchHashChange();

window.addEventListener("hashchange",watchHashChange);

也做了一个简单的样式，css代码是：

*{
	padding: 0;
	margin: 0;
}
.page-top{
	width: 100%;
	height: 60px;
	background-color: mediumvioletred;
}
.page-content{
	width: 100%;
	height: 40px;
	line-height: 40px;
	font: "微软雅黑";
	text-align: center;
}
.main{
	width: 800px;
	margin-left: 300px;
	padding:20px 80px;
	float: left;
	
}
.task-input{
	padding: 10px;
	margin: 20px;
	width: 400px;
}
li{
	list-style: none;
}
.task-count li{
	float: left;
	margin-left: 20px;
}
.task-count li a{
	text-decoration: none;
}
.task-count li a:visited{
	color: orange;
}
.task-count li a:hover{
	color: red;
}
.task-count li a:active{
	color: yellow;
}
h3{
	clear: left;
	margin-top: 30px;
}
.tasks{
	clear: left;
}