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

l

Browse Source
This commit is contained in:
rou
2026-03-25 18:13:35 +08:00
parent d5ff59ac76
commit acb1445575
3 changed files with 65 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
07-vue2/01-vue-instance-and-data/starter.js
View File

@@ -10,6 +10,9 @@ new Vue({
// 任务： // 任务：
// 1. learnerCount 加 1 // 1. learnerCount 加 1
// 2. 在控制台输出最新人数 // 2. 在控制台输出最新人数
this.learnerCount++
console.log(this.learnerCount);
}, },
}, },
}); });

82
07-vue2/02-template-bindings/starter.html
View File

@@ -1,28 +1,62 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <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: #f6f8fb; }
.card { max-width: 680px; margin: 0 auto; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #dde6f5; }
img { width: 100%; border-radius: 16px; }
.link { display: inline-block; margin-top: 12px; color: #2d6cdf; }
button { margin-top: 18px; padding: 10px 16px; border: 0; border-radius: 999px; background: #15233f; color: #fff; cursor: pointer; }
</style>
</head>
<body>
<section id="app" class="card">
<h1>{{ courseTitle }}</h1>
<p>讲师：{{ teacher }}</p>
<img :src="coverUrl" :alt="courseTitle" />
<a class="link" :href="courseLink" target="_blank">查看课程详情</a>
<p>当前状态：{{ isCollected ? "已收藏" : "未收藏" }}</p>
<button type="button" @click="toggleCollect">切换收藏状态</button>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <head>
<script src="./starter.js"></script> <meta charset="UTF-8" />
</body> <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: #f6f8fb;
}
.card {
max-width: 680px;
margin: 0 auto;
padding: 24px;
border-radius: 20px;
background: #fff;
border: 1px solid #dde6f5;
}
img {
width: 100%;
border-radius: 16px;
}
.link {
display: inline-block;
margin-top: 12px;
color: #2d6cdf;
}
button {
margin-top: 18px;
padding: 10px 16px;
border: 0;
border-radius: 999px;
background: #15233f;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<section id="app" class="card">
<h1>{{ courseTitle }}</h1>
<p>讲师：{{ teacher }}</p>
<img :src="coverUrl" :alt="courseTitle" />
<a class="link" :href="courseLink" target="_blank">查看课程详情</a>
<p>当前状态：{{ isCollected ? "已收藏" : "未收藏" }}</p>
<button type="button" @click="toggleCollect">切换收藏状态</button>
</section>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./starter.js"></script>
</body>
</html> </html>

3
07-vue2/02-template-bindings/starter.js
View File

@@ -12,6 +12,9 @@ new Vue({
// 任务： // 任务：
// 1. 切换 isCollected // 1. 切换 isCollected
// 2. 在控制台输出最新收藏状态 // 2. 在控制台输出最新收藏状态
this.isCollected = !this.isCollected
console.log(this.isCollected);
}, },
}, },
}); });