3435848495
- Implement dynamic styles and event handling in Vue2 with a card component. - Create lifecycle methods exercise to simulate async data loading and instance destruction. - Develop a component communication exercise with props, events, and slots. - Build a comprehensive course management dashboard with filtering, statistics, and component interactions.
32 lines
957 B
Markdown
32 lines
957 B
Markdown
# 练习 7：生命周期和异步更新
|
||
|
||
## 目标
|
||
|
||
学会在合适的生命周期里加载数据，并理解页面更新的时机。
|
||
|
||
## 你要练什么
|
||
|
||
- `created`
|
||
- `mounted`
|
||
- `updated`
|
||
- `beforeDestroy`
|
||
- `destroyed`
|
||
- 模拟异步请求
|
||
|
||
## 任务
|
||
|
||
请基于页面结构完成以下操作：
|
||
|
||
- 进入页面时显示 loading
|
||
- 在 `mounted` 里模拟异步获取课程数据
|
||
- 数据返回后渲染课程列表
|
||
- 在 `updated` 里输出更新日志
|
||
- 点击按钮时销毁当前实例，并观察销毁日志
|
||
|
||
## 文件
|
||
|
||
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/07-lifecycle-and-async/starter.html)
|
||
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/07-lifecycle-and-async/starter.js)
|
||
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/07-lifecycle-and-async/answer.html)
|
||
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/07-lifecycle-and-async/answer.js)
|