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

vue2

Browse Source
This commit is contained in:
rou
2026-03-26 21:45:32 +08:00
parent 7c0cbe1320
commit 2a65ba8c6a
7 changed files with 169 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
07-vue2/05-computed-and-watch/starter.html
View File

@@ -1,28 +1,50 @@
<!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>
<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>

7
07-vue2/05-computed-and-watch/starter.js
View File

@@ -11,16 +11,19 @@ new Vue({
computed: {
filteredCourses() {
// 任务：返回过滤后的课程列表
return this.courses;
const value = this.keyword.trim().toUpperCase()
return this.courses.filter(item => item.title.toUpperCase().includes(value))
},
matchedCount() {
// 任务：返回 filteredCourses 的数量
return 0;
return this.filteredCourses.length;
},
},
watch: {
keyword(newValue) {
// 任务：在控制台输出关键字变化
console.log(`筛选关键词：${newValue}`);
},
},
});

91
07-vue2/06-class-style-and-event/starter.html
View File

@@ -1,31 +1,66 @@
<!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>
<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>

6
07-vue2/06-class-style-and-event/starter.js
View File

@@ -9,7 +9,13 @@ new Vue({
toggleCard() {
// 任务：
// 1. 切换 isActive
this.isActive = !this.isActive
// 2. 如果激活了，让 progress 增加到 80
if (this.isActive) {
this.progress = 80
} else {
this.progress = 35
}
// 3. 如果取消激活，让 progress 回到 35
},
},

18
07-vue2/07-lifecycle-and-async/starter.js
View File

@@ -12,19 +12,37 @@ new Vue({
// 1. 模拟异步请求
// 2. 1 秒后给 courses 赋值
// 3. loading 改成 false
console.log("1");
const thiz = this
setTimeout(function () {
thiz.courses = [
{ id: 1, title: 'HTML' },
{ id: 2, title: 'CSS' },
{ id: 3, title: 'JS' }
]
thiz.loading = false
}, 1000)
},
updated() {
// 任务：在控制台输出 updated 日志
console.log("更新");
},
beforeDestroy() {
// 任务：在控制台输出 beforeDestroy 日志
console.log("已销毁");
},
destroyed() {
// 任务：在控制台输出 destroyed 日志
console.log("销毁完成");
},
methods: {
destroyInstance() {
// 任务：调用 this.$destroy()
this.$destroy()
},
},
});

10
07-vue2/08-components-communication-and-final/starter.js
View File

@@ -52,15 +52,23 @@ new Vue({
computed: {
filteredCourses() {
// 任务：根据 keyword 过滤课程列表
return this.courses;
let value = this.keyword.trim().toUpperCase()
return this.courses.filter(item => item.title.toUpperCase().includes(value))
},
},
methods: {
toggleCourse(courseId) {
// 任务：根据 courseId 切换 finished
const a = this.courses.find(item => {
if (item.id === courseId) {
item.finished = !item.finished
}
return;
})
},
focusInput() {
// 任务：通过 ref 聚焦输入框
this.$refs.keywordInput.focus()
},
},
});

24
07-vue2/09-final-course-dashboard/starter.js
View File

@@ -49,31 +49,49 @@ new Vue({
// 任务：
// 1. 先按 statusFilter 过滤
// 2. 再按 keyword 过滤标题
return this.courses;
let value = this.keyword.trim().toUpperCase()
let a
if (this.statusFilter === "all") {
a = this.courses.filter(item => item.title.toUpperCase().includes(value))
} else if (this.statusFilter === "done") {
const b = this.courses.filter(item => item.finished === true)
a = b.filter(item => item.title.toUpperCase().includes(value))
} else if (this.statusFilter === "doing") {
const b = this.courses.filter(item => item.finished === false)
a = b.filter(item => item.title.toUpperCase().includes(value))
}
return a
},
totalCount() {
return this.courses.length;
},
finishedCount() {
// 任务：返回已完成课程数量
return 0;
const b = this.courses.filter(item => item.finished === true)
return b.length
},
visibleCount() {
// 任务：返回当前筛选后的数量
return 0;
const a = this.filteredCourses
return a.length;
},
},
watch: {
keyword(newValue) {
// 任务：在控制台输出关键字变化
console.log(`关键词：${newValue}`);
},
},
methods: {
toggleCourse(courseId) {
// 任务：根据 courseId 切换 finished
const a = this.courses.find(item => item.id === courseId)
a.finished = !a.finished
},
focusSearch() {
// 任务：通过 ref 聚焦输入框
this.$refs.searchInput.focus()
},
},
});