使用vue3完成todolist案例

最新推荐文章于 2025-09-08 09:25:23 发布

原创

最新推荐文章于 2025-09-08 09:25:23 发布 · 4.4k 阅读

22 ·

CC 4.0 BY-SA版权

本文通过Vue3结合TypeScript实现了一个简易的待办事项应用，包括添加、删除、标记完成等核心功能，并介绍了如何处理ESLint规则冲突及本地存储解决方案。

使用vue3完成todolist案例

- - 介绍
  - 遇到的问题
  - base.css
  - 存储工具类
  - 定义类型
  - app.vue
  - Header.vue
  - List.vue
  - Item.vue
  - Footer.vue

介绍

组件层次关系
在这里插入图片描述
页面效果

在这里插入图片描述

遇到的问题

ESLint 规则: eslint-disable vue/no-mutating-props
源代码

<input type="checkbox" v-model="todo.isCompleted" />

按照规则修改

<input type="checkbox" :checked="todo.isCompleted" @input="$emit('input', $event.target.todo.isCompleted)"  />

base.css

在index.html 引入的页面基本样式 base.css

body {
   
   
  background: #fff;
}

.btn {
   
   
  display: inline-block;
  padding: 4px,12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0 , 0.05) ;
  border-radius: 4px;
}

.btn-danger {
   
   
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
   
   
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
   
   
  outline: none;
}

存储工具类

localStorageUtil.ts

// 保存数据到浏览器的缓存中
export function saveArray(key: string,value: []) {
   
   
  localStorage.setItem(key,JSON.stringify(value))
}
export function readArray(key: string){
   
   
  return JSON.parse(localStorage.getItem(key)|| '[]')
}

定义类型

todo.ts

// 定义一个接口，约束state的数据类型
export interface Todo {
   
   
  id: number,
  title: string,
  isCompleted: boolean
}

app.vue

<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header :addTodo="addTodo" />
      <List :todos = "todos" :delTodo = "delTodo" :updateTodo = "updateTodo" />
      <Footer :todos = "todos" :checkAll ="checkAll" :clear = "clearAllCompletedTodos"/>
    </div>
  </div>
</template>
<script lang='ts'>
import {
    
     defineComponent, onMounted, reactive, toRefs, watch } from "vue";
import Header from './components/Header.vue'
import List from './components/List.vue'
import Footer from './components/Footer.vue'
import {
    
    Todo} from './type/todo'
import {
    
     saveArray, readArray } from './utils/localStorageUtil'
export default defineComponent({
    
    
  name: "App",
  components: {
    
    
    Header,
    List,
    Footer
  },
  setup() {
    
    
    // const state = reactive<{todos: Todo[]}>({
    
    
    //   todos: [
    //     {id:1,title: '记单词',isCompleted: false},
    //     {id:2,title: '编程',isCompleted: true}
    //   ]
    // })
    const state

最低0.47元/天解锁文章