声明式编程的优雅革命 ｜ 课型：理实一体课 ｜ 建议课时：2节
用Vue 3重写的调色器：数据一改，界面自动更新（CDN引入）。
新窗口运行 下载源码<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue 3 RGB调色器</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<style>
body { display: flex; justify-content: center; align-items: center; height: 100vh;
margin: 0; background: #f2f6f8; font-family: "Microsoft YaHei", sans-serif; }
.color { width: 460px; height: 260px; border-radius: 10px; display: flex;
justify-content: center; align-items: center; font-size: 20px; }
input { width: 460px; margin: 16px 0; display: block; }
.tip { color: #6b8a99; font-size: 14px; }
</style>
</head>
<body>
<div id="app">
<div class="color" :style="{ backgroundColor: rgbText }"><span>{{ rgbText }}</span></div>
R <input type="range" min="0" max="255" v-model.number="r">
G <input type="range" min="0" max="255" v-model.number="g">
B <input type="range" min="0" max="255" v-model.number="b">
<p class="tip">计数器演示：<button @click="count--">-</button> {{ count }} <button @click="count++">+</button></p>
</div>
<script>
const { createApp, ref, computed } = Vue;
createApp({
setup() {
const r = ref(181), g = ref(116), b = ref(157), count = ref(0);
const rgbText = computed(() => 'rgb(' + r.value + ', ' + g.value + ', ' + b.value + ')');
return { r, g, b, count, rgbText };
}
}).mount('#app');
</script>
</body>
</html>任务目标：用Vue 3重写两个经典案例，体会声明式编程
| 任务内容与评分 |
|---|
| 任务1：CDN引入Vue并挂载第一个应用（15分） |
| 任务2：Vue版计数器（加/减/重置）（20分） |
| 任务3：Vue版RGB调色器（25分） |
| 任务4：v-for渲染十三任务列表（20分） |
| 任务5：对比写出原生JS与Vue的三点差异（20分） |