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);
}, },
}, },
}); });

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

@@ -1,17 +1,50 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模板绑定</title> <title>模板绑定</title>
<style> <style>
body { margin: 0; padding: 32px; font-family: "PingFang SC", sans-serif; background: #f6f8fb; } body {
.card { max-width: 680px; margin: 0 auto; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #dde6f5; } margin: 0;
img { width: 100%; border-radius: 16px; } padding: 32px;
.link { display: inline-block; margin-top: 12px; color: #2d6cdf; } font-family: "PingFang SC", sans-serif;
button { margin-top: 18px; padding: 10px 16px; border: 0; border-radius: 999px; background: #15233f; color: #fff; cursor: pointer; } 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> </style>
</head> </head>
<body> <body>
<section id="app" class="card"> <section id="app" class="card">
<h1>{{ courseTitle }}</h1> <h1>{{ courseTitle }}</h1>
@@ -25,4 +58,5 @@
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="./starter.js"></script> <script src="./starter.js"></script>
</body> </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);
}, },
}, },
}); });