Todo 案例
删除任务
1、index 版本
2、id 版本
底部数量
- 将list 传入 footer
- footer 接收渲染 length 即可
切换数据显示
底部按钮边框切换
数据切换
清空已完成
数据持久化
全选功能
被动
如果所有的任务都没勾选, 这个全选框应该被动被选中
将数组传入header 用计算属性的出是否全选的判断
主动
额外需要处理的问题
如果没有数据的时候, 不应该全选
跨组件传递(事件总线)
生命周期
从创建 到 销毁 的整个过程就是 – Vue实例的 - 生命周期
实例的生命周期如下
生命周期钩子函数
官方文档:cn.vuejs.org/v2/guide/in…
作用: 特定的时间点,执行特定的操作
场景: 组件创建完毕后,可以在created 生命周期函数中发起Ajax 请求,从而初始化 data 数据
四大阶段八个函数
- 初始化 created
- 挂载 mounted
- 更新 updated
- 销毁 destroyed
初始化
created函数触发能获取data,不能获取真实DOM
挂载
mounted 可以获取真实Dom
更新
当数据发生变化并更新页面后 ,执行updated钩子函数
在updated钩子函数里,可以获取更新后的DOM
销毁
axios 引入和试用
axios函数调用返回结果是一个Promise对象
axios:
底层还是原生js实现, 内部通过Promise封装的
是基于原生ajax+Promise技术封装通用于前后端的请求库