VueCLI核心知识综合案例TodoList

目录

1 拿到一个功能模块首先需要拆分组件：

2 使用组件实现静态页面的效果

3 分析数据保存在哪个组件

4 实现添加数据

5 实现复选框勾选

6 实现数据的删除

7 实现底部组件中数据的统计

8 实现勾选全部的小复选框来实现大复选框的勾选

9 实现勾选大复选框来实现所有的小复选框都被勾选

10 清空所有数据

11 实现案例中的数据存入本地存储

12 案例中使用自定义事件完成组件间的数据通信

13 案例中实现数据的编辑

14 实现数据进出的动画效果

---

【分析】组件化编码的流程

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

2.展示动态数据：

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

        2.2 数据保存在哪个组件？

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

---

1 拿到一个功能模块首先需要拆分组件：

---

2 使用组件实现静态页面的效果

【main.js】

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

Vue.config.productionTip = false

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

【MyHeader】

【Item】

【List】

【MyFooter】

【App】 

---

通过以上代码就可以实现静态页面的效果了！！！

3 分析数据保存在哪个组件

在上述代码中数据是保存在Item组件中的，但是如果想要在后续实现一系列交互效果：在MyHeader组件中需要添加数据，而MyHeader组件和Item组件没有直接的关系， 就当前学习阶段的知识而言，并不能实现这两个组件之间的通信(后续会有解决方案)，同理MyFooter也一样。

---

【分析】因为App组件是所有组件的父组件，所以数据放在App组件中，再使用props配置，所有的子组件就都可以访问到。

【App】（同时需要将数据传递到Item组件中，在当前阶段只能通过props配置一层一层往下传，所以是 App-->List，List-->Item）

1. 实现 App-->List 传递todos数据

---

2. List接受todos数据

---

通过上述的代码便可以根据数据的数量来渲染出几个Item了，但是此时Item里面是没有内容的，所以需要 List-->Item 再次传递每条数据

---

3. 实现 List-->Item 传递todo数据

4. Item接受todo数据

4 实现添加数据

【App】定义接收数据的回调函数

【MyHeader】实现添加数据的方法

5 实现复选框勾选

【App】也是要逐层传递

【List】

【Item】

6 实现数据的删除

【App】

【List】

【Item】

7 实现底部组件中数据的统计

【分析】如果想要统计数据的数量，就需要将数据传递到MyFooter组件中

【App】

【MyFooter】

在这个组件中可以使用计算属性实现数据的总长度和被勾选的数据的计算

8 实现勾选全部的小复选框来实现大复选框的勾选

:checked="isAll"

isAll也是通过计算属性计算得来的

【MyFooter】 

9 实现勾选大复选框来实现所有的小复选框都被勾选

【App】

【MyFooter】

10 清空所有数据

【App】

【MyFooter】

11 实现案例中的数据存入本地存储

【分析】首先我们要知道什么时候需要将数据存入本地存储？所以这就用到了watch监听，当todos的值发生变化时，将新的值存入本地存储。

又因为当我们勾选复选框时，我们发现本地存储中的 done 值并没有发生变化？这主要是因为监听默认只会监听第一层，如果想要监听对象中某个数据发生变化时，就需要深度监视了。

【App】

这里使用 || 运算可以防止一开始本地存储中没有数据而报错

12 案例中使用自定义事件完成组件间的数据通信

这边以添加数据为例

【App】

给发送数据的组件绑定自定义事件

...
 methods: {
      // 添加一个todo
      addTodo(todoObj) {
            this.todos.unshift(todoObj)
      },
}

【MyHeader】

13 案例中实现数据的编辑

需求分析：当点击编辑按钮时，变成input表单修改数据，此时编辑按钮隐藏，当失去焦点时，编辑完成，显示编辑后的数据，同时编辑按钮显示。

 这边使用全局事件总线来实现通信

【App】

        methods: {
            ...
            // 更改
            updateTodo(id,title) {
                this.todos.forEach((todo) => {
                  if (todo.id === id) todo.title = title
                })
            },

            ...
        },

        mounted() {
            this.$bus.$on('updateTodo', this.updateTodo)
        },

        beforeDestroy() {
            this.$bus.$off('updateTodo')
        }

---

【Item】

---

---

因为如果想要失去焦点时实现数据的修改，那么你必须提前获取焦点，但是由于Vue的执行机制，当Vue底层监视到数据发生改变时，它并不会立即去重新渲染模板，而是继续执行后面的代码，所以如果不加以处理的话，直接获取焦点，肯定会报错，因为页面中的元素还没有加载解析出，找不到获取焦点的input元素，所以可以通过以下的代码实现

this.$nextTick(function() {  // 告诉Vue，DOM渲染完毕后，再执行focus()方法
      this.$refs.inputTiltle.focus()
})

14 实现数据进出的动画效果

【Item】

使用标签包裹

---