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.
31 lines
592 B
JavaScript
31 lines
592 B
JavaScript
new Vue({
|
|
el: "#app",
|
|
data: {
|
|
loading: true,
|
|
courses: [],
|
|
},
|
|
created() {
|
|
console.log("created: 实例已经创建");
|
|
},
|
|
mounted() {
|
|
// 任务：
|
|
// 1. 模拟异步请求
|
|
// 2. 1 秒后给 courses 赋值
|
|
// 3. loading 改成 false
|
|
},
|
|
updated() {
|
|
// 任务：在控制台输出 updated 日志
|
|
},
|
|
beforeDestroy() {
|
|
// 任务：在控制台输出 beforeDestroy 日志
|
|
},
|
|
destroyed() {
|
|
// 任务：在控制台输出 destroyed 日志
|
|
},
|
|
methods: {
|
|
destroyInstance() {
|
|
// 任务：调用 this.$destroy()
|
|
},
|
|
},
|
|
});
|