广厦建设集团官方网站wordpress游客评论游客

前言

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

三、优化与改进

1. 用户体验优化

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

2. 代码优化

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

四、总结与展望

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

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

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

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