rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Vue2 exercises for dynamic styles, lifecycle methods, component communication, and course management dashboard

Browse Source 
- 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:
charlie
2026-03-23 10:09:29 +08:00
parent 00d3c9e4c6
commit 3435848495
48 changed files with 1705 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
07-vue2/05-computed-and-watch/README.md Normal file
View File

@@ -0,0 +1,27 @@
# 练习 5：computed 和 watch
## 目标
学会区分“根据已有数据推导结果”和“监听变化做额外动作”。
## 你要练什么
- `computed`
- `watch`
- 数据推导
- 监听输入变化
## 任务
请基于页面结构完成以下操作：
- 根据关键字过滤课程列表
- 用 `computed` 计算过滤结果数量
- 用 `watch` 在关键字变化时输出日志
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/05-computed-and-watch/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/05-computed-and-watch/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/05-computed-and-watch/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/05-computed-and-watch/answer.js)

28
07-vue2/05-computed-and-watch/answer.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>computed 和 watch</title>
<style>
body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f7f9fd; }
.panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d9e2f0; }
input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #ccd7e9; }
</style>
</head>
<body>
<section id="app" class="panel">
<h1>课程搜索</h1>
<input v-model="keyword" type="text" placeholder="输入关键字" />
<p>匹配数量：{{ matchedCount }}</p>
<ul>
<li v-for="item in filteredCourses" :key="item.id">
{{ item.title }}
</li>
</ul>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./answer.js"></script>
</body>
</html>

30
07-vue2/05-computed-and-watch/answer.js Normal file
View File

@@ -0,0 +1,30 @@
new Vue({
el: "#app",
data: {
keyword: "",
courses: [
{ id: 1, title: "Vue 实例入门" },
{ id: 2, title: "Vue 指令系统" },
{ id: 3, title: "组件通信实战" },
],
},
computed: {
filteredCourses() {
const value = this.keyword.trim().toLowerCase();
if (!value) {
return this.courses;
}
return this.courses.filter((item) => item.title.toLowerCase().includes(value));
},
matchedCount() {
return this.filteredCourses.length;
},
},
watch: {
keyword(newValue) {
console.log("关键字变化：", newValue);
},
},
});

28
07-vue2/05-computed-and-watch/starter.html Normal file
View File

@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>computed 和 watch</title>
<style>
body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f7f9fd; }
.panel { max-width: 760px; margin: 0 auto; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d9e2f0; }
input { width: 100%; padding: 12px; border-radius: 12px; border: 1px solid #ccd7e9; }
</style>
</head>
<body>
<section id="app" class="panel">
<h1>课程搜索</h1>
<input v-model="keyword" type="text" placeholder="输入关键字" />
<p>匹配数量：{{ matchedCount }}</p>
<ul>
<li v-for="item in filteredCourses" :key="item.id">
{{ item.title }}
</li>
</ul>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./starter.js"></script>
</body>
</html>

26
07-vue2/05-computed-and-watch/starter.js Normal file
View 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) {
// 任务：在控制台输出关键字变化
},
},
});