使用 Vue.js 构建任务管理器 - 成为时间管理大师

介绍

在这个项目中，你将学习如何使用 Vue.js 构建一个简单的任务管理器应用程序。任务管理器可让你创建、删除并跟踪日常任务，助你成为时间管理大师。

👀 预览

任务管理器应用演示

🎯 任务

在这个项目中，你将学习：

如何设置 Vue.js 环境
如何在页面加载时默认显示“无数据”
如何向任务列表中添加任务
如何从任务列表中删除任务
如何显示任务总数
如何清除整个任务列表

🏆 成果

完成此项目后，你将能够：

从零开始创建一个 Vue.js 应用程序
使用 Vue.js 指令和数据绑定
实现基本的 CRUD（创建、读取、更新、删除）功能
处理用户交互并相应地更新用户界面

设置项目结构

在这一步中，你将设置项目文件和结构。请按照以下步骤完成此步骤：

打开项目文件夹。目录结构如下：

├── css
│   └── style.css ## 页面样式文件
├── img
│   └── icon.png ## 页面所需的小图标
├── js
│    └── vue.js ## Vue.js 2.x 版本框架
└── index.html ## 页面布局和逻辑编码文件

点击 WebIDE 右下角的“Go Live”按钮来运行项目。

接下来，在虚拟机顶部打开“Web 8080”并手动刷新，你将看到页面。

图片描述

当前显示的只是一个静态布局，尚未实现特定功能。

默认显示“无数据”

在这一步中，你将在页面加载时默认显示“无数据”。

在 index.html 文件中，在 el: "#box" 下添加来自 Vue 实例的 data 对象，使其包含一个 todoList 数组：

data: {
  todoList: [],
}

在 HTML 结构中，删除 <ul class="list"></ul> 中的所有代码。然后添加一个条件渲染，以便在 todoList 数组为空时显示“无数据”：

<ul class="list">
  <li v-if="!todoList.length">无数据</li>
  <!-- 待办事项：在此处添加任务列表项 -->
</ul>

保存 index.html 文件并刷新页面。你应该会看到显示“无数据”的消息。最终实现效果如下：

图片描述

向列表中添加任务

在这一步中，你将向任务列表中添加任务。

在 index.html 文件中，在 HTML 结构里添加一个输入框和一个“确认”按钮：

<div class="input">
  <span>内容</span>
  <input type="text" v-model="search" placeholder="请输入你要做的事情" />
  <span id="add" @click="addTodo">确认</span>
</div>

在 Vue 实例中，添加一个 search 数据属性和一个 addTodo 方法：

data: {
  todoList: [],
  search: ""
},
methods: {
  addTodo() {
    this.todoList.push(this.search);
    this.search = "";
  },
}

保存 index.html 文件并刷新页面。你应该能够在输入框中输入文本，然后点击“确认”按钮，将新任务添加到列表中。最终实现效果如下：

图片描述

从列表中删除任务

在这一步中，你将添加从任务列表中删除任务的功能。

在 index.html 文件中，为每个任务项添加一个“删除”图标：

<li v-if="!todoList.length">无数据</li>
<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!-- 前面的序号 -->
  <span class="number">{{index + 1}}</span>
  <!-- 列表内容 -->
  <span>{{todo}}</span>
  <!-- 删除按钮 -->
  <span class="delete" @click="deleteTodo(index)"></span>
</li>

在 Vue 实例中，添加一个 deleteTodo 方法：

methods: {
  //...
  deleteTodo(index) {
    this.todoList.splice(index, 1);
  },
}

保存 index.html 文件并刷新页面。你应该能够点击“删除”图标从列表中移除任务。最终实现效果如下：

图片描述

显示任务总数

在这一步中，你将显示任务列表中的任务总数。

在 HTML 结构中，在任务列表底部添加一个“总数”部分：

<li v-if="todoList.length" v-for="(todo, index) in todoList" :key="index">
  <!--... -->
</li>
<li v-if="todoList.length">
  <b> 总数：{{todoList.length}} </b>
  <!--... -->
</li>

保存 index.html 文件并刷新页面。你应该会在列表底部看到显示的任务总数。

清空任务列表

在这一步中，你将添加清空整个任务列表的功能。

在 Vue 实例中，添加一个 clear 方法：

methods: {
  //...
  clear() {
    this.todoList = [];
    this.search = "";
  }
}

在 HTML 结构中，在“总数”部分添加一个“清空”按钮：

<!--... -->
<li v-if="todoList.length">
  <b> 总数：{{todoList.length}} </b>
  <b id="clear" @click="clear">清空</b>
</li>

保存 index.html 文件并刷新页面。你应该能够点击“清空”按钮从列表中移除所有任务。

恭喜！你已经使用 Vue.js 完成了时间管理大师项目。最终实现效果如下：

图片描述

总结

恭喜！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。