d0d8be443b
- Introduced Vue3 exercises covering composable API, reactivity, lifecycle hooks, and built-in components. - Added structured interview plan for frontend candidates focusing on HTML, CSS, JavaScript, TypeScript, and Vue. - Included starter files for each exercise and detailed README documentation for guidance.
40 lines
898 B
JavaScript
40 lines
898 B
JavaScript
const { createApp } = Vue;
|
|
|
|
createApp({
|
|
components: {
|
|
CourseItem: {
|
|
props: {
|
|
course: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
emits: ["toggle"],
|
|
template: `
|
|
<article class="card">
|
|
<h2>{{ course.title }}</h2>
|
|
<p :class="{ done: course.finished }">
|
|
{{ course.finished ? "已完成" : "学习中" }}
|
|
</p>
|
|
<button type="button" @click="$emit('toggle', course.id)">切换状态</button>
|
|
</article>
|
|
`,
|
|
},
|
|
},
|
|
setup() {
|
|
const courses = Vue.ref([
|
|
{ id: 1, title: "组合式 API", finished: true },
|
|
{ id: 2, title: "组件通信", finished: false },
|
|
]);
|
|
|
|
function toggleCourse(courseId) {
|
|
// 任务：根据 courseId 切换对应课程的 finished
|
|
}
|
|
|
|
return {
|
|
courses,
|
|
toggleCourse,
|
|
};
|
|
},
|
|
}).mount("#app");
|