Vue04

53 阅读1分钟

Todo 案例

删除任务

1、index 版本

image.png 2、id 版本

image.png

底部数量

  1. 将list 传入 footer
  2. footer 接收渲染 length 即可

切换数据显示

底部按钮边框切换

image.png

数据切换

image.png

image.png

image.png

清空已完成

image.png

image.png

数据持久化

image.png

全选功能

被动

如果所有的任务都没勾选, 这个全选框应该被动被选中

将数组传入header 用计算属性的出是否全选的判断

image.png

image.png

主动

image.png

额外需要处理的问题

如果没有数据的时候, 不应该全选

image.png

跨组件传递(事件总线)

image.png

生命周期

从创建销毁 的整个过程就是 – Vue实例的 - 生命周期

实例的生命周期如下

image.png

生命周期钩子函数

官方文档:cn.vuejs.org/v2/guide/in…

作用: 特定的时间点,执行特定的操作

场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据

四大阶段八个函数
  • 初始化 created
  • 挂载 mounted
  • 更新 updated
  • 销毁 destroyed

image.png

初始化

created函数触发能获取data,不能获取真实DOM

image.png

挂载

mounted 可以获取真实Dom

image.png

更新

当数据发生变化并更新页面后 ,执行updated钩子函数

在updated钩子函数里,可以获取更新后的DOM

image.png

销毁

image.png

axios 引入和试用

axios函数调用返回结果是一个Promise对象

axios:

底层还是原生js实现, 内部通过Promise封装的

是基于原生ajax+Promise技术封装通用于前后端的请求库

image.png