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

Vue.js 学习笔记：TodoList 待办事项小案例

news 来源：原创 2025/5/16 4:09:59

文章目录

- 前言
- 一、项目概述
- 二、代码解析
- - 1. HTML 结构
  - - 亮点解析
  - 2. Vue.js 实现
  - - 功能解析
- 三、优化与改进
- - 1. 用户体验优化
  - 2. 代码优化
- 四、总结与展望

前言

今天浅学了一下vue，将所学知识点应用到这个非常经典的TodoList 待办事项小案例中。
在这里插入图片描述

一、项目概述

本次案例是一个基于 Vue.js 的待办事项应用，用户可以通过输入框添加待办事项，并对其进行删除或清空操作。整个应用界面简洁明了，功能实用，非常适合初学者学习和实践 Vue.js 的基本功能。

二、代码解析

1. HTML 结构

在 HTML 部分，我们构建了一个简单的用户界面，包括输入框、按钮以及用于显示待办事项的列表。

<div id="app">
    <input type="text" v-model="newThing" placeholder="请输入待办事项" />
    <input type="button" value="添加记事本" @click="add" />

    <br>
    <span v-for="(value, index) in things" :key="index">
        <ul>
            <li>
                {{value}}
                <a href="javascript:;" @click="remove(index)">删除</a><br>
            </li>
        </ul>
    </span>
    <span v-show="things.length != 0">总数量：{{things.length}}条
        <input type="button" value="删除所有" @click="clearAll">
    </span>
</div>

亮点解析

v-model 双向绑定：输入框通过 v-model="newThing" 实现了数据的双向绑定，用户输入的内容会实时更新到 Vue 实例中的 newThing 数据属性中。
v-for 动态渲染列表：通过 v-for="(value, index) in things"，我们可以动态地渲染待办事项列表。每个事项都被包裹在一个 <li> 标签中，方便展示和操作。
事件绑定：使用 @click 绑定点击事件，例如添加事项、删除事项和清空所有事项的功能。
条件渲染：通过 v-show="things.length != 0"，我们实现了只有在待办事项列表不为空时，才显示总数量和删除所有按钮的功能。

2. Vue.js 实现

在 Vue.js 的部分，我们定义了数据和方法，实现了待办事项的核心功能。

const app = new Vue({
    el: "#app",
    data: {
        things: [],
        newThing: "",
    },
    methods: {
        add() {
            if (this.newThing.trim() === "") {
                alert("请输入有效的待办事项！");
                return;
            }
            this.things.push(this.newThing);
            this.newThing = "";
        },
        remove(index) {
            this.things.splice(index, 1);
        },
        clearAll() {
            this.things = [];
        }
    }
});

功能解析

添加事项：add 方法首先检查用户输入的内容是否为空，如果为空则弹出提示框提醒用户输入有效的待办事项。如果输入有效，则将内容添加到 things 数组中，并清空输入框。
删除事项：remove 方法通过 splice 方法，根据传入的索引值从 things 数组中删除对应的事项。
清空所有事项：clearAll 方法直接将 things 数组清空，实现一键清空所有待办事项的功能。