Vue.js 学习条记：TodoList 待服务项小案例

前言

本日浅学了一下vue，将所学知识点应用到这个非常经典的TodoList 待服务项小案例中。

一、项目概述

本次案例是一个基于 Vue.js 的待服务项应用，用户可以通过输入框添加待服务项，并对其举行删除或清空操纵。整个应用界面轻便明确，功能实用，非常得当初学者学习和实践 Vue.js 的根本功能。
二、代码分析

1. HTML 结构

在 HTML 部分，我们构建了一个简单的用户界面，包罗输入框、按钮以及用于表现待服务项的列表。

1. <div id="app">
2.     <input type="text" v-model="newThing" placeholder="请输入待办事项" />
3.     <input type="button" value="添加记事本" @click="add" />
5.     <br>
6.     <span v-for="(value, index) in things" :key="index">
7.         <ul>
8.             <li>
9.                 {{value}}
10.                 <a href="javascript:;" @click="remove(index)">删除</a><br>
11.             </li>
12.         </ul>
13.     </span>
14.     <span v-show="things.length != 0">总数量：{{things.length}}条
15.         <input type="button" value="删除所有" @click="clearAll">
16.     </span>
17. </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 的部分，我们界说了数据和方法，实现了待服务项的核心功能。

1. const app = new Vue({
2.     el: "#app",
3.     data: {
4.         things: [],
5.         newThing: "",
6.     },
7.     methods: {
8.         add() {
9.             if (this.newThing.trim() === "") {
10.                 alert("请输入有效的待办事项！");
11.                 return;
12.             }
13.             this.things.push(this.newThing);
14.             this.newThing = "";
15.         },
16.         remove(index) {
17.             this.things.splice(index, 1);
18.         },
19.         clearAll() {
20.             this.things = [];
21.         }
22.     }
23. });

复制代码

功能分析

• 添加事项：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 提供资助，也期待你在实践中不绝探索，创造出更多风趣且实用的应用！如果你有任何标题或发起，欢迎在品评区留言，我们一起交换学习！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告