Vue 3.0 TodoList 入门指南: 从无到有创建您的第一个应用程序

前端

2023-11-07 19:58:52

Vue3.0 精简 TodoList 案例：从入门到精通

在当今快节奏的世界中，保持井井有条和高效至关重要。使用 TodoList 应用程序可以轻松跟踪任务、设置提醒和管理日常活动。借助 Vue 3.0，构建您自己的 TodoList 应用程序从未如此简单。

入门

Vue 3.0 是一个渐进式的 JavaScript 框架，用于构建用户界面。它以其轻量、灵活性和小巧的体积而闻名。要开始使用 Vue 3.0，您需要：

Node.js 和 npm
文本编辑器或 IDE
基础 JavaScript 知识

设置项目

使用 npm 创建一个新的 Vue 项目：

npx @vue/cli create vue3-todolist

cd vue3-todolist

运行开发服务器：

npm run serve

构建 TodoList

1. 创建组件

在 src 目录中，创建一个名为 TodoList.vue 的文件：

<template>
  <div>
    <h1>TodoList</h1>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }}
        <button @click="removeTodo(todo.id)">X</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(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
}
</script>

2. 注册组件

在 src/main.js 中，注册 TodoList 组件：

import { createApp } from 'vue'
import App from './App.vue'
import TodoList from './components/TodoList.vue'

const app = createApp(App)
app.component('TodoList', TodoList)
app.mount('#app')