使用Vue3创建一个基础的Todo列表应用，包含添加、删除和标记完成任务的功能

JJCTO袁龙

于 2024-06-30 08:44:15 发布

阅读量317

点赞数 12

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

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

版权

Vue 专栏收录该内容

428 篇文章 5 订阅

订阅专栏

在前端开发领域，面试者往往会被要求展示他们对现代框架的实际应用能力。Vue.js，作为一个渐进式JavaScript框架，是前端开发中相当流行的选择。在本篇博客中，我们将共同探索如何使用Vue3创建一个基础的Todo列表应用，并实现任务的添加、删除和标记完成的功能。这不仅可以帮助你更好地理解Vue.js的核心概念，还能为你在面试中展示实际编码能力提供一个优秀的项目示例。

一、项目初始化

首先，我们需要确保已经安装了Node.js和npm（或者yarn）。然后使用Vue CLI进行项目的初始化。

npm install -g @vue/cli
vue create todo-app
cd todo-app

二、项目结构

项目创建完成后，你会看到类似如下的目录结构：

.
├── node_modules
├── public
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── babel.config.js
├── package-lock.json
├── package.json
├── README.md
└── vue.config.js

三、编写代码

1. App.vue 文件

App.vue 是整个Vue应用的核心组件，我们将在这里定义基础的模板和逻辑。

<template>
  <div id="app">
    <h1>Todo List</h1>
    <todo-input @add-task="addTask"></todo-input>
    <todo-list 
      :tasks="tasks" 
      @remove-task="removeTask" 
      @mark-complete="markTaskComplete">
    </todo-list>
  </div>
</template>

<script>
import { ref } from 'vue';
import TodoInput from './components/TodoInput.vue';
import TodoList from './components/TodoList.vue';

export default {
  name: 'App',
  components: {
    TodoInput,
    TodoList
  },
  setup() {
    const tasks = ref([]);

    const addTask = (newTask) => {
      tasks.value.push({
        id: Date.now(),
        text: newTask,
        completed: false
      });
    };

    const removeTask = (taskId) => {
      tasks.value = tasks.value.filter(task => task.id !== taskId);
    };

    const markTaskComplete = (taskId) => {
      const task = tasks.value.find(task => task.id === taskId);
      if (task) {
        task.completed = !task.completed;
      }
    };

    return {
      tasks,
      addTask,
      removeTask,
      markTaskComplete
    };
  }
}
</script>

<style>
/* 这里可以根据需要添加样式 */
</style>

2. TodoInput 组件

接下来我们编写用于输入新任务的TodoInput组件。

<template>
  <div>
    <input 
      v-model="newTask"
      @keyup.enter="emitAddTask" 
      placeholder="Add a new task"
    />
    <button @click="emitAddTask">Add</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'TodoInput',
  emits: ['add-task'],
  setup(props, { emit }) {
    const newTask = ref('');

    const emitAddTask = () => {
      if (newTask.value.trim() !== '') {
        emit('add-task', newTask.value.trim());
        newTask.value = '';
      }
    };

    return {
      newTask,
      emitAddTask
    };
  }
}
</script>

<style>
/* 这里可以根据需要添加样式 */
</style>

3. TodoList 组件

然后编写展示任务列表的TodoList组件。

<template>
  <ul>
    <li v-for="task in tasks" :key="task.id">
      <span 
        :style="{ textDecoration: task.completed ? 'line-through' : 'none' }"
        @click="toggleComplete(task.id)"
      >
        {{ task.text }}
      </span>
      <button @click="emitRemoveTask(task.id)">Delete</button>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TodoList',
  props: {
    tasks: Array
  },
  emits: ['remove-task', 'mark-complete'],
  setup(props, { emit }) {
    const emitRemoveTask = (taskId) => {
      emit('remove-task', taskId);
    };

    const toggleComplete = (taskId) => {
      emit('mark-complete', taskId);
    };

    return {
      emitRemoveTask,
      toggleComplete
    };
  }
}
</script>

<style>
/* 这里可以根据需要添加样式 */
</style>