从零开始：使用Vue3构建你的第一个Todo List应用

原创

日晚间粉 2024-08-18 17:14:09 ©著作权

©著作权归作者所有：来自51CTO博客作者日晚间粉的原创作品，请联系作者获取转载授权，否则将追究法律责任

从零开始：使用Vue3构建你的第一个Todo List应用

在现代的前端开发中，Vue.js作为一款流行的前端框架，有着极大的用户基础和众多的应用实例。特别是Vue 3引入的Composition API和setup语法糖，让我们在构建组件时更加灵活和简洁。在本文中，我们将引导你从零开始，构建一个简单的Todo List应用，并使用Vue 3的setup语法糖来实现功能。

准备工作

在开始之前，请确保你的开发环境中已安装Node.js和npm。接下来，我们将在本地创建一个新的Vue 3项目。你可以使用Vue CLI来快速搭建一个开发环境。

npm install -g @vue/cli
vue create todo-list

在创建项目时，选择Vue 3的选项。完成后，进入项目目录并启动开发服务器：

cd todo-list
npm run serve

打开浏览器并访问http://localhost:8080，你应该能够看到Vue的欢迎页面。

创建Todo List组件

接下来，我们将创建一个Todo List组件。在src/components文件夹中创建一个名为TodoList.vue的新文件：

<template>
  <div class="todo-list">
    <h1>我的Todo List</h1>
    <input v-model="newTodo" placeholder="添加新的任务..." @keyup.enter="addTodo" />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        <input type="checkbox" v-model="todo.completed" />
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="removeTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

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

export default {
  setup() {
    const newTodo = ref('');
    const todos = ref([]);

    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.value.push({ text: newTodo.value, completed: false });
        newTodo.value = '';
      }
    };

    const removeTodo = (index) => {
      todos.value.splice(index, 1);
    };

    return {
      newTodo,
      todos,
      addTodo,
      removeTodo,
    };
  },
}
</script>

<style>
.completed {
  text-decoration: line-through;
}
.todo-list {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

input[type="text"] {
  width: calc(100% - 42px);
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin-left: 10px;
  color: white;
  background-color: #FF5722;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
}
</style>

代码解析

Template:

我们在模板中定义了一个输入框，用于添加新的任务。输入框使用v-model与newTodo变量进行双向绑定。
通过v-for指令循环遍历todos数组，并渲染每个任务。每个任务旁边都有一个复选框和一个删除按钮。

Script:

我们使用ref创建响应式数据newTodo和todos。
addTodo函数：当用户按下回车键时，将输入框中的内容添加到todos数组中，并清空输入框。
removeTodo函数：根据索引从todos数组中删除对应的任务。

Style:

样式部分为Todo List组件添加了基本的样式，使其看起来更加美观。你可以根据自己的需求进行更改和扩展。

使用TodoList组件

现在我们已经完成了Todo List组件的创建，接下来在src/App.vue中使用这个组件。

<template>
  <div id="app">
    <TodoList />
  </div>
</template>

<script>
import TodoList from './components/TodoList.vue';

export default {
  components: {
    TodoList,
  },
}
</script>