Vue3.0 TODO清单——你的第一个Vue项目

2024-02-08 19:19:06

前言

当我们面对着新技术的到来时，有些人看文档已经大概了解其中缘由，甚至已经能直接上手项目。但有些刚入门的小伙伴，对于新技术可谓是又爱又恨。

其实，不要害怕写错代码，要勇于尝试，要在错误的代码中寻找自己的薄弱点并攻破。加油，从写第一个TODO清单开始吧。

项目准备

首先，我们需要安装Node.js和Vue CLI。Node.js是一个JavaScript运行时环境，Vue CLI是一个用于创建Vue项目的命令行工具。

安装完成后，我们可以使用Vue CLI创建一个新的Vue项目。在命令行中输入以下命令：

vue create my-todo-app

这将创建一个名为“my-todo-app”的新项目。

创建组件

接下来，我们需要创建Vue组件。组件是Vue应用程序的基本构建块，它们可以被重用和组合以创建复杂的应用程序。

在“my-todo-app”项目中，我们需要创建一个名为“TodoList”的组件。在“src”目录下创建一个名为“TodoList.vue”的新文件，并输入以下代码：

<template>
  <div>
    <h1>TODO清单</h1>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="deleteTodo(todo)">删除</button>
      </li>
    </ul>
    <input type="text" v-model="newTodoText">
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { id: 1, text: '学习Vue3.0' },
        { id: 2, text: '构建一个TODO清单应用程序' },
        { id: 3, text: '完成本教程' }
      ],
      newTodoText: ''
    }
  },
  methods: {
    deleteTodo(todo) {
      this.todos = this.todos.filter(t => t.id !== todo.id)
    },
    addTodo() {
      if (this.newTodoText.trim()) {
        this.todos.push({ id: Date.now(), text: this.newTodoText })
        this.newTodoText = ''
      }
    }
  }
}
</script>