feat: Add Vue3 exercises and interview plan
- 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.
This commit is contained in:
charlie
30
08-vue3/08-final-dashboard/README.md
Normal file
30
08-vue3/08-final-dashboard/README.md
Normal file
@@ -0,0 +1,30 @@
|
||||
# 练习 8：Vue3 综合小面板
|
||||
|
||||
## 目标
|
||||
|
||||
把 Vue3 组合式 API 的主线能力串起来，完成一个小型课程面板。
|
||||
|
||||
## 你要练什么
|
||||
|
||||
- `ref`
|
||||
- `reactive`
|
||||
- `computed`
|
||||
- `watch`
|
||||
- 组件通信
|
||||
- composable
|
||||
- 模板 `ref`
|
||||
|
||||
## 任务
|
||||
|
||||
- 做一个课程搜索和筛选面板
|
||||
- 用 `computed` 计算筛选结果和统计数据
|
||||
- 用 `watch` 输出搜索关键字变化
|
||||
- 用子组件渲染课程卡片
|
||||
- 点击按钮切换课程完成状态
|
||||
- 点击按钮聚焦搜索框
|
||||
- 抽一个 composable 管理课程数据
|
||||
|
||||
## 文件
|
||||
|
||||
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/08-final-dashboard/starter.html)
|
||||
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/08-vue3/08-final-dashboard/starter.js)
|
||||
56
08-vue3/08-final-dashboard/starter.html
Normal file
56
08-vue3/08-final-dashboard/starter.html
Normal file
@@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vue3 综合小面板</title>
|
||||
<style>
|
||||
body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f7fb; }
|
||||
.page { max-width: 960px; margin: 0 auto; display: grid; gap: 18px; }
|
||||
.panel { padding: 22px; border-radius: 20px; background: #fff; border: 1px solid #d9e4f1; }
|
||||
.toolbar { display: grid; grid-template-columns: 1fr 180px 160px; gap: 12px; }
|
||||
input, select, button { padding: 12px 14px; border-radius: 12px; border: 1px solid #cad6e8; font: inherit; }
|
||||
button { border: 0; background: #2d6cdf; color: #fff; cursor: pointer; }
|
||||
.list { display: grid; gap: 14px; }
|
||||
.course-card { padding: 18px; border-radius: 16px; border: 1px solid #dbe4f1; background: #fbfcfe; }
|
||||
.course-card.is-done { border-color: #6cc18a; background: #f3fbf6; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section id="app" class="page">
|
||||
<article class="panel">
|
||||
<h1>Vue3 综合课程面板</h1>
|
||||
<div class="toolbar">
|
||||
<input ref="searchInput" v-model="keyword" type="text" placeholder="输入课程关键字" />
|
||||
<select v-model="statusFilter">
|
||||
<option value="all">全部</option>
|
||||
<option value="done">已完成</option>
|
||||
<option value="doing">学习中</option>
|
||||
</select>
|
||||
<button type="button" @click="focusSearch">聚焦搜索框</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<section class="panel">
|
||||
<div v-if="!filteredCourses.length">暂无匹配结果</div>
|
||||
<div v-show="filteredCourses.length" class="list">
|
||||
<course-item
|
||||
v-for="course in filteredCourses"
|
||||
:key="course.id"
|
||||
:course="course"
|
||||
@toggle="toggleCourse"
|
||||
></course-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="panel">
|
||||
<p>总课程数：{{ totalCount }}</p>
|
||||
<p>已完成数：{{ finishedCount }}</p>
|
||||
<p>当前筛选数：{{ visibleCount }}</p>
|
||||
</footer>
|
||||
</section>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
|
||||
<script src="./starter.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
85
08-vue3/08-final-dashboard/starter.js
Normal file
85
08-vue3/08-final-dashboard/starter.js
Normal file
@@ -0,0 +1,85 @@
|
||||
const { createApp, ref, computed, watch } = Vue;
|
||||
|
||||
function useCourses() {
|
||||
const courses = ref([
|
||||
{ id: 1, title: "setup 和 ref", finished: true },
|
||||
{ id: 2, title: "reactive 和 computed", finished: false },
|
||||
{ id: 3, title: "组件通信", finished: false },
|
||||
{ id: 4, title: "composable 实战", finished: true },
|
||||
]);
|
||||
|
||||
function toggleCourse(courseId) {
|
||||
// 任务：根据 courseId 切换课程完成状态
|
||||
}
|
||||
|
||||
return {
|
||||
courses,
|
||||
toggleCourse,
|
||||
};
|
||||
}
|
||||
|
||||
createApp({
|
||||
components: {
|
||||
CourseItem: {
|
||||
props: {
|
||||
course: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["toggle"],
|
||||
template: `
|
||||
<article class="course-card" :class="{ 'is-done': course.finished }">
|
||||
<h2>{{ course.title }}</h2>
|
||||
<p>{{ course.finished ? "已完成" : "学习中" }}</p>
|
||||
<button type="button" @click="$emit('toggle', course.id)">切换状态</button>
|
||||
</article>
|
||||
`,
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const keyword = ref("");
|
||||
const statusFilter = ref("all");
|
||||
const searchInput = ref(null);
|
||||
const { courses, toggleCourse } = useCourses();
|
||||
|
||||
const filteredCourses = computed(() => {
|
||||
// 任务：同时按关键字和状态筛选课程
|
||||
return courses.value;
|
||||
});
|
||||
|
||||
const totalCount = computed(() => {
|
||||
return courses.value.length;
|
||||
});
|
||||
|
||||
const finishedCount = computed(() => {
|
||||
// 任务：返回已完成数量
|
||||
return 0;
|
||||
});
|
||||
|
||||
const visibleCount = computed(() => {
|
||||
// 任务：返回当前筛选后的数量
|
||||
return 0;
|
||||
});
|
||||
|
||||
watch(keyword, (newValue) => {
|
||||
// 任务：输出关键字变化
|
||||
});
|
||||
|
||||
function focusSearch() {
|
||||
// 任务：通过模板 ref 聚焦输入框
|
||||
}
|
||||
|
||||
return {
|
||||
keyword,
|
||||
statusFilter,
|
||||
searchInput,
|
||||
filteredCourses,
|
||||
totalCount,
|
||||
finishedCount,
|
||||
visibleCount,
|
||||
toggleCourse,
|
||||
focusSearch,
|
||||
};
|
||||
},
|
||||
}).mount("#app");
|
||||
Reference in New Issue
Block a user