当前位置：首页 > article >正文

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

article 2024/11/28 2:33:26

博客标题：使用 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 数组，为每个任务生成列表项。