一个完全标准的 TodoMVC 实现

介绍

这是 Vue 官网的一个完全标准的 TodoMVC 实现示例，对其进行了汉化处理。该组件实现了一个简单的 TodoList 应用程序，其中包括添加、编辑、删除、过滤、状态持久化等功能。

template

在 <template> 标签中，通过 v-for 指令循环渲染待办事项列表中的每个待办事项，并使用 v-model 指令实现了双向数据绑定，来实现待办事项的添加、编辑、删除、过滤等功能。

<template>
  <section class="todoapp">
    <header class="header">
      <h1>ToDoList</h1>
      <input
        class="new-todo"
        autofocus
        placeholder="输入后回车添加"
        @keyup.enter="addTodo"
      >
    </header>
    <section class="main" v-show="todos.length">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        :checked="remaining === 0"
        @change="toggleAll"
      >
      <label for="toggle-all" title="切换所有事项状态">切换待办和完成状态</label>
      <ul class="todo-list">
        <li
          v-for="todo in filteredTodos"
          class="todo"
          :key="todo.id"
          :class="{ completed: todo.completed, editing: todo === editedTodo }"
        >
          <div class="view">
            <input class="toggle" type="checkbox" v-model="todo.completed">
            <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
            <button class="destroy" @click="removeTodo(todo)"></button>
          </div>
          <input
            v-if="todo === editedTodo"
            class="edit"
            type="text"
            v-model="todo.title"
            @vnode-mounted="({ el }) => el.focus()"
            @blur="doneEdit(todo)"
            @keyup.enter="doneEdit(todo)"
            @keyup.escape="cancelEdit(todo)"
          >
        </li>
      </ul>
    </section>
    <footer class="footer" v-show="todos.length">
      <span class="todo-count">
        <strong>{{ remaining }}</strong>
        <span> 项待办</span>
      </span>
      <ul class="filters">
        <li>
          <a href="#/all" :class="{ selected: visibility === 'all' }">全部</a>
        </li>
        <li>
          <a href="#/active" :class="{ selected: visibility === 'active' }">待办</a>
        </li>
        <li>
          <a href="#/completed" :class="{ selected: visibility === 'completed' }">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="removeCompleted" v-show="todos.length > remaining">
        清除已完成
      </button>
    </footer>
  </section>
</template>

script

<script setup>
import { ref, computed, watchEffect } from 'vue'

const STORAGE_KEY = 'vue-todomvc'

const filters = {
  all: (todos) => todos,
  active: (todos) => todos.filter((todo) => !todo.completed),
  completed: (todos) => todos.filter((todo) => todo.completed)
}

// 状态
const todos = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'))
const visibility = ref('all')
const editedTodo = ref()

// 获取的状态
const filteredTodos = computed(() => filters[visibility.value](todos.value))
const remaining = computed(() => filters.active(todos.value).length)

// 处理路由
window.addEventListener('hashchange', onHashChange)
onHashChange()

// 状态持久化
watchEffect(() => {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.value))
})

function toggleAll(e) {
  todos.value.forEach((todo) => (todo.completed = e.target.checked))
}

function addTodo(e) {
  const value = e.target.value.trim()
  if (value) {
    todos.value.push({
      id: Date.now(),
      title: value,
      completed: false
    })
    e.target.value = ''
  }
}

function removeTodo(todo) {
  todos.value.splice(todos.value.indexOf(todo), 1)
}

let beforeEditCache = ''
function editTodo(todo) {
  beforeEditCache = todo.title
  editedTodo.value = todo
}

function cancelEdit(todo) {
  editedTodo.value = null
  todo.title = beforeEditCache
}

function doneEdit(todo) {
  if (editedTodo.value) {
    editedTodo.value = null
    todo.title = todo.title.trim()
    if (!todo.title) removeTodo(todo)
  }
}

function removeCompleted() {
  todos.value = filters.active(todos.value)
}

function onHashChange() {
  const route = window.location.hash.replace(/#\/?/, '')
  if (filters[route]) {
    visibility.value = route
  } else {
    window.location.hash = ''
    visibility.value = 'all'
  }
}
</script>

1. 在 <script setup> 标签内，代码首先通过导入 ref、computed 和 watchEffect 等 Vue3 的响应式 API，创建了一些响应式的变量和函数。
2. 其中， todos 保存了 TodoList 中的所有待办事项，visibility 保存了当前选择的待办事项过滤器，editedTodo 保存了当前正在编辑的Todo，filteredTodos 和 remaining 分别是根据当前过滤器过滤后的待办事项列表和未完成的待办事项数量。
3. 在 window.addEventListener('hashchange', onHashChange) 代码中，通过监听浏览器 URL 的变化，实现了根据 URL 中的过滤器参数来筛选待办事项列表的功能。
4. 在 watchEffect(() => {localStorage.setItem(STORAGE_KEY, JSON.stringify(todos.value))}) 代码中，通过使用 watchEffect 函数实现了状态持久化的功能，即每次 todos 的值发生变化时，将其序列化为 JSON 字符串并存储在本地存储中。

样式

todomvc-app-css 是一个基于 CSS 的 TodoMVC 应用程序样式库，其目的是为了帮助开发者快速构建符合 TodoMVC 规范的样式。在 <style> 标签里，我们可以使用 @import 规则将 todomvc-app-css 库的 CSS 文件导入到当前 HTML 文件中，以便应用其样式。

码上掘金