todolist组件化编程

组件化编程流程(通用)

  1. 实现静态组件：抽取组件，使用组件实现静态页面效果

搭建项目框架

 

将静态页面拆分为头部 | 列表 | 尾部 | 列表项

将样式按照组件拆分

     2.展示动态数据：

a.数据的类型、名称是什么？

b.数据保存在哪个组件？

在组件MyList中，定义并遍历列表数据，然后将数据传递到子组件MyItem中

 在组件MyItem中，将父组件MyList传递的数据展示

 3.交互------从绑定事件监听开始

       按回车键，获取输入框的值

       方式一：通过v-model双向数据绑定，获取输入框的值

 方式二：通过事件对象，获取输入框的值

 将用户输入内容组装成一个todo对象

1.id要求唯一：

安装生成唯一的库nanoid

cnpm i nanoid --save

 引入nanoid

import {nanoid} from 'nanoid'

 使用nanoid

nanoid()

 2.如何将组件MyHeader收集的数据传递给兄弟组件MyList

        方式一：全局事件总栈

        方式二：消息订阅与发布

        方式三：vuex

        方式四：使用最基础的父传子，子传父通信

 具体实现代码

1.将组件MyList中date，剪切到根组件App中

2.父传子

      2.1 通过属性，将组件App中date数据传递给子组件MyList

         2.2 子组件MyList通过props配置接收传递的数据

 3.子传父

        3.1 在根组件App中定义addTodo方法

        3.2 将addTodo方法传递给子组件MyHeader

       3.3 在子组件MyHeader中接收，并调用addTodo方法

    3.4 数据校验，清空输入框

doSubmit(e){

        //校验数据

        if(!e.target.value.trim()) return alert('请输入内容')

        //将用户输入内容组装成一个todo对象

        const todoObj = {id:nanoid(),title:e.target.value.trim(),done:false}

        this.addTodo(todoObj);

        //清空输入框

        e.target.value = ""

}

 4. 切换完成状态

       原理：子传父

       在App组件中定义修改状态方法

     经过MyList

     最终传递给MyItem

 5. 单删

        在App组件定义删除方法

    在MyList组件传递方法

    在MyItem组件调用方法

 6. 底部统计

在App.vue组件，将todos传递到MyFooter组件

 使用计算属性统计数量

 7. 底部交互

        反选功能

       全选or取消全选

       在App.vue定义方法，并传递给MyFooter

      在MyFooter.vue调用方法

      全选按钮的状态，涉及到设置和获取，可以使用v-model

8. 清除所有完成事项

      在App中定义方法，并传递给MyFooter 

      在MyFooter中调用方法

 9. 总结TodoList案例

  • 组件化编程流程：
    • 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
    • 实现动态组件：考虑好数据的存放位置，数据是个组件在用，还是一些组件在用：
      • 一个组件在用：放在组件自身即可。
      • 一些组件在用：放在它们共同的父组件上(状态提升)
    • 实现交互：从绑定事件开始。
  • props适用于：
    • 父组件==》子组件 通信
    • 子组件==》父组件通信(要求父先给子一个函数)
  • 使用v-model时要切记：v-model绑定的值不能时props传过来值，因为props是不可以修改的！
  • props传过来的若是对象类型的值，修改对象中属性Vue不会报错，单不推荐这样做。

todolist组件化编程

组件化编程流程(通用)

  1. 实现静态组件：抽取组件，使用组件实现静态页面效果

搭建项目框架

 

将静态页面拆分为头部 | 列表 | 尾部 | 列表项

将样式按照组件拆分

     2.展示动态数据：

a.数据的类型、名称是什么？

b.数据保存在哪个组件？

在组件MyList中，定义并遍历列表数据，然后将数据传递到子组件MyItem中

 在组件MyItem中，将父组件MyList传递的数据展示

 3.交互------从绑定事件监听开始

       按回车键，获取输入框的值

       方式一：通过v-model双向数据绑定，获取输入框的值

 方式二：通过事件对象，获取输入框的值

 将用户输入内容组装成一个todo对象

1.id要求唯一：

安装生成唯一的库nanoid

cnpm i nanoid --save

 引入nanoid

import {nanoid} from 'nanoid'

 使用nanoid

nanoid()

 2.如何将组件MyHeader收集的数据传递给兄弟组件MyList

        方式一：全局事件总栈

        方式二：消息订阅与发布

        方式三：vuex

        方式四：使用最基础的父传子，子传父通信

 具体实现代码

1.将组件MyList中date，剪切到根组件App中

2.父传子

      2.1 通过属性，将组件App中date数据传递给子组件MyList

         2.2 子组件MyList通过props配置接收传递的数据

 3.子传父

        3.1 在根组件App中定义addTodo方法

        3.2 将addTodo方法传递给子组件MyHeader

       3.3 在子组件MyHeader中接收，并调用addTodo方法

    3.4 数据校验，清空输入框

doSubmit(e){

        //校验数据

        if(!e.target.value.trim()) return alert('请输入内容')

        //将用户输入内容组装成一个todo对象

        const todoObj = {id:nanoid(),title:e.target.value.trim(),done:false}

        this.addTodo(todoObj);

        //清空输入框

        e.target.value = ""

}

 4. 切换完成状态

       原理：子传父

       在App组件中定义修改状态方法

     经过MyList

     最终传递给MyItem

 5. 单删

        在App组件定义删除方法

    在MyList组件传递方法

    在MyItem组件调用方法

 6. 底部统计

在App.vue组件，将todos传递到MyFooter组件

 使用计算属性统计数量

 7. 底部交互

        反选功能

       全选or取消全选

       在App.vue定义方法，并传递给MyFooter

      在MyFooter.vue调用方法

      全选按钮的状态，涉及到设置和获取，可以使用v-model

8. 清除所有完成事项

      在App中定义方法，并传递给MyFooter 

      在MyFooter中调用方法

 9. 总结TodoList案例

  • 组件化编程流程：
    • 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
    • 实现动态组件：考虑好数据的存放位置，数据是个组件在用，还是一些组件在用：
      • 一个组件在用：放在组件自身即可。
      • 一些组件在用：放在它们共同的父组件上(状态提升)
    • 实现交互：从绑定事件开始。
  • props适用于：
    • 父组件==》子组件 通信
    • 子组件==》父组件通信(要求父先给子一个函数)
  • 使用v-model时要切记：v-model绑定的值不能时props传过来值，因为props是不可以修改的！
  • props传过来的若是对象类型的值，修改对象中属性Vue不会报错，单不推荐这样做。