feat: add Vue2 exercises for dynamic styles, lifecycle methods, component communication, and course management dashboard
- 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.
This commit is contained in:
26
07-vue2/05-computed-and-watch/starter.js
Normal file
26
07-vue2/05-computed-and-watch/starter.js
Normal file
@@ -0,0 +1,26 @@
|
||||
new Vue({
|
||||
el: "#app",
|
||||
data: {
|
||||
keyword: "",
|
||||
courses: [
|
||||
{ id: 1, title: "Vue 实例入门" },
|
||||
{ id: 2, title: "Vue 指令系统" },
|
||||
{ id: 3, title: "组件通信实战" },
|
||||
],
|
||||
},
|
||||
computed: {
|
||||
filteredCourses() {
|
||||
// 任务:返回过滤后的课程列表
|
||||
return this.courses;
|
||||
},
|
||||
matchedCount() {
|
||||
// 任务:返回 filteredCourses 的数量
|
||||
return 0;
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
keyword(newValue) {
|
||||
// 任务:在控制台输出关键字变化
|
||||
},
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user