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/06-class-style-and-event/README.md Normal file
View File

@@ -0,0 +1,27 @@
# 练习 6：动态类名、样式和事件
## 目标
学会让组件状态直接影响样式和交互反馈。
## 你要练什么
- `:class`
- `:style`
- `v-on`
- 点击切换状态
## 任务
请基于页面结构完成以下操作：
- 点击卡片切换激活状态
- 根据激活状态切换类名
- 根据进度值动态改变进度条宽度
## 文件
- [starter.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/06-class-style-and-event/starter.html)
- [starter.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/06-class-style-and-event/starter.js)
- [answer.html](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/06-class-style-and-event/answer.html)
- [answer.js](/Users/lijiaqing/home/wwwroot/front-end-example/07-vue2/06-class-style-and-event/answer.js)

31
07-vue2/06-class-style-and-event/answer.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>动态类名、样式和事件</title>
<style>
body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f8fb; }
.panel { max-width: 760px; margin: 0 auto; }
.card { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d8e4f3; cursor: pointer; transition: all .2s ease; }
.card.active { border-color: #2d6cdf; background: #eef4ff; }
.progress-track { height: 12px; margin-top: 16px; border-radius: 999px; background: #e6edf8; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #2d6cdf, #58a2ff); }
</style>
</head>
<body>
<section id="app" class="panel">
<article class="card" :class="{ active: isActive }" @click="toggleCard">
<h1>{{ title }}</h1>
<p>{{ isActive ? "当前卡片已激活" : "点击卡片激活它" }}</p>
<div class="progress-track">
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
</div>
<p>当前进度：{{ progress }}%</p>
</article>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./answer.js"></script>
</body>
</html>

14
07-vue2/06-class-style-and-event/answer.js Normal file
View File

@@ -0,0 +1,14 @@
new Vue({
el: "#app",
data: {
title: "动态样式练习",
isActive: false,
progress: 35,
},
methods: {
toggleCard() {
this.isActive = !this.isActive;
this.progress = this.isActive ? 80 : 35;
},
},
});

31
07-vue2/06-class-style-and-event/starter.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>动态类名、样式和事件</title>
<style>
body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f4f8fb; }
.panel { max-width: 760px; margin: 0 auto; }
.card { padding: 24px; border-radius: 18px; background: #fff; border: 1px solid #d8e4f3; cursor: pointer; transition: all .2s ease; }
.card.active { border-color: #2d6cdf; background: #eef4ff; }
.progress-track { height: 12px; margin-top: 16px; border-radius: 999px; background: #e6edf8; overflow: hidden; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #2d6cdf, #58a2ff); }
</style>
</head>
<body>
<section id="app" class="panel">
<article class="card" :class="{ active: isActive }" @click="toggleCard">
<h1>{{ title }}</h1>
<p>{{ isActive ? "当前卡片已激活" : "点击卡片激活它" }}</p>
<div class="progress-track">
<div class="progress-bar" :style="{ width: progress + '%' }"></div>
</div>
<p>当前进度：{{ progress }}%</p>
</article>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./starter.js"></script>
</body>
</html>

16
07-vue2/06-class-style-and-event/starter.js Normal file
View File

@@ -0,0 +1,16 @@
new Vue({
el: "#app",
data: {
title: "动态样式练习",
isActive: false,
progress: 35,
},
methods: {
toggleCard() {
// 任务：
// 1. 切换 isActive
// 2. 如果激活了，让 progress 增加到 80
// 3. 如果取消激活，让 progress 回到 35
},
},
});