10x3 精读 Vue 官方文档 - 示例 - TODO MVC 代码分析

1. 存储

官方示例封装了一个简易的 todoStorage，它提供了对 TODO 数据的增、删、改、查操作。这个存储模块是整个 TODO MVC 应用程序的基础，它负责数据的持久化和管理。

// todoStorage.js
export default {
  fetch() {
    return JSON.parse(localStorage.getItem('todos') || '[]')
  },
  save(todos) {
    localStorage.setItem('todos', JSON.stringify(todos))
  }
}

2. 视图

视图负责将数据渲染到页面上，它由一个 Vue 组件构成。这个组件使用 v-for 指令来遍历 TODO 数据，并使用 v-model 指令来实现双向数据绑定。

<!-- App.vue -->
<template>
  <div id="app">
    <h1>TODO MVC</h1>
    <input v-model="newTodo" @keyup.enter="addTodo" placeholder="What needs to be done?">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed">
        <span>{{ todo.title }}</span>
        <button @click="removeTodo(todo)">X</button>
      </li>
    </ul>
  </div>
</template>

<script>
import todoStorage from './todoStorage.js'

export default {
  data() {
    return {
      todos: todoStorage.fetch(),
      newTodo: ''
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim() === '') return
      const todo = {
        id: Date.now(),
        title: this.newTodo,
        completed: false
      }
      this.todos.push(todo)
      todoStorage.save(this.todos)
      this.newTodo = ''
    },
    removeTodo(todo) {
      const index = this.todos.indexOf(todo)
      this.todos.splice(index, 1)
      todoStorage.save(this.todos)
    }
  }
}
</script>

3. 控制器

控制器负责处理用户交互，它由一个 Vue 实例构成。这个实例监听用户输入，并调用相应的存储和视图方法来更新数据和界面。

// main.js
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App)
})

4. 运行应用程序

要运行这个应用程序，您需要在项目根目录下安装依赖项：

npm install

然后运行以下命令启动应用程序：

npm run dev

应用程序将在 http://localhost:8080 上运行。

5. 总结

通过阅读本文，您应该对 Vue.js 的核心概念和使用方法有了更深入的了解。您还应该能够轻松构建自己的 Vue.js 项目。如果您有任何问题或建议，请随时在评论区留言。