IMWeb训练营作业 - Todo List（计划清单）
2017-04-20 00:03
501 查看
加入IMWeb训练营，迎来了第一次作业，任务是按照视频完成Todo List的程序编写。
需要实现的功能有添加任务，删除任务，编辑任务，计算已完成任务，取消编辑，过滤已完成任务及未完成任务。
在任务栏中输入任务，并按回车向列表中添加任务。
主要代码：
HTML：
使用 vue.js 中的事件修饰符 v-on 向 input 标签中加入键盘事件 keyup，执行 addTodo 函数
JS：
按删除键删除不想要及已完成的任务。
主要代码：
HTML：
给删除按钮添加删除函数
JS：
鼠标双击任务可切换到输入框编辑任务
主要代码：
HTML：<
4000
/span>
当鼠标双击 li 标签时，向li标签添加 class 名 editing，从而隐藏 div 标签，显示 input 标签，并触发编辑任务的函数。当编辑完成后，当 input 标签失去焦点或按回车键，编辑结束，隐藏 input 标签，显示 div 标签并将编辑后的内容在 div 中显示出来。
JS：
在编辑过程中，若不想编辑新内容，可取消编辑，返回原来的内容。
主要代码：
HTML：
编辑过程中，想取消编辑，可按 esc 键取消。
JS：
主要代码：
HTML：
主要代码：
HTML：
JS：
代码已放入github：传送门
app.js：
style.css：
需要实现的功能有添加任务，删除任务，编辑任务，计算已完成任务，取消编辑，过滤已完成任务及未完成任务。
1.添加任务
在任务栏中输入任务，并按回车向列表中添加任务。
主要代码：
HTML：
<input type="text" name="" placeholder="例如：吃饭睡觉打豆豆； 提示：+回车即可添加任务" class="task-input" v-model="todo" v-on:keyup.enter="addTodo">
使用 vue.js 中的事件修饰符 v-on 向 input 标签中加入键盘事件 keyup，执行 addTodo 函数
JS：
addTodo(ev){ //添加任务
//向list中添加一项任务
this.list.push({
title:this.todo,
isChecked:false
});
this.todo = ""
}2.删除任务
按删除键删除不想要及已完成的任务。
主要代码：
HTML：
<button class="destroy" @click="deleteTodo(item)">×</button>
给删除按钮添加删除函数
JS：
deleteTodo(todo){ //删除任务
var index = this.list.indexOf(todo);
this.list.splice(index,1);
}3.编辑任务
鼠标双击任务可切换到输入框编辑任务
主要代码：
HTML：<
4000
/span>
<li class="todo" :class="{completed:item.isChecked,editing:item === edtorTodos}" v-for="item in filteredList">
<div class="view">
<input type="checkbox" class="toggle" v-model="item.isChecked">
<label @dblclick="edtorTodo(item)">{{item.title}}</label>
<button class="destroy" @click="deleteTodo(item)">×</button>
</div>
<input
v-focus="edtorTodos === item"
class="edit" type="text"
v-model="item.title"
@keyup.13="edtorTodoed(item)" @blur="edtorTodoed(item)"
@keyup.esc="cancelTodo(item)"
></input>
</li>当鼠标双击 li 标签时，向li标签添加 class 名 editing，从而隐藏 div 标签，显示 input 标签，并触发编辑任务的函数。当编辑完成后，当 input 标签失去焦点或按回车键，编辑结束，隐藏 input 标签，显示 div 标签并将编辑后的内容在 div 中显示出来。
JS：
edtorTodo(todo){ //编辑任务
this.beforeTitle = todo.title;
this.edtorTodos = todo;
},
edtorTodoed(todo){ //编辑任务成功
this.edtorTodos = "";
}4.取消编辑
在编辑过程中，若不想编辑新内容，可取消编辑，返回原来的内容。
主要代码：
HTML：
<input v-focus="edtorTodos === item" class="edit" type="text" v-model="item.title" @keyup.13="edtorTodoed(item)" @blur="edtorTodoed(item)" @keyup.esc="cancelTodo(item)" ></input>
编辑过程中，想取消编辑，可按 esc 键取消。
JS：
cancelTodo(todo){ //取消编辑任务
todo.title = this.beforeTitle;
this.edtorTodos = "";
}5.计算未完成任务
主要代码：
HTML：
<li>{{ noCheckLength }}个任务未完成</li>JS：noCheckLength:function(){
return this.list.filter(function(item){
return !item.isChecked
}).length
}通过过滤已完成的任务，计算未完成的任务。6.localStorage
JS：//localStorage
var store = {
save(key,value){
localStorage.setItem(key,JSON.stringify(value));
},
fetch(key){
return JSON.parse(localStorage.getItem(key)) || [];
}
};7.过滤已完成任务及未完成任务
**该任务代码已完成，但不知道为什么实现不了功能。主要代码：
HTML：
<li class="todo" :class="{completed:item.isChecked,editing:item === edtorTodos}" v-for="item in filteredList">JS：
var filter = {
all:function(list){
return list;
},
finished:function(list){
return list.filter(function(item){
return item.isChecked;
})
},
unfinished:function(list){
return list.filter(function(item){
return !item.isChecked;
})
}
}filteredList:function(){
return filter[this.visibility] ? filter[this.visibility](list) : list
}function watchHashChange(){
var hash = window.location.hash.slice(1);
vm.visibility = hash;
}
window.addEventListener("hashchang",watchHashChange);代码已放入github：传送门
所有代码：
index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css" />
<script src="vue.js" type="text/javascript"></script>
</head>
<body>
<div class="page-top">
<div class="page-content">
<h2>计划任务列表</h2>
</div>
</div>
<div class="main">
<h3 class="big-title">添加任务：</h3>
<input type="text" name=""
placeholder="例如：吃饭睡觉打豆豆； 提示：+回车即可添加任务"
class="task-input"
v-model="todo"
v-on:keyup.enter="addTodo">
<ul class="task-count" v-show="list.length">
<li>{{ noCheckLength }}个任务未完成</li>
<li class="action">
<a class="active" href="#all">所有任务</a>
<a href="#unfinished">未完成的任务</a>
<a href="#finished">已完成的任务</a>
</li>
</ul>
<h3 class="big-title">任务列表：</h3>
<span class="no-tesk-tip" v-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 type="checkbox" class="toggle" v-model="item.isChecked"> <label @dblclick="edtorTodo(item)">{{item.title}}</label> <button class="destroy" @click="deleteTodo(item)">×</button> </div> <input v-focus="edtorTodos === item" class="edit" type="text" v-model="item.title" @keyup.13="edtorTodoed(item)" @blur="edtorTodoed(item)" @keyup.esc="cancelTodo(item)" ></input> </li>
</ul>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.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("c-class");
var filter = {
all:function(list){
return list;
},
finished:function(list){
return list.filter(function(item){
return item.isChecked;
})
},
unfinished:function(list){
return list.filter(function(item){
return !item.isChecked;
})
}
}
var vm = new Vue({
el:".main",
data:{
list:list,
todo:"",
edtorTodos:"", //记录正在编辑的数据
beforeTitle:"",
visibility:"all"
},
watch:{
/*list:function(){
store.save("c-class",this.list);
}*/
list:{
handler:function(){
store.save("c-class",this.list);
},
deep:true
}
},
computed:{
noCheckLength:function(){
return this.list.filter(function(item){
return !item.isChecked
}).length
},
filteredList:function(){
return filter[this.visibility] ? filter[this.visibility](list) : list
}
},
methods:{
addTodo(ev){ //添加任务
//向list中添加一项任务
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){ //编辑任务
this.beforeTitle = todo.title;
this.edtorTodos = todo;
},
edtorTodoed(todo){ //编辑任务成功
this.edtorTodos = "";
},
cancelTodo(todo){ //取消编辑任务
todo.title = this.beforeTitle;
this.edtorTodos = "";
}
},
directives:{
focus:{
update(el,binding){
if(binding.value){
el.focus();
}
}
}
}
});
function watchHashChange(){
var hash = window.location.hash.slice(1);
vm.visibility = hash;
}
window.addEventListener("hashchang",watchHashChange);style.css：
*{padding: 0;margin: 0}
html{background: #f9fafa;}
li{font-family: "微软雅黑";font-size: 12px;
list-style:none;}
.page-top{background: #e9583c;height: 40px;}
.page-content{color: #fff;width: 800px;
margin: 0 auto;line-height: 40px;}
.main{width: 800px;margin: 0 auto;}
.big-title{padding: 10px 0;}
.task-input{height: 30px;width: 100%;}
.task-count{padding: 10px 0;font-size: 10px;}
.task-count li{color: #e9583c;float: left;}
.task-count .action{float: right;}
.task-count .action a{display: block;height: 25px;width: 80px;text-decoration: none;color: #aaa;border: 1px solid #f9fafa;line-height: 25px;text-align: center;float: left;margin-left: 10px;}
.task-count .action .active{border: 1px solid #ccc;}
.big-title{height: 30px;line-height: 30px;}
.no-tesk-tip{display:block;height: 20px;background: #fff;padding: 10px;margin: 3px;line-height: 20px;}
.completed{color: #ccc;text-decoration: line-through;}
.todo{height: 48px;overflow: hidden;position:relative;}
.view{height: 28px;background: #fff;padding: 10px;margin: 3px;position:relative;}
.toggle{height: 25px;width: 25px;position:relative;left: -730px;}
.view label{font-size: 14px;line-height: 28px;padding-left: 30px;width: 700px;display: block;float: left;}
.destroy{height: 25px;width: 25px;position:absolute;top: 14px;right: 15px;font-size: 20px;}
.edit{display:none;height:25px;padding: 9px;font-size: 14px;margin-left: 30px;line-height: 25px;width: 500px;margin-top: : 3px;}
.editing .edit{display: block;}
.editing .view{display: none;}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IMWeb训练营作业——todo list
- 【IMWeb训练营作业】todo list
- [IMWeb训练营作业]vue实现简单的todo list
- IMweb训练营作业—-Todo List(vue)
- Vue.js 第一发【 todo list (IMWeb训练营作业)】
- [IMWeb训练营作业]基于Vuejs的Todo List
- 【IMWeb训练营作业】todo list
- 【IMWeb训练营作业】Todo list
- 【IMWeb训练营作业】第一次Vue作业-todo list
- 【IMWeb训练营作业】-Todo List
- [IMWeb训练营作业]基于Vuejs的Todo List
- 【IMWeb训练营作业】To do list
- 【IMWeb训练营作业】todo list项目
- 【IMWeb训练营作业】之todo list 练习总结
- 对对机如何在电脑端打印To do list清单(教程)
- VUE训练营——Todo List
- [to do list] noip刷题计划
- IMWeb训练营作业------任务计划列表
- Google Privacy Checklist: What to Do Before Google's Privacy Policy Changes on March 1
- To Do List