Vue / React 框架入门完整教程（组件化开发）#

前面学了 HTML、CSS、JavaScript，你已经能用原生 JS 操作 DOM 做交互了。但真实项目里，用原生 JS 写复杂页面会非常痛苦——这时就该上框架了。

这一篇讲清楚框架解决什么问题、核心概念是什么，然后分别带你入门 Vue 3 和 React 这两个最流行的框架。

一、为什么需要框架？原生 JS 的痛点#

想象你要做一个商品列表页：几十个商品、每个能加购物车、价格实时汇总。用原生 JS 写：

1
// 伪代码：手动更新页面的繁琐过程
2
商品价格变了
3
→ 找到页面上价格那个元素
4
→ 修改它的文字
5
→ 再找到总价元素
6
→ 重新计算并修改
7
→ 再找到数量元素
8
→ ...

数据一变，你就要手动找到 DOM、手动改。数据多了、交互多了，代码就变成”DOM 操作地狱”——又乱又容易出 bug。

框架的核心理念：数据驱动视图。

你只管修改数据，框架自动帮你更新页面：

1
// 伪代码：框架里你只改数据
2
price = 100;   // 改一个变量
3
// 页面上所有用到 price 的地方自动更新

三个核心概念：

组件化：把页面拆成一个一个”积木”（组件），每个组件管自己的一块，可以复用
数据驱动：数据变了，页面自动跟着变，不用手动操作 DOM
虚拟 DOM：框架先在”内存里”比较新旧变化，只更新真正变化的部分，性能好

二、Vue 3 入门#

怎么开始？两种方式#

方式一：CDN（最简单，适合学习）

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <title>Vue 入门</title>
6
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
7
</head>
8
<body>
9
  <div id="app">{{ message }}</div>
10

11
  <script>
12
    const { createApp, ref } = Vue;
13

14
    createApp({
15
      setup() {
16
        let message = ref("你好，Vue！");
17
        return { message };
18
      }
19
    }).mount("#app");
20
  </script>
21
</body>
22
</html>

方式二：Vite 脚手架（正式项目，以后用）

1
npm create vue@latest

创建好项目后进入目录 npm install、npm run dev 就能跑起来。初学阶段先用 CDN 方式练手即可。

模板语法：双大括号插值#

1
<p>{{ message }}</p>

{{ }} 里写变量名或表达式，数据变了这里自动更新。

响应式数据：ref#

Vue 3 里用 ref 创建”会响应变化”的数据：

1
<div id="app">
2
  <p>点击次数：{{ count }}</p>
3
  <button @click="add">+1</button>
4
</div>
5

6
<script>
7
  const { createApp, ref } = Vue;
8

9
  createApp({
10
    setup() {
11
      let count = ref(0);          // 创建响应式数据
12

13
      function add() {
14
        count.value++;             // 注意：ref 数据要用 .value 修改
15
      }
16

17
      return { count, add };
18
    }
19
  }).mount("#app");
20
</script>

重要： count 本身是 ref 对象，模板里自动解开直接写 count，但 JS 代码里改它必须写 count.value。

常用指令#

指令	作用	例子
`v-if`	条件显示	`<p v-if="show">显示了</p>`
`v-for`	循环列表	`<li v-for="item in list">{{ item }}</li>`
`v-model`	双向绑定输入	`<input v-model="name">`
`v-bind`	绑定属性（可简写 `:`）	`<img :src="url">`
`v-on`	监听事件（可简写 `@`）	`<button @click="fn">`

v-model 双向绑定（表单神器）：

1
<div id="app">
2
  <input v-model="name" placeholder="输入名字">
3
  <p>你好，{{ name }}</p>
4
</div>
5

6
<script>
7
  const { createApp, ref } = Vue;
8

9
  createApp({
10
    setup() {
11
      let name = ref("");
12
      return { name };
13
    }
14
  }).mount("#app");
15
</script>

输入框里的字一变，下面的”你好，xxx”立刻跟着变——双向绑定，不用写任何事件监听。

v-for 列表渲染：

1
<div id="app">
2
  <ul>
3
    <li v-for="(item, index) in list" :key="index">{{ index }}. {{ item }}</li>
4
  </ul>
5
</div>
6

7
<script>
8
  const { createApp, ref } = Vue;
9

10
  createApp({
11
    setup() {
12
      let list = ref(["苹果", "香蕉", "橘子"]);
13
      return { list };
14
    }
15
  }).mount("#app");
16
</script>

v-if 条件渲染：

1
<div id="app">
2
  <p v-if="score >= 60">及格了 🎉</p>
3
  <p v-else>没及格 😢</p>
4
</div>
5

6
<script>
7
  const { createApp, ref } = Vue;
8
  createApp({
9
    setup() {
10
      let score = ref(85);
11
      return { score };
12
    }
13
  }).mount("#app");
14
</script>

组件：页面的”积木”#

把一段 UI 封装成组件，可以反复用：

1
<div id="app">
2
  <my-button label="按钮一"></my-button>
3
  <my-button label="按钮二"></my-button>
4
</div>
5

6
<script>
7
  const { createApp, ref } = Vue;
8

9
  // 定义一个组件：一个带文字的按钮
10
  const MyButton = {
11
    props: ["label"],          // 接收外部传入的属性
12
    template: `
13
      <button style="padding:10px 20px;border-radius:8px;background:#667eea;color:white;border:none;">
14
        {{ label }}
15
      </button>
16
    `
17
  };
18

19
  createApp({
20
    components: { MyButton }   // 注册组件
21
  }).mount("#app");
22
</script>

两个按钮共用一份代码，只是传入的 label 不同。这就是组件复用的意义。

三、React 入门#

怎么开始？#

方式一：CDN（简单学习用）

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <title>React 入门</title>
6
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
7
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
8
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
9
</head>
10
<body>
11
  <div id="root"></div>
12
  <script type="text/babel">
13
    function App() {
14
      return <h1>你好，React！</h1>;
15
    }
16
    ReactDOM.createRoot(document.getElementById("root")).render(<App />);
17
  </script>
18
</body>
19
</html>

方式二：Vite 脚手架（正式项目）

1
npm create vite@latest my-app -- --template react

JSX：在 JS 里写 HTML#

React 最特别的地方：组件里直接写类似 HTML 的代码，这叫 JSX。JSX 里用 {} 插入 JS 表达式：

1
function App() {
2
  let name = "小明";
3
  return <h1>你好，{name}！</h1>;   // 输出：你好，小明！
4
}

状态：useState（React 的”响应式数据”）#

Vue 用 ref，React 用 useState：

1
import { useState } from "react";
2

3
function Counter() {
4
  const [count, setCount] = useState(0);   // 初始值 0
5

6
  function add() {
7
    setCount(count + 1);   // 必须用 setCount 修改
8
  }
9

10
  return (
11
    <div>
12
      <p>点击次数：{count}</p>
13
      <button onClick={add}>+1</button>
14
    </div>
15
  );
16
}
17

18
export default Counter;

注意： React 里修改数据必须调用 setCount(新值)，不能直接 count = count + 1。调用了 setCount，React 会自动重新渲染页面。

事件处理：onClick#

JSX 里事件用驼峰命名：onClick、onChange、onSubmit。

1
<button onClick={add}>+1</button>
2
<input onChange={e => setText(e.target.value)} />

条件渲染#

1
function Score({ score }) {
2
  return score >= 60 ? <p>及格了 🎉</p> : <p>没及格 😢</p>;
3
}

列表渲染#

1
function FruitList() {
2
  const list = ["苹果", "香蕉", "橘子"];
3

4
  return (
5
    <ul>
6
      {list.map((item, index) => (
7
        <li key={index}>{item}</li>   // key 是给 React 的标记
8
      ))}
9
    </ul>
10
  );
11
}

组件与 props#

1
function MyButton({ label }) {   // props 就是组件的"入参"
2
  return <button>{label}</button>;
3
}
4

5
function App() {
6
  return (
7
    <div>
8
      <MyButton label="按钮一" />
9
      <MyButton label="按钮二" />
10
    </div>
11
  );
12
}

四、Vue vs React：怎么选？#

维度	Vue 3	React
上手难度	较平缓，中文资料多	稍陡，要习惯 JSX 和函数式思维
模板写法	HTML 模板 + 指令，接近传统网页	JSX，代码即 UI
国内生态	非常活跃，国内大厂（阿里、字节部分项目）在用	全球最大，GitHub 生态最丰富
学习曲线	渐进式，可以一点点引入	全量引入，概念相对多

我的建议：

国内找工作、做中小项目 → Vue（资料多、上手快、国内流行）
想进大厂、做大型复杂项目、长期发展 → React（市场占有率全球第一）

但记住： 框架只是工具，核心还是 JavaScript 基础。Vue 和 React 背后的概念（组件、数据驱动、状态）是相通的，精通一个，另一个很快就能上手。二选一深入学习即可，不必两个都精通。

五、总结#

这一篇我们理解了：

为什么要框架：数据驱动视图，告别手动操作 DOM 的噩梦
三大核心概念：组件化、数据驱动、虚拟 DOM
Vue 3：createApp + ref 响应式、模板指令（v-if/v-for/v-model/@click）、组件复用
React：函数组件 + useState、JSX、onClick、列表 map 渲染
选择建议：国内/入门选 Vue，全球/长期选 React，核心相通

下一篇动手做项目——用前面学的所有知识，做 3 个能真正跑起来的项目。