从零开始用 Vue 搭建 Todo 应用

前端

2023-12-17 09:10:15

当然可以，这里是一篇关于使用 Vue 从零开始构建 Todo 应用的博客文章，希望能对您有所帮助。

从零开始用 Vue 搭建 Todo 应用

作为一名前端开发者，构建一个 Todo 应用是一个非常常见的练习项目。它可以帮助你熟悉 Vue 的基本语法和开发流程，同时也是一个很好的复习项目。

前提条件

在开始之前，你需要确保你已经具备以下知识：

HTML 和 CSS 的基础知识
JavaScript 的基本语法
Node.js 和 npm 的安装和使用

项目搭建

首先，我们需要创建一个新的 Vue 项目。你可以使用 Vue CLI 工具来完成这一步。

vue create vue-todo-app

然后，进入项目目录并安装必要的依赖项：

cd vue-todo-app
npm install

创建组件

接下来，我们需要创建一个 Todo 组件。在 src 目录下创建一个 Todo.vue 文件，并输入以下代码：

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

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo
        })
        this.newTodo = ''
      }
    },
    removeTodo(todo) {
      const index = this.todos.indexOf(todo)
      if (index > -1) {
        this.todos.splice(index, 1)
      }
    }
  }
}
</script>

<style>
/* ... */
</style>

导入组件

现在，我们需要在 App.vue 文件中导入并使用 Todo 组件。

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

<script>
import Todo from './components/Todo.vue'

export default {
  components: {
    Todo
  }
}
</script>

<style>
/* ... */
</style>