Vue Todo List 教程

Vue.js 是一个非常流行的前端框架，用于构建用户界面和单页应用程序。在这个教程中，我们将学习如何使用 Vue.js 创建一个简单的 Todo List 应用程序。

创建项目

首先，你需要创建一个新的 Vue 项目。你可以使用 Vue CLI 来快速开始：

vue create vue-todo-list

组件结构

我们的 Todo List 应用程序将包含以下组件：

App.vue：主组件，包含整个应用的逻辑和结构。
TodoInput.vue：用于添加新任务的组件。
TodoList.vue：显示任务列表的组件。

TodoInput 组件

首先，我们来创建 TodoInput.vue 组件，它将允许用户输入新的任务。

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加任务">
    <button @click="addTodo">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    addTodo() {
      this.$emit('add-todo', this.newTodo);
      this.newTodo = '';
    }
  }
};
</script>

TodoList 组件

接下来，我们创建 TodoList.vue 组件，用于显示任务列表。

<template>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">
      {{ todo }}
      <button @click="removeTodo(index)">删除</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    todos: Array
  },
  methods: {
    removeTodo(index) {
      this.$emit('remove-todo', index);
    }
  }
};
</script>

App.vue 组件

最后，我们修改 App.vue 组件，将其作为整个应用的入口。

<template>
  <div id="app">
    <todo-input @add-todo="addTodo"></todo-input>
    <todo-list :todos="todos" @remove-todo="removeTodo"></todo-list>
  </div>
</template>

<script>
import TodoInput from './components/TodoInput.vue';
import TodoList from './components/TodoList.vue';

export default {
  components: {
    TodoInput,
    TodoList
  },
  data() {
    return {
      todos: []
    };
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push(newTodo);
    },
    removeTodo(index) {
      this.todos.splice(index, 1);
    }
  }
};
</script>

<style>
/* 添加一些简单的样式 */
#app {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
ul {
  list-style: none;
  padding: 0;
}
</style>

扩展阅读

想了解更多关于 Vue.js 的知识？请访问我们的 Vue.js 教程。