VUE3进阶之路：学以致用打造todolist

2023-12-15 14:48:10

正文

VUE3是一个功能强大的前端框架，可以帮助您轻松构建复杂的单页应用程序。在本文中，我们将使用VUE3来构建一个功能齐全的todolist应用。我们将从创建项目开始，然后逐步添加功能，如添加、删除和勾选任务，以及显示未完成任务和全选功能。最后，我们将部署项目，以便您可以在任何地方访问它。

1. 创建项目

首先，我们需要创建一个新的VUE3项目。您可以使用以下命令来做到这一点：

npx create-vue-app my-todo-app

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

2. 安装必要的依赖

接下来，我们需要安装必要的依赖。我们将使用axios来发送HTTP请求，以及vue-router来管理路由。您可以使用以下命令来安装这些依赖：

npm install axios vue-router

3. 创建组件

现在，我们需要创建一些组件。我们将创建一个App组件，一个Todo组件和一个TodoList组件。

App组件

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router'
import TodoList from './TodoList.vue'

export default {
  components: { TodoList },
  created() {
    const router = createRouter({
      history: createWebHistory(),
      routes: [
        { path: '/', component: TodoList }
      ]
    })

    this.$router = router
  }
}
</script>

Todo组件

<template>
  <li>
    <input type="checkbox" v-model="done">
    <input type="text" v-model="text">
    <button @click="deleteTodo">删除</button>
  </li>
</template>

<script>
export default {
  props: ['todo'],
  data() {
    return {
      done: this.todo.done,
      text: this.todo.text
    }
  },
  methods: {
    deleteTodo() {
      this.$emit('delete-todo', this.todo)
    }
  }
}
</script>

TodoList组件

<template>
  <div>
    <input type="text" v-model="newTodoText">
    <button @click="addTodo">添加</button>
    <ul>
      <todo v-for="todo in todos" :todo="todo" @delete-todo="deleteTodo"></todo>
    </ul>
  </div>
</template>

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

export default {
  components: { Todo },
  data() {
    return {
      todos: [],
      newTodoText: ''
    }
  },
  methods: {
    addTodo() {
      this.todos.push({
        done: false,
        text: this.newTodoText
      })

      this.newTodoText = ''
    },
    deleteTodo(todo) {
      const index = this.todos.indexOf(todo)

      this.todos.splice(index, 1)
    }
  }
}
</script>

4. 配置路由

现在，我们需要配置路由。我们将使用vue-router来管理路由。在src/router/index.js文件中，我们可以添加以下代码：

import { createRouter, createWebHistory } from 'vue-router'
import TodoList from '../components/TodoList.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: TodoList }
  ]
})

export default router