2020【前端VUE框架】第12节，Vue实现todoList（任务计划列表）代码.
12，Vue实现todoList（任务计划列表）
tofacebook.com的需求大致功能：
1、在输入框中输入内容后按enter键，即可把内容添加到下面的列表中（如果内容为空则不添加）
2、动态计算有几个未完成的任务
3、点击复选框，实现选中或不选中效果（即完成或未完成）
4、鼠标移入列表，会出现一个删除按钮，点击删除按钮即可删除该列表
5、双击列表中的内容，可对列表内容进行编辑
- 编辑完成后，按enter键完成编辑，或者当输入框失去焦点的时候也是完成编辑
- 如果想要取消修改，按esc键即可取消编辑
6、单击上面的所有任务、未完成任务、已完成任务，三个按钮可以切换任务列表
7、已经添加的列表任务，即便关闭浏览器或者电脑，下次打开任务还在列表中（用到了本地存储）
实现的过程也是把上面的功能一个一个实现即可
看一个大致的图：
没有任务添加的效果图：
添加了任务的效果图：
嗯，看下面的代码
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
<script src="./vue.js"></script>
</head>
<body>
<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-on:keyup.enter="enterFn"
v-model="todo"
/>
<ul class="task-count">
<li>{{unComplete}}个任务未完成</li>
<li class="action">
<a :class="{active:visibility!=='unCompleted'&&visibility!=='completed'}" href="#all">所有任务</a>
<a :class="{active:visibility==='unCompleted'}" href="#unCompleted">未完成的任务</a>
<a :class="{active:visibility==='completed'}" href="#completed">完成的任务</a>
</li>
</ul>
<h3 class="big-title">任务列表：</h3>
<div class="tasks">
<span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
<ul class="todo-list" v-show="list.length">
<li class="todo"
v-for="item in filterData"
v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
>
<div class="view">
<input class="toggle"
type="checkbox"
v-model="item.isComplete"
/>
<label @dblclick="edtorTodo(item)">{{item.title}}</label>
<button
class="destroy"
@click="delFn(item)"
></button>
</div>
<input
class="edit"
type="text"
v-focus="edtorTodos===item"
v-model="item.title"
@blur="edtoEnd(item)"
@keyup.enter="edtoEnd(item)"
@keyup.esc="cancelEdit(item)"
/>
</li>
</ul>
</div>
</div>
<script src="./todo.js"></script>
</body>
</html>
JS代码：
//存取localStorage中的数据
var store = {
save(key,value){
window.localStorage.setItem(key,JSON.stringify(value));
},
fetch(key){
return JSON.parse(window.localStorage.getItem(key))||[];
}
}
//list取出所有的值
var list = store.fetch("storeData");
var vm = new Vue({
el:".main",
data:{
list,
todo:'',
edtorTodos:'',//记录正在编辑的数据,
beforeTitle:"",//记录正在编辑的数据的title
visibility:"all"//通过这个属性值的变化对数据进行筛选
},
watch:{
//下面的这种方法是浅监控
/*list:function(){//监控list这个属性，当这个属性对应的值发生变化就会执行函数
store.save("storeData",this.list);
}*/
//下面的是深度监控
list:{
handler:function(){
store.save("storeData",this.list);
},
deep:true
}
},
methods:{
enterFn(ev){//添加任务
//向list中添加一项任务
//事件处理函数中的this指向的是当前这个根实例
if(this.todo==""){return;}
this.list.push({
title:this.todo,
isComplete:false
});
this.todo = "";
},
delFn(item){//删除任务
var index = this.list.indexOf(item);
this.list.splice(index,1)
},
edtorTodo(item){//编辑任务
//编辑任务的时候记录编辑之前的值
this.beforeTitle = item.title;
this.edtorTodos = item;
},
edtoEnd(item){//编辑完成
this.edtorTodos="";
// this.cancelEdit = this.edtorTodos;
},
cancelEdit(item){//取消编辑
item.title = this.beforeTitle;
this.beforeTitle = '';
this.edtorTodos='';
}
},
directives:{
"focus":{
update(el,binding){
if(binding.value){
el.focus();
}
}
}
},
computed:{
unComplete(){
return this.list.filter(item=>{
return !item.isComplete
}).length
},
filterData(){
//过滤的时候有三种情况 all completed unCompleted
var filter = {
all:function(list){
return list;
},
completed:function(list){
return list.filter(item=>{
return item.isComplete;
})
},
unCompleted:function(list){
return list.filter(item=>{
return !item.isComplete;
})
}
}
//如果找到了过滤函数，就返回过滤后的数据，如果没有找到就返回所有的数据
return filter[this.visibility]?filter[this.visibility](list):list;
}
}
});
function hashFn(){
var hash = window.location.hash.slice(1);
vm.visibility = hash;
}
hashFn();
window.addEventListener('hashchange',hashFn);
在这个例子中，我学到了：
之前没有学过本地存储，经过这个案例，把本地存储storage详细的学习了一遍，这个昨天写过博客了本地存储
利用hash值过滤数据，这个知识以前接触的也不多，学了之后发现很好用哈
- 获取hash值：window.location.hash.slice(1)（因为带"#“号，所以需要将”#"去掉，用到了slice方法）
- 和hash相关的事件:hashchange
当然最终要的是学到了很多关于vue方面的知识，之前实现各种功能都是使用的原生js，一般都是操作dom的，但vue的思想就是通过改变数据，进而改变页面效果（这个总想操作DOM的思维需要改变）
其实只要把不会的几个知识点搞懂，利用vue很快就可以搞定这个案例了，
学习目标：
提示：2021【前端VUE框架】最新/最全/最细实战课程，VUE56节进阶学习
重磅来袭：3个月掌握 vue 入门知识到实战学代码。
学习内容：
学习本节视频需要掌握的知识点：
1.HTML
2.CSS
3.JavaScript
那么关于上面三个知识点，视频学习地方在：html5+css3+js+jquery课程
扫码关注我，带你超神带你飞。
