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

文章目录

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

前言

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

一、项目概述

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

二、代码解析

1. HTML 结构

在 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 的部分，我们定义了数据和方法，实现了待办事项的核心功能。

javascript 复制代码

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 数组清空，实现一键清空所有待办事项的功能。

三、优化与改进

1. 用户体验优化

输入提示 ：在输入框中添加了 placeholder 属性，提示用户输入待办事项。
删除按钮样式 ：将删除按钮改为 <a> 标签，并通过 href="javascript:;" 防止默认跳转行为，同时保持按钮的样式一致性。
条件显示 ：通过 v-show 控制总数量和删除所有按钮的显示，避免在没有待办事项时显示无意义的内容。

2. 代码优化

key 的使用 ：在 v-for 中为每个循环项设置了唯一的 key 值，提升了渲染性能。
简洁的逻辑 ：通过直接操作数组的方法（如 push 和 splice），简化了代码逻辑，使代码更加清晰易读。

四、总结与展望

通过这个待办事项应用的开发，我们不仅掌握了 Vue.js 的基本功能，如数据绑定、事件处理、条件渲染和列表渲染，还学会了如何通过简单的优化提升用户体验和代码质量。这个案例虽然简单，但却涵盖了 Vue.js 开发中的许多核心知识点，非常适合初学者学习和实践。

未来，我们可以在此基础上进一步扩展功能，例如：

事项分类：为待办事项添加分类功能，用户可以根据不同的类别管理事项。
完成状态：为每个事项添加完成状态的切换功能，方便用户标记已完成的事项。
数据持久化 ：通过本地存储（localStorage）实现数据的持久化，即使刷新页面也不会丢失数据。

希望这篇笔记能为你学习 Vue.js 提供帮助，也期待你在实践中不断探索，创造出更多有趣且实用的应用！如果你有任何问题或建议，欢迎在评论区留言，我们一起交流学习！