Vue3实现一个简单的待办事项列表，可以添加和删除事项
前端开发一直是技术领域中的一个重要分支，而在前端框架中，Vue.js以其简单易用、性能优越以及丰富的生态系统深受开发者欢迎。如果你准备面试前端岗位，掌握Vue3的使用技巧将对你大有裨益。本文将通过一个简单的待办事项列表项目，展示如何使用Vue3实现添加和删除事项的功能。
本文将从项目的初始化开始，逐步讲解如何创建一个功能齐全的待办事项列表。在此过程中，将涉及到Vue3的基本语法和核心概念，希望能为读者提供实用的学习资料。
项目初始化
首先，我们需要创建一个Vue3项目。如果尚未安装Vue CLI，请先通过以下命令进行安装：
npm install -g @vue/cli
然后，使用Vue CLI创建一个新的Vue项目：
vue create todo-list-app
进入项目目录：
cd todo-list-app
启动项目：
npm run serve
完成以上步骤后，Vue项目的基础骨架就已经搭建好了，我们可以开始编写待办事项列表的具体代码。
创建Todo组件
在Vue3中，利用组件可以更好地组织和复用代码。首先，我们需要在src/components目录下创建一个Todo.vue文件：
<template>
<div class="todo-app">
<h1>待办事项列表</h1>
<div>
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="请输入新的待办事项" />
<button @click="addTodo">添加</button>
</div>
<ul>
<li v-for="(todo, index) in todos" :key="index">
{{ todo.text }}
<button @click="removeTodo(index)">删除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'Todo',
data() {
return {
newTodo: '',
todos: []
};
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({ text: this.newTodo });
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
};
</script>
<style scoped>
.todo-app {
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f9f9f9;
}
h1 {
text-align: center;
}
div {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
border: none;
background-color: #007BFF;
color: #fff;
cursor: pointer;
border-radius: 4px;
margin-left: 10px;
}
button:hover {
background-color: #0056b3;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ccc;
}
</style>
在上述代码中，我们定义了一个名为Todo的组件，该组件包含以下部分：
- 模板（template）：定义了待办事项列表的结构，包括输入框、添加按钮以及显示所有待办事项的列表。
- 数据（data）：包含两个属性，
newTodo用于绑定输入框的值，todos用于存储所有的待办事项。 - 方法（methods）：
addTodo方法用于添加新的待办事项，removeTodo方法用于删除指定的待办事项。 - 样式（style）：定义了一些基本的样式，使待办事项列表看起来更美观。
使用Todo组件
接下来，我们需要在项目的入口文件中使用Todo组件，使其在页面上显示。打开src/App.vue文件，并进行如下修改：
<template>
<div id="app">
<Todo />
</div>
</template>
<script>
import Todo from './components/Todo.vue';
export default {
name: 'App',
components: {
Todo
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
在上述代码中，我们导入了Todo组件，并在App组件的模板中使用了<Todo />标签。这样，待办事项列表就会显示在应用的首页。
深入解读关键部分
走到这里，我们已经完成了一个简单的待办事项列表应用。为了更好地理解其中的实现原理，我们再来深入解读一下关键部分。
双向数据绑定
Vue.js中的双向数据绑定是一个核心概念。通过v-model指令，我们将输入框的值和组件的数据属性newTodo绑定在一起：
<input v-model="newTodo" @keyup.enter="addTodo" placeholder="请输入新的待办事项" />
这样，当输入框的内容发生变化时，newTodo的值也会相应更新。
添加事项
在addTodo方法中，我们首先检查newTodo是否为空。对于非空的情况，我们将newTodo的值添加到todos数组中，并清空输入框：
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({ text: this.newTodo });
this.newTodo = '';
}
}
删除事项
使用array.splice()方法，我们可以通过索引删除todos数组中的特定项。在removeTodo方法中，我们传递待删除项的索引，并调用splice方法执行删除：
removeTodo(index) {
this.todos.splice(index, 1);
}
测试功能
启动开发服务器后，我们可以在浏览器中输入地址http://localhost:8080，看到应用页面。输入待办事项，并点击“添加”按钮或按下回车键，可以将新的事项添加到列表中。点击“删除”按钮，可以删除指定的事项。
通过完成这个简单的项目，我们不仅实现了Vue3中的基本功能，同时也掌握了双向数据绑定、事件处理、条件渲染等Vue.js的核心概念。
结语
待办事项列表是前端开发中的一个经典案例，通过这个简单的项目，我们不仅能够练习Vue3的基本操作，还能在面试中展示自己的技术实力。