踏足Vue3之旅：我的第一个TODO-LIST组件

2023-11-26 17:02:57

Vue3：崭新旅程的序章

作为一名资深的前端开发者，我对Vue框架有着深厚的感情和丰富的经验。如今，Vue3已经翩然而至，我迫不及待地想要一睹它的风采，感受它与Vue2的不同之处。为了更好地理解和掌握Vue3，我决定从一个最简单的TODO-LIST组件开始，逐步探索Vue3的奥秘。

环境搭建：Vite和Composition API

在开始编码之前，我们需要搭建一个合适的开发环境。我选择了Vite作为构建工具，因为它轻巧、快速，并且与Vue3完美兼容。此外，我还将使用composition API，这是一种新的API，可以让我们以更简洁、更模块化的方式编写Vue组件。

第一步：创建一个Vue3项目

首先，我们需要创建一个新的Vue3项目。我们可以使用Vite提供的命令行工具来轻松实现：

npm create vite@latest my-vue3-project

第二步：安装必要的依赖

接下来，我们需要安装必要的依赖。除了Vue3本身，我们还需要安装composition API的插件：

npm install -D @vue/composition-api

第三步：创建TODO-LIST组件

现在，我们就可以创建我们的第一个Vue3组件了。在src文件夹中，创建一个名为TodoList.vue的文件，并输入以下代码：

<template>
  <div>
    <h1>TODO List</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo.id)">X</button>
      </li>
    </ul>
    <input type="text" v-model="newTodoText" @keyup.enter="addTodo">
  </div>
</template>

<script>
import { ref, reactive } from '@vue/composition-api';

export default {
  setup() {
    const todos = reactive([
      { id: 1, text: 'Learn Vue3' },
      { id: 2, text: 'Build a TODO-LIST app' },
      { id: 3, text: 'Share it with the world' },
    ]);

    const newTodoText = ref('');

    const addTodo = () => {
      if (newTodoText.value.trim()) {
        todos.push({ id: Date.now(), text: newTodoText.value });
        newTodoText.value = '';
      }
    };

    const removeTodo = (id) => {
      const index = todos.findIndex((todo) => todo.id === id);
      if (index > -1) {
        todos.splice(index, 1);
      }
    };

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

<style>
h1 {
  color: #3498db;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 0.5rem;
}

li:hover {
  background-color: #f5f5f5;
}

button {
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: #999;
}

button:hover {
  color: #3498db;
}

input {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 1rem;
}
</style>