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.
80 lines
1.8 KiB
JavaScript
80 lines
1.8 KiB
JavaScript
Vue.component("level-badge", {
|
|
props: {
|
|
level: {
|
|
type: String,
|
|
default: "基础",
|
|
},
|
|
},
|
|
template: `<span class="badge">{{ level }}</span>`,
|
|
});
|
|
|
|
const CourseItem = {
|
|
props: {
|
|
course: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
template: `
|
|
<article class="course-card" :class="{ 'is-done': course.finished }">
|
|
<div class="meta">
|
|
<level-badge :level="course.level"></level-badge>
|
|
<strong>{{ course.title }}</strong>
|
|
</div>
|
|
<p>{{ course.finished ? "当前已完成" : "当前学习中" }}</p>
|
|
<button type="button" @click="$emit('toggle', course.id)">
|
|
<slot name="action">操作</slot>
|
|
</button>
|
|
</article>
|
|
`,
|
|
};
|
|
|
|
new Vue({
|
|
el: "#app",
|
|
components: {
|
|
CourseItem,
|
|
},
|
|
data: {
|
|
keyword: "",
|
|
statusFilter: "all",
|
|
courses: [
|
|
{ id: 1, title: "Vue 实例基础", finished: true, level: "基础" },
|
|
{ id: 2, title: "模板语法与指令", finished: false, level: "基础" },
|
|
{ id: 3, title: "组件通信实战", finished: false, level: "进阶" },
|
|
{ id: 4, title: "生命周期和异步", finished: true, level: "进阶" },
|
|
],
|
|
},
|
|
computed: {
|
|
filteredCourses() {
|
|
// 任务：
|
|
// 1. 先按 statusFilter 过滤
|
|
// 2. 再按 keyword 过滤标题
|
|
return this.courses;
|
|
},
|
|
totalCount() {
|
|
return this.courses.length;
|
|
},
|
|
finishedCount() {
|
|
// 任务：返回已完成课程数量
|
|
return 0;
|
|
},
|
|
visibleCount() {
|
|
// 任务：返回当前筛选后的数量
|
|
return 0;
|
|
},
|
|
},
|
|
watch: {
|
|
keyword(newValue) {
|
|
// 任务：在控制台输出关键字变化
|
|
},
|
|
},
|
|
methods: {
|
|
toggleCourse(courseId) {
|
|
// 任务：根据 courseId 切换 finished
|
|
},
|
|
focusSearch() {
|
|
// 任务：通过 ref 聚焦输入框
|
|
},
|
|
},
|
|
});
|