# TodoDemo

**Repository Path**: dropm/todo-demo

## Basic Information

- **Project Name**: TodoDemo
- **Description**: vue 组件化开发 TodoList
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-02-19
- **Last Updated**: 2024-02-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### TodoList 项目

#### 项目介绍 

使用 vue 开发 TodoList,应用到的知识包括 组件化开发、provide、inject 、父子组件交互等

#### 项目目录

![1708321457538](screenShot/1708321457538.png)

##### TodoFooter

![1708321596670](screenShot/1708321596670.png)

底部组件：包括显示代办事项总条数和清空代办事项列表

##### TodoHeader

![1708321730607](screenShot/1708321730607.png)

头部组件：包括输入组件和添加代办按钮组件

##### Todos

![1708321856586](screenShot/1708321856586.png)

用于渲染所有代办事项。

##### TodoList

待办项目主入口，组合其它各组件，接收从子组件传递的事件并处理，也负责将数据传递给子组件。

```
<template>
  <div>
    <todo-header @add-todo="addTodo"></todo-header>
    <todos
      :data="todoList"
      @toggle-completed="toggleCompleted"
      @remove-todo="removeTodo"
    ></todos>
    <todo-footer
    @remove-all="removeAll"></todo-footer>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader'
import TodoInput from './components/TodoInput'
import Todos from './components/Todos'
export default {
  name: 'TodoList',
  components: {
    TodoHeader,
    TodoInput,
    Todos,
  },
  // provide 如果要使用到 data 数据，需要使用这种书写方式
  provide() {
    return {
      placeholder: Vue.completed(() => this.placeholder),
      todoLen: Vue.completed(() => this.todoList.length)
    }
  },
  data() {
    return {
      todoList: [],
      placeholder: '请输入你的任务名称，按回车键确认',
    }
  },
  mounted() {
    setTimeout(() => {
      this.placeholder = '请输入你的任务名称，按回车键确认'
    }, 1000)
  },
  methods: {
    /**
     * 添加任务
     */
    addTodo(todo) {
      this.todoList.push(todo)
    },
    /**
     * 处理任务完成状态
     */
    toggleCompleted(id) {
      this.todoList = this.todoList.map((item) => {
        if (item.id === id) {
          item.completed = !item.completed
        }
        return item
      })
    },
    /**
     * 移除任务
     */
    removeTodo(id) {
      this.todoList = this.todoList.filter((item) => item.id !== id)
    },
    /**
     * 清空数据
     */
    removeAll(){
      this.todoList = []
    }
  },
}
</script>

<style lang="scss" scoped></style>
```