Vue模仿todo超详细讲解（附源码）

一、todo基本DOM结构
二、todo功能需求分析
- 1.新增任务
- 2.点击变成完成状态
- 3.点击删除
- 4.双击进入编辑以及修改保存
- 5.底部的状态筛选
- 6.li中添加“:key”
- 7.计算未完成的任务
- 8.计算全选和反选
- 9.清除所有已完成任务
- 10.使用浏览器缓存获取数据
三、所有源码如下
- 1.代码文件结构
- 2.html所有代码
- 3.css所有代码
- 4.参考文档

一、todo基本DOM结构

代码如下：

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title></title><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="robots" content="noindex, nofollow" /><meta name="googlebot" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" type="text/css" href="./css/index.css" /><style id="compiled-css" type="text/css">/* 结合v-cloak */[v-cloak] {display: none;}</style>
</head><body><section class="todoapp"><header class="header"><h1>RoddyLD</h1><input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" class="new-todo" /></header><section class="main"><input type="checkbox" class="toggle-all" /><label for="toggle-all"></label><ul class="todo-list"><h2>模板</h2><li class="todo"><div class="view"><input type="checkbox" class="toggle" /> <label>吃饭</label><button class="destroy"></button></div><input type="text" class="edit" /></li><li class="todo completed"><div class="view"><input type="checkbox" class="toggle" /> <label>睡觉觉</label><button class="destroy"></button></div><input type="text" class="edit" /></li><li class="todo editing"><div class="view"><input type="checkbox" class="toggle" /> <label>打豆豆</label><button class="destroy"></button></div><input type="text" class="edit" /></li></ul></section><footer class="footer"><span class="todo-count"><strong>2</strong> items left </span><ul class="filters"><li><a href="#/all">All</a></li><li><a href="#/active" class="">Active</a></li><li><a href="#/completed" class="">Completed</a></li></ul><button class="clear-completed" style="display: none;">Clear completed</button></footer></section><footer class="info"><p>双击进入编辑</p><p>感谢 <a href="http://evanyou.me">Evan You</a></p><p>感谢 <a href="http://todomvc.com"></a></p></footer>
</body></html><!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

浏览器运行结果如下：

二、todo功能需求分析

1.新增任务

需求分析	使用的关键技术指令
输入内容	v-model
按enter键添加	@keyup.enter
执行添加逻辑	vue实例的methods里面
渲染到页面上	v-for

新增代码如下：

<script>const app = new Vue({el: ".todoapp",data: {// 双向数据绑定的值todo: "",// 事件数组 todoList: [],},methods: {// 新增任务addTodo() {// 非空判断if (this.todo == "") {alert("输入为空，请重新输入！");return;}// 添加的正常逻辑this.todoList.push({msg: this.todo,isCompleted: false})console.log(this.todoList);// 清空输入框this.todo = "";}},})
</script>

dom结构发生改变的部分已被圈红

注意：下面双向数据绑定使用的是v-model.trim,而不是v-model;使用v-model.trim可以去掉输入框内首尾空格

dom结构发生改变的代码如下：

<header class="header"><h1>RoddyLD</h1><input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" @keyup.enter="addTodo" v-model.trim="todo"class="new-todo" />
</header>

<li class="todo" v-for="(item,index) in todoList"><div class="view"><input type="checkbox" class="toggle" /><label>{{item.msg}}</label><button class="destroy"></button></div><input type="text" class="edit" />
</li>

新增功能代码已经完成，让我们来看一下浏览器最终的结果(可以发现已经添加成功)

2.点击变成完成状态

需求分析：

点击checkbox复选框同步的值是每一项里面的completed
通过completed的值控制li元素上completed这个类
v-bind:class = {completed : isCompleted} 动态增删completed这个类

新增一下两行代码：

:class = "{completed:item.isCompleted}"
v-model="item.isCompleted"

dom结构发生改变的部分已被圈红

点击变成完成状态已经完成，让我们来看一下浏览器最终的结果(可以发现已经实现成功)

3.点击删除

需求分析：

点击×删除，利用索引删除
@click=“del(index)”

点击删除代码如下：

// 删除任务
del(index){this.todoList.splice(index, 1)
}

dom结构发生改变的部分已被圈红

4.双击进入编辑以及修改保存

需求分析：

双击给对应的li标签加上editing类名
:class = “{completed:item.isCompleted,editing:editTodo==item}”
双击过后将当前项item赋值给editTodo这个变量 editTodo和item就是一致的

双击进入编辑状态把当前文本显示在文本输入框 (item.msg)
修改label标签中的值双向数据绑定 v-model

按下enter键或者失去焦点保存修改还原到默认状态下(active) (移出editing类)
editTodo = undefined

关键代码如下：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {// 当元素发生改变时，执行自定义逻辑update: function (el) {console.log("触发");// 聚焦元素el.focus()}
})

dom结构新增的代码如下：

:class="{completed:item.isCompleted,editing:editTodo==item}" @dblclick="editTodo=item"v-focus v-model="item.msg" @keyup.13="editTodo=undefined" @blur="editTodo=undefined"

代码发生改变的部分已被圈红

注意：

自定义指令必须写在Vue实例化创建之前，并且命名不能有大写字母
添加自定义指令focus的原因是：双击li并不能聚焦，需要再点击一次才能找到焦点，添加自定义指令focus可以很好的解决这一问题！

5.底部的状态筛选

需求分析：

点击底部的筛选按钮切换selected类
在data里面再加一个字段表示当前的状态

关键代码如下：

computed: {// 筛选出符合当前状态的所有项filterTodoList() {// 判断状态if (this.filter == "All") {return this.todoList;} else if (this.filter == "Active") {return this.todoList.filter(ele => {return !ele.isCompleted;})} else {return this.todoList.filter(ele => {return ele.isCompleted;})}}
},

代码发生改变的部分已被圈红

浏览器运行结果如下：

所有任务

未完成任务

已完成任务

6.li中添加“:key”

为什么要添加“:key”,如果不添加:key，在切换到Active中，然后再对它进行选中的时候，正常的逻辑应该是该项在Active中消失，但实际效果是：选中的那一项的确会消失，但选中的那个“√”会渲染到下一项li上！（如下图所示）

在Active中，是不可能出现“√”的,所以我们要添加“:key”,其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

解决方法一：使用时间戳来当做“:key”值

我们知道时间戳是从1970年1月1日（UTC/GMT的午夜）开始所经过的秒数,所以它是不可能重复的，所以我们可以使用时间戳来解决这一问题。（如下图所示：添加时间戳）

但是我们会发现，它会报错一些信息，而且会影响其他代码效果，比如说双击聚焦效果就失效了，所以不推荐使用这种方法！

解放方法二：在添加的时候多添加一个id字段

7.计算未完成的任务

核心代码如下：

// 计算未完成任务
activeNum() {if(this.todoList){const activeList = this.todoList.filter(ele => {if (ele.isCompleted == false) {return true;}})return activeList.length;}
},

代码发生改变的部分已被圈红

我们先把一些无关紧要的代码注释掉

当未完成的数量不为1的时候显示它，并且大于1的时候加上“s”

计算未完成关键js代码

浏览器运行结果如下

当只有1项未完成任务时没有添加s

当大于1项未完成任务时添加s

8.计算全选和反选

核心代码如下

// 计算全选和反选
isCheckAll: {get() {// 筛选出的选中的个数if (this.todoList) {const checkedNum = this.todoList.filter(v => {return v.isCompleted;}).length;// 计算总任务数const totalNum = this.todoList.length;// 返回全选反选状态return checkedNum == totalNum;}},set(value) {console.log(value);// 设置所有项选中状态跟顶部复选框一致this.todoList.forEach(ele => {ele.isCompleted = value;})}
}

代码发生改变的部分已被圈红

浏览器运行结果如下：

点击全部选中

再点击全部取消选中

9.清除所有已完成任务

核心代码如下：

代码发生改变的部分已被圈红

10.使用浏览器缓存获取数据

代码发生改变的部分已被圈红

浏览器运行结果如下：
已经可以从缓存中拿到数据

三、所有源码如下

1.代码文件结构

2.html所有代码

<!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title></title><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="robots" content="noindex, nofollow" /><meta name="googlebot" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" type="text/css" href="./css/index.css" /><style id="compiled-css" type="text/css">/* 结合v-cloak */[v-cloak] {display: none;}</style>
</head><body><section class="todoapp"><header class="header"><h1>RoddyLD</h1><input autofocus="autofocus" autocomplete="off" placeholder="请输入任务" @keyup.enter="addTodo"v-model.trim="todo" class="new-todo" /></header><section class="main"><input type="checkbox" class="toggle-all" id="toggle-all" v-model="isCheckAll" /><label for="toggle-all"></label><ul class="todo-list"><li class="todo" :class="{completed:item.isCompleted,editing:editTodo==item}" @dblclick="editTodo=item"v-for="(item,index) in filterTodoList" :key="item.id"><div class="view"><input type="checkbox" class="toggle" v-model="item.isCompleted" /><label>{{item.msg}}</label><button class="destroy" @click="del(index)"></button></div><input type="text" class="edit" v-focus v-model="item.msg" @keyup.13="editTodo=undefined"@blur="editTodo=undefined" /></li></ul></section><footer class="footer"><span class="todo-count" v-show="activeNum!=0"><strong>{{activeNum}}</strong> item<spanv-show="activeNum>1">s</span> left </span><ul class="filters"><li><a href="#/all" @click="filter='All'" :class="{selected:filter=='All'}">All</a></li><li><a href="#/active" @click="filter='Active'" :class="{selected:filter=='Active'}">Active</a></li><li><a href="#/completed" @click="filter='Completed'":class="{selected:filter=='Completed'}">Completed</a></li></ul><button class="clear-completed" v-show="completedNum>0" @click="clearAll">Clear completed</button></footer></section><footer class="info"><p>双击进入编辑</p><p>感谢 <a href="http://evanyou.me">Evan You</a></p><p>感谢 <a href="http://todomvc.com"></a></p></footer>
</body></html><!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', {// 当元素发生改变时，执行自定义逻辑update: function (el) {console.log("触发");// 聚焦元素el.focus()}})const app = new Vue({el: ".todoapp",data: {// 双向数据绑定的值todo: "",// 事件数组 // todoList: [],todoList: JSON.parse(localStorage.getItem("todo")),// 编辑的这一行数据editTodo: undefined,// 当前的筛选状态filter: "All",// 初始化id的值id: 1},methods: {// 新增任务addTodo() {// 非空判断if (this.todo == "") {alert("输入为空，请重新输入！");return;}if (!this.todoList) {this.todoList = []}// 添加的正常逻辑this.todoList.push({msg: this.todo,isCompleted: false,id: this.id,})this.id++console.log(this.todoList);// 清空输入框this.todo = "";localStorage.setItem("todo", JSON.stringify(this.todoList))},// 删除任务del(index) {this.todoList.splice(index, 1)},// 删除已完成的任务clearAll() {console.log(this.todoList);for (let i = 0; i < this.todoList.length; i++) {if (this.todoList[i].isCompleted == true) {this.todoList.splice(i, 1);i--;}}}},// 计算属性computed: {// 筛选出符合当前状态的所有项filterTodoList() {// 判断状态if (this.filter == "All") {return this.todoList;} else if (this.filter == "Active") {return this.todoList.filter(ele => {return !ele.isCompleted;})} else {return this.todoList.filter(ele => {return ele.isCompleted;})}},// 计算未完成任务activeNum() {if (this.todoList) {const activeList = this.todoList.filter(ele => {if (ele.isCompleted == false) {return true;}})return activeList.length;}},// 计算完成的任务completedNum() {if (this.todoList) {const completedList = this.todoList.filter(ele => {if (ele.isCompleted == true) {return true;}})return completedList.length;}},// 计算全选和反选isCheckAll: {get() {// 筛选出的选中的个数if (this.todoList) {const checkedNum = this.todoList.filter(v => {return v.isCompleted;}).length;// 计算总任务数const totalNum = this.todoList.length;// 返回全选反选状态return checkedNum == totalNum;}},set(value) {console.log(value);// 设置所有项选中状态跟顶部复选框一致this.todoList.forEach(ele => {ele.isCompleted = value;})}}},})
</script>

3.css所有代码

html,
body {margin: 0;padding: 0;
}button {margin: 0;padding: 0;border: 0;background: none;font-size: 100%;vertical-align: baseline;font-family: inherit;font-weight: inherit;color: inherit;-webkit-appearance: none;appearance: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}body {font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 230px;max-width: 550px;margin: 0 auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: 300;
}:focus {outline: 0;
}.hidden {display: none;
}.todoapp {background: #fff;margin: 130px 0 40px 0;position: relative;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}.todoapp input::-webkit-input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}.todoapp input::-moz-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}.todoapp input::input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6;
}.todoapp h1 {position: absolute;top: -155px;width: 100%;font-size: 100px;font-weight: 100;text-align: center;color: rgba(175, 47, 47, 0.15);-webkit-text-rendering: optimizeLegibility;-moz-text-rendering: optimizeLegibility;text-rendering: optimizeLegibility;
}.new-todo,
.edit {position: relative;margin: 0;width: 100%;font-size: 24px;font-family: inherit;font-weight: inherit;line-height: 1.4em;border: 0;color: inherit;padding: 6px;border: 1px solid #999;box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.new-todo {padding: 16px 16px 16px 60px;border: none;background: rgba(0, 0, 0, 0.003);box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}.main {position: relative;z-index: 2;border-top: 1px solid #e6e6e6;
}.toggle-all {width: 1px;height: 1px;border: none; /* Mobile Safari */opacity: 0;position: absolute;right: 100%;bottom: 100%;
}.toggle-all + label {width: 60px;height: 34px;font-size: 0;position: absolute;top: -52px;left: -13px;-webkit-transform: rotate(90deg);transform: rotate(90deg);
}.toggle-all + label:before {content: '❯';font-size: 22px;color: #e6e6e6;padding: 10px 27px 10px 27px;
}.toggle-all:checked + label:before {color: #737373;
}.todo-list {margin: 0;padding: 0;list-style: none;
}.todo-list li {position: relative;font-size: 24px;border-bottom: 1px solid #ededed;
}.todo-list li:last-child {border-bottom: none;
}.todo-list li.editing {border-bottom: none;padding: 0;
}.todo-list li.editing .edit {display: block;width: calc(100% - 43px);padding: 12px 16px;margin: 0 0 0 43px;
}.todo-list li.editing .view {display: none;
}.todo-list li .toggle {text-align: center;width: 40px;/* auto, since non-WebKit browsers doesn't support input styling */height: auto;position: absolute;top: 0;bottom: 0;margin: auto 0;border: none; /* Mobile Safari */-webkit-appearance: none;appearance: none;
}.todo-list li .toggle {opacity: 0;
}.todo-list li .toggle + label {/*Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/*/background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');background-repeat: no-repeat;background-position: center left;
}.todo-list li .toggle:checked + label {background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}.todo-list li label {word-break: break-all;padding: 15px 15px 15px 60px;display: block;line-height: 1.2;transition: color 0.4s;
}.todo-list li.completed label {color: #d9d9d9;text-decoration: line-through;
}.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 40px;height: 40px;margin: auto 0;font-size: 30px;color: #cc9a9a;margin-bottom: 11px;transition: color 0.2s ease-out;
}.todo-list li .destroy:hover {color: #af5b5e;
}.todo-list li .destroy:after {content: '×';
}.todo-list li:hover .destroy {display: block;
}.todo-list li .edit {display: none;
}.todo-list li.editing:last-child {margin-bottom: -1px;
}.footer {color: #777;padding: 10px 15px;height: 20px;text-align: center;border-top: 1px solid #e6e6e6;
}.footer:before {content: '';position: absolute;right: 0;bottom: 0;left: 0;height: 50px;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0, 0, 0, 0.2);
}.todo-count {float: left;text-align: left;
}.todo-count strong {font-weight: 300;
}.filters {margin: 0;padding: 0;list-style: none;position: absolute;right: 0;left: 0;
}.filters li {display: inline;
}.filters li a {color: inherit;margin: 3px;padding: 3px 7px;text-decoration: none;border: 1px solid transparent;border-radius: 3px;
}.filters li a:hover {border-color: rgba(175, 47, 47, 0.1);
}.filters li a.selected {border-color: rgba(175, 47, 47, 0.2);
}
/* completed */
.clear-completed,
html .clear-completed:active {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer;
}.clear-completed:hover {text-decoration: underline;
}.info {margin: 65px auto 0;color: #bfbfbf;font-size: 10px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);text-align: center;
}.info p {line-height: 1;
}.info a {color: inherit;text-decoration: none;font-weight: 400;
}.info a:hover {text-decoration: underline;
}/*Hack to remove background from Mobile Safari.Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {.toggle-all,.todo-list li .toggle {background: none;}.todo-list li .toggle {height: 40px;}
}@media (max-width: 430px) {.footer {height: 50px;}.filters {bottom: 10px;}
}

4.参考文档

https://cn.vuejs.org/
https://wscgm.csb.app/

Vue模仿todo超详细讲解（附源码）相关推荐

【HTML | CSS】纯CSS居然能做出这种效果，一款宝藏网页分享（超详细讲解 | 附源码）
微信小程序UI自动化实践：python+minium+PO模式（超详细教程附源码供下载）
文章目录前言一.minium介绍二.安装环境 1. 安装minium doc 2. 安装minium 3. 启动小程序三.准备知识 1. 启动 2. 配置 3. 命令行运行 4. 元素定位 5 ...
超详细！附源码！SpringBoot+shiro+mybatis+Thymeleaf实现权限登录系统
最近在做一个期末作品,就是使用ssm+thymeleaf+vue+shiro完成一个具有权限登录,且能实现用户信息增删查改的这么一个项目,下面仅仅是实现权限认证和登录.为什么我选shiro,而不选sp ...
python k-means聚类算法物流分配预测实战（超详细，附源码）
数据集和地图可以点赞关注收藏后评论区留下QQ邮箱或者私信博主要聚类是一类机器学习基础算法的总称. 聚类的核心计算过程是将数据对象集合按相似程度划分成多个类,划分得到的每个类称为聚类的簇聚类不等于分 ...
C语言实现扫雷游戏(超详细讲解+全部源码)
电子信息工科男一点一点努力! 文章目录前言一.游戏介绍二.游戏设计思路二.具体步骤 1.创建test.c和game.c源文件以及 game.h头文件 2.创建菜单 3.创建雷盘 4.初始化 ...
微信小程序-传统开发模式实现授权注册登录流程【超详细，附源码】
利用SpringBoot和Vue实现前后端分离（附源码）
利用SpringBoot和Vue实现前后端分离(附源码) 引言: 本文主要分享了SpringBoot和Vue整合实现前后端分离,实现了简单的增删查改:包括:项目的搭建.后端的实现.前台的实现:(附源码 ...
超详细！ArrayList源码图文解析
不诗意的女程序媛不是好厨师~ 转载请注明出处,From李诗雨-[https://blog.csdn.net/cjm2484836553/article/details/104329665] <超 ...
java计算机毕业设计vue校园菜鸟驿站管理系统（附源码、数据库）
java计算机毕业设计vue校园菜鸟驿站管理系统(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ecl ...

Vue模仿todo超详细讲解（附源码）

Vue模仿todo超详细讲解（附源码）

一、todo基本DOM结构

二、todo功能需求分析

1.新增任务

2.点击变成完成状态

3.点击删除

4.双击进入编辑以及修改保存

5.底部的状态筛选

6.li中添加“:key”

7.计算未完成的任务

8.计算全选和反选

9.清除所有已完成任务

10.使用浏览器缓存获取数据

三、所有源码如下

1.代码文件结构

2.html所有代码

3.css所有代码

4.参考文档

Vue模仿todo超详细讲解（附源码）相关推荐

最新文章

热门文章