潍坊搜索引擎优化_河南商丘网络图_东莞网络营销优化_新网

在日常开发中，我们经常需要处理各种任务和计划。一个简单且高效的任务管理器可以帮助我们更好地组织和安排时间。今天，我将向大家展示如何使用 Vue.js 构建一个简易的任务管理器。这个项目不仅能够帮助我们更好地理解 Vue.js 的基本语法和功能，还能为我们提供一个实用的小工具。

项目概述

这个任务管理器的主要功能包括：

添加任务：用户可以在输入框中输入任务内容，并点击“确认”按钮将其添加到任务列表中。
删除任务：用户可以点击任务旁边的“删除”按钮，将任务从列表中移除。
清空任务：用户可以点击“清除”按钮，将所有任务一次性清空。
显示任务总数：在任务列表下方显示当前任务的总数。

vue的在线cdn

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

HTML 结构

以下是 index.html 的代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>任务管理器</title><link type="text/css" href="css/style.css" rel="stylesheet" /></head><body><div id="box"><div class="head"><h2>Todos</h2><p>罗列日常计划，做一个时间管理大师！</p><div class="input"><span>内容</span><input type="text" placeholder="请输入你要做的事" /><span id="add" @click="add">确认</span></div></div><ul class="list"><li v-if="data.length==0">暂无数据</li><template v-else><li v-for="(item, index) in data" :key="index"><span class="xh">{{ index + 1 }}</span><span>{{ item }}</span><span class="qc" @click="remove(index)"></span></li><li><b>总数：{{ data.length }}</b><b id="clear" @click="clear">清除</b></li></template></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>var top = new Vue({el: "#box",data() {return {data: ["吃", "喝"],};},methods: {remove(index) {this.data.splice(index, 1);},clear() {this.data = [];},add() {let inputVal = document.querySelector("input").value;this.data.push(inputVal);},},});</script></body>
</html>

HTML 结构解析

头部区域：
- 包含一个标题 Todos 和一段描述文字，提示用户可以在这里罗列日常计划。
- 一个输入框和一个“确认”按钮，用于添加新的任务。
任务列表区域：
- 使用 Vue.js 的 v-for 指令动态生成任务列表。
- 每个任务项包含序号、任务内容和一个删除按钮。
- 如果任务列表为空，则显示“暂无数据”。
- 在任务列表的最后显示当前任务的总数和一个“清除”按钮。

Vue.js 逻辑实现

数据部分

JavaScript复制

data() {return {data: ["吃", "喝"],};
}

data 是一个数组，用于存储任务列表。初始值包含两个任务：“吃”和“喝”。

方法部分

添加任务：

JavaScript复制

add() {let input = document.querySelector("input");let inputVal = input.value; // 获取输入框的值if (inputVal.trim() !== "") { // 检查输入是否为空this.data.push(inputVal); // 将值添加到任务列表}input.value = ""; // 清空输入框
}

获取输入框的值，并将其添加到 data 数组中。

删除任务：

JavaScript复制
```
remove(index) {this.data.splice(index, 1);
}
```
- 使用 splice 方法从数组中移除指定索引的任务。
清空任务：

JavaScript复制
```
clear() {this.data = [];
}
```
- 将 data 数组清空，从而移除所有任务。

样式设计

@charset "utf-8"; /* 设置字符编码为UTF-8，确保支持多种字符 */
/* 全局重置样式 */
* {padding: 0; /* 移除所有元素的内边距 */margin: 0; /* 移除所有元素的外边距 */
}/* 列表样式重置 */
ul {list-style: none; /* 移除列表的默认样式（如圆点、数字等） */
}/* 页面背景设置 */
body {background-color: #2d2d2d; /* 设置页面背景颜色为深灰色 */
}/* 任务管理器容器样式 */
#box {width: 800px; /* 设置容器宽度 */margin: 50px auto; /* 上下外边距为50px，左右外边距自动，使容器水平居中 */background-color: #fff; /* 设置容器背景颜色为白色 */box-shadow: 0 0 10px #ccc; /* 添加阴影效果，增强立体感 */border-radius: 5px; /* 设置圆角边框 */overflow: hidden; /* 隐藏超出容器的内容 */
}/* 容器头部样式 */
#box .head {background-color: #DFF0D8; /* 设置头部背景颜色为淡绿色 */padding: 20px; /* 添加内边距 */
}/* 头部标题样式 */
#box .head h2 {color: #3C763D; /* 设置标题颜色为深绿色 */
}/* 头部描述文字样式 */
#box .head p {font-size: 12px; /* 设置字体大小 */color: #3C763D; /* 设置字体颜色为深绿色 */line-height: 30px; /* 设置行高 */
}/* 输入区域样式 */
#box .head .input {height: 30px; /* 设置高度 */line-height: 30px; /* 设置行高，使文字垂直居中 */border-radius: 5px; /* 设置圆角边框 */background-color: #EEEEEE; /* 设置背景颜色为浅灰色 */overflow: hidden; /* 隐藏超出区域 */border: 1px solid #ccc; /* 添加边框 */
}/* 输入区域内的span样式 */
#box .head .input span {display: inline-block; /* 设置为行内块元素 */width: 50px; /* 设置宽度 */height: 30px; /* 设置高度 */text-align: center; /* 文字居中 */font-size: 12px; /* 设置字体大小 */float: left; /* 向左浮动 */
}/* 输入框样式 */
#box .head .input input {float: left; /* 向左浮动 */width: calc(100% - 102px); /* 计算宽度，确保输入框占据剩余空间 */border: none; /* 移除边框 */outline: none; /* 移除焦点时的轮廓 */height: 30px; /* 设置高度 */text-indent: 20px; /* 设置文本缩进 */
}/* 输入区域内的第一个span样式（内容提示） */
#box .head .input span:first-child {border-right: 1px solid #ccc; /* 添加右侧边框 */
}/* 输入区域内的最后一个span样式（添加按钮） */
#box .head .input span:last-child {border-left: 1px solid #ccc; /* 添加左侧边框 */cursor: pointer; /* 设置鼠标指针为手型，表示可点击 */
}/* 任务列表区域样式 */
#box .list {padding: 20px; /* 添加内边距 */
}/* 任务列表项样式 */
#box .list li {border-bottom: 1px dashed #ccc; /* 添加底部虚线边框 */height: 40px; /* 设置高度 */font-size: 14px; /* 设置字体大小 */color: #2D2D2D; /* 设置字体颜色 */
}/* 最后一个列表项样式 */
#box .list li:last-child {line-height: 40px; /* 设置行高 */border-bottom: none; /* 移除底部边框 */padding: 0 20px; /* 添加内边距 */
}/* 列表项内的span样式 */
#box .list li span {float: left; /* 向左浮动 */height: 20px; /* 设置高度 */line-height: 20px; /* 设置行高 */margin: 10px 0; /* 设置上下外边距 */text-align: center; /* 文字居中 */
}/* 列表项内的第一个span样式（序号） */
#box .list li span:first-child {width: 50px; /* 设置宽度 */border-right: 1px solid #ccc; /* 添加右侧边框 */margin-right: 10px; /* 设置右侧外边距 */
}/* 列表项内的最后一个span样式（删除按钮） */
#box .list li span:last-child {width: 30px; /* 设置宽度 */background: url(../img/icon.png) no-repeat center center; /* 设置背景图片 */background-size: 50%; /* 设置背景图片大小 */float: right; /* 向右浮动 */margin-right: 20px; /* 设置右侧外边距 */cursor: pointer; /* 设置鼠标指针为手型 */
}/* 最后一个列表项内的第一个b标签样式（总数提示） */
#box .list li:last-child b:first-child {float: left; /* 向左浮动 */
}/* 最后一个列表项内的最后一个b标签样式（清除按钮） */
#box .list li:last-child b:last-child {float: right; /* 向右浮动 */cursor: pointer; /* 设置鼠标指针为手型 */
}

全局样式：重置了默认的 padding 和 margin，并移除了列表的默认样式。
容器样式：设置了任务管理器容器的宽度、背景颜色、阴影和圆角，使其在页面中居中显示。
头部样式：设置了头部的背景颜色、内边距、标题和描述文字的样式。
输入区域样式：设计了输入框和按钮的布局，包括宽度计算、边框和浮动。
任务列表样式：定义了任务列表项的布局、边框、字体大小和颜色。
特殊样式：为序号、删除按钮、总数提示和清除按钮添加了特定的样式和交互效果。

总结

通过这个简单的任务管理器项目，我们学习了 Vue.js 的基本用法，包括数据绑定、事件处理和条件渲染等功能。这个项目虽然简单，但功能实用，可以作为我们日常任务管理的小工具。同时，它也为初学者提供了一个很好的学习和实践机会，帮助大家更好地理解和掌握 Vue.js 的开发技巧。

如果你对这个项目感兴趣，可以尝试自己动手实现，并根据自己的需求进行扩展和优化。例如，可以为任务添加优先级、设置完成状态、保存任务到本地存储等功能，让任务管理器更加完善和强大。

希望这篇文章对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言交流。