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.
37 lines
750 B
JavaScript
37 lines
750 B
JavaScript
new Vue({
|
|
el: "#app",
|
|
data: {
|
|
loading: true,
|
|
courses: [],
|
|
},
|
|
created() {
|
|
console.log("created: 实例已经创建");
|
|
},
|
|
mounted() {
|
|
console.log("mounted: 页面已经挂载");
|
|
|
|
setTimeout(() => {
|
|
this.courses = [
|
|
{ id: 1, title: "生命周期基础" },
|
|
{ id: 2, title: "异步数据渲染" },
|
|
{ id: 3, title: "组件更新时机" },
|
|
];
|
|
this.loading = false;
|
|
}, 1000);
|
|
},
|
|
updated() {
|
|
console.log("updated: 页面数据已经更新");
|
|
},
|
|
beforeDestroy() {
|
|
console.log("beforeDestroy: 实例即将销毁");
|
|
},
|
|
destroyed() {
|
|
console.log("destroyed: 实例已经销毁");
|
|
},
|
|
methods: {
|
|
destroyInstance() {
|
|
this.$destroy();
|
|
},
|
|
},
|
|
});
|