蓝桥杯，利用 Vue.js 构建简易任务管理器

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

项目概述

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

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

vue的在线cdn

javascript 复制代码

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

HTML 结构

以下是 index.html 的代码：

javascript 复制代码

<!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/[email protected]/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复制

javascript 复制代码

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

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

方法部分

添加任务：

JavaScript复制

javascript 复制代码

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

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

删除任务：

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

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

样式设计

css 复制代码

@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 的开发技巧。

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

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