1. Vue 是什么

这是什么：Vue = 一套渐进式前端框架，核心是数据驱动视图——你只管改数据，页面自己更新。

为什么用：上一章用 jQuery 做待办清单，改文本、绑事件、调样式全得手工维护，漏一处就是 bug。换成 Vue，同一份数据改一次，所有引用它的地方自动跟着变。

如何用：本章用同一个「显示名字、点击换人」的需求，把 jQuery 写法和 Vue 写法并排放在一起对比着看。

1.1 数据驱动视图

传统写法（jQuery 思路）：数据变了 → 手工找到元素 → 手工更新。直接贴进右侧运行场就能跑：

<p>已有 <span id='count'>0</span> 条任务</p>

<!-- 公开 CDN 引入 jQuery，无需安装任何工具 -->
<script src='https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js'></script>
<script>
  const tasks = ['买菜', '写作业']
  $('#count').text(tasks.length)   // 手工找元素，手工更新
</script>

你会看到：已有 2 条任务。

Vue 思路：数据在哪、视图显示什么，声明清楚就完事，没有一行手工更新代码：

<div id='app'>已有 {{ tasks.length }} 条任务</div>

<!-- 公开 CDN 引入 Vue，无需安装任何工具 -->
<script src='https://registry.npmmirror.com/vue/3.5.44/files/dist/vue.global.prod.js'></script>
<script>
  const { createApp, ref } = Vue
  createApp({ setup() {
    const tasks = ref(['买菜', '写作业'])   // 只管改数据，页面自己刷新
    return { tasks }
  } }).mount('#app')
</script>

你会看到：同样一行 已有 2 条任务。

tasks.length 一变，页面对应位置自动刷新。想象页面里有 10 处引用同一个数据——jQuery 要写 10 行更新代码，Vue 一行都不用写。

1.2 直观对比

需求：显示名字，点击按钮换人。

jQuery 版：

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='utf-8'>
  <script src='https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js'></script>
</head<body>
  <p id='who'>青蛙</p>
  <button id='btn'>换人</button>

  <script>
    let name = '青蛙'
    $('#who').text(name)
    $('#btn').click(function () {
      name = '熊猫'
      $('#who').text(name)   // 忘写这行就是 bug
    })
  </script>
</body>
</html>

你会看到：页面上是「青蛙」和一个「换人」按钮，点一下变「熊猫」。

Vue 版（免构建，浏览器打开即跑）：

<!DOCTYPE html>
<html lang='zh-CN'>
<head>
  <meta charset='utf-8'>
  <!-- 一行公开 CDN 引入 Vue，无需安装任何工具 -->
  <script src='https://registry.npmmirror.com/vue/3.5.44/files/dist/vue.global.prod.js'></script>
</head>
<body>
  <div id='app'>
    <p>{{ name }}</p>
    <button @click="name = '熊猫'">换人</button>
  </div>

  <script>
    const { createApp, ref } = Vue
    createApp({
      setup() {
        const name = ref('青蛙')
        return { name }
      }
    }).mount('#app')
  </script>
</body>
</html>

你会看到：页面上同样是「青蛙」加「换人」按钮，点一下变「熊猫」。

和 jQuery 版逐行对比：数据只有一句 const name = ref('青蛙')，点按钮改 name，页面自动跟着变——没有一行手工找元素。这段代码可以整个复制进右侧运行框直接跑。

1.3 什么时候用 Vue

• 页面数据频繁变化（列表、表单、实时状态）
• 多人协作的中小项目（组件清晰可分工）
• 你已经懂 HTML/CSS/JS——Vue 学习曲线是三大框架里最平缓的

1.4 动手改

把 1.2 的两版都整段贴进右侧「在线运行场」点运行，各玩一遍「换人」。再思考：需求改成「点击第二次换回青蛙」，两种写法各要改几处？

1.5 小结

• Vue = 声明式数据驱动的世界：数据是唯一真相，视图自动跟随
• jQuery 是命令式的「手工大国」，Vue 是声明式的「数据主导」
• 本教程基线 Vue 3 + Composition API，全程用公开 CDN 的免构建写法（浏览器里直接跑）；工程化（npm/Vite）在第 8 章末尾作进阶了解

下一章：第一个页面：零工具起步 🐸