Vue开发经典项目TodoMVC，秒变程序员高手

前端

2022-12-10 03:18:33

使用Vue.js构建一个强大的TodoMVC应用

简介

TodoMVC是一个经典的前端开发项目，因其丰富的功能和对各种技术（包括React、AngularJS和JQuery）的支持而备受推崇。本文将指导您使用Vue.js构建一个全面的TodoMVC应用程序，阐述其核心概念、组件结构和最佳实践。

Vue.js简介

Vue.js是一个渐进式的JavaScript框架，专门用于构建交互式和可复用的用户界面。它提供了一种清晰简洁的语法，使开发人员能够轻松创建动态和响应式的web应用程序。

项目需求

TodoMVC应用程序需要实现以下功能：

添加任务
完成任务
删除任务
编辑任务
过滤任务

项目结构

一个典型的TodoMVC应用程序遵循以下结构：

- src
  - App.vue
  - components
    - TodoItem.vue
  - main.js
  - router.js
  - store.js
- index.html
- package.json

组件创建

项目需要两个主要组件：

App.vue： 应用程序的主组件，负责渲染整个用户界面。
TodoItem.vue： 任务项组件，负责渲染和管理单个任务。

代码示例：

App.vue

<template>
  <div id="app">
    <h1>Todo List</h1>
    <input v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <todo-item v-for="todo in todos" :key="todo.id" :todo="todo" @remove="removeTodo"></todo-item>
    </ul>
  </div>
</template>

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

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      todos: [],
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.todos.push({
          id: Date.now(),
          text: this.newTodo,
          completed: false
        })
        this.newTodo = ''
      }
    },
    removeTodo(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    }
  }
}
</script>

TodoItem.vue

<template>
  <li>
    <input type="checkbox" v-model="todo.completed">
    <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
    <button @click="remove">X</button>
  </li>
</template>

<script>
export default {
  props: ['todo'],
  methods: {
    remove() {
      this.$emit('remove', this.todo.id)
    }
  }
}
</script>

Vuex集成

Vuex是一个状态管理库，可帮助您管理应用程序的状态。它允许您集中管理数据并轻松地将其提供给所有组件。

代码示例：

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    todos: []
  },
  mutations: {
    ADD_TODO(state, todo) {
      state.todos.push(todo)
    },
    REMOVE_TODO(state, id) {
      state.todos = state.todos.filter(todo => todo.id !== id)
    },
    TOGGLE_TODO(state, id) {
      const todo = state.todos.find(todo => todo.id === id)
      todo.completed = !todo.completed
    }
  },
  actions: {
    addTodo({ commit }, todo) {
      commit('ADD_TODO', todo)
    },
    removeTodo({ commit }, id) {
      commit('REMOVE_TODO', id)
    },
    toggleTodo({ commit }, id) {
      commit('TOGGLE_TODO', id)
    }
  }
})

export default store

使用Vuex的App.vue

<script>
import Vuex from 'vuex'

export default {
  components: {
    TodoItem
  },
  data() {
    return {
      newTodo: ''
    }
  },
  computed: {
    todos() {
      return this.$store.state.todos
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) {
        this.$store.dispatch('addTodo', {
          text: this.newTodo,
          completed: false
        })
        this.newTodo = ''
      }
    },
    removeTodo(id) {
      this.$store.dispatch('removeTodo', id)
    },
    toggleTodo(id) {
      this.$store.dispatch('toggleTodo', id)
    }
  }
}
</script>