Vue3实现一个简单的待办事项列表，可以添加和删除事项

最新推荐文章于 2025-03-07 12:28:25 发布

JJCTO袁龙

最新推荐文章于 2025-03-07 12:28:25 发布

阅读量1.6k

点赞数 11

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/yuanlong12178/article/details/139721509

版权

Vue 专栏收录该内容

703 篇文章

订阅专栏

前端开发一直是技术领域中的一个重要分支，而在前端框架中，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);
}
```