使用 Vue.js 创建一个简单的待办事项应用

2025/4/21 0:27:34 来源：https://blog.csdn.net/qq_29752857/article/details/144064572 浏览: 次关键词：使用 Vue.js 创建一个简单的待办事项应用

博客标题：使用 Vue.js 创建一个增强的待办事项列表

简介

待办事项列表是学习前端开发的经典项目，它不仅能够帮助你理解如何构建动态用户界面，还能够让你熟悉事件处理和数据管理。在这篇文章中，我们将通过一个增强版的待办事项列表示例，介绍如何使用 Vue.js 来实现一个具有添加和删除任务功能的待办事项应用。

一、Vue.js 简介

Vue.js 是一个轻量级的渐进式 JavaScript 框架，它易于上手，同时提供了强大的数据绑定和组件系统。Vue.js 的核心库专注于视图层，使得开发者能够快速构建高效的用户界面。

二、待办事项应用的实现

以下是一个待办事项应用的实现，它包含了添加任务和删除任务的功能，并且对输入进行了简单的验证。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>To-Do List</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 
</head>
<body>
<div id="Application"><form @submit.prevent="addTask"><span>新建任务</span><input type="text" v-model="newTask" placeholder="请输入任务"><button>添加</button></form><ol><li v-for="(item, index) in todos" :key="index">{{ item }}<button @click="remove(index)">删除任务</button></li></ol>
</div>
<script>const App = {data() {return {newTask: "",todos: []}},methods: {addTask() {if (this.newTask === "") return;this.todos.push(this.newTask);this.newTask = "";},remove(index) {this.todos.splice(index, 1);}}};Vue.createApp(App).mount("#Application");
</script>
</body>
</html>

三、代码解析

HTML 结构：页面包含一个表单用于输入新任务，以及一个有序列表用于展示任务。
数据绑定：使用 v-model 指令将输入框的值与 newTask 数据属性双向绑定。
事件处理：表单的提交事件通过 @submit.prevent 监听，调用 addTask 方法，防止表单的默认提交行为。
任务添加：addTask 方法首先检查 newTask 是否为空，如果为空则不执行添加操作。然后将 newTask 的值添加到 todos 数组中，并清空输入框。
任务删除：remove 方法通过索引使用 splice 函数从 todos 数组中删除任务。
列表渲染：使用 v-for 指令遍历 todos 数组，为每个任务生成列表项。