2026-04-26 09:33

vue3基础必背模板详解

次浏览

vue3基础必背模板详解:
### 1. 引入 Vue3 工具
```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```
人话：
**把 Vue3 这个工具“搬”到你的网页里，网页才能用 Vue 的功能。**

---

### 2. 页面展示区域
```html
<div id="app">
  <h1>{{ msg }}</h1>
</div>
```
人话：
- 这是**给 Vue 管理的地盘**
- `id="app"` → 告诉 Vue：就管这个盒子里的内容
- `{{ msg }}` → **插值表达式**，相当于一个“数据展示坑”
  会自动把 JS 里的 `msg` 变量值显示在这里

---

### 3. 核心 JS 代码（最重要）
```js
const { createApp } = Vue
```
人话：
**从 Vue 里拿出“创建应用”的方法，相当于拿出一个建造器。**

---

```js
createApp({
  data() {
    return {
      msg: "你好，Vue3！",
      num: 1,
      username: "",
      list: []
    }
  },
```
人话：
- `data()`：**放所有数据/变量的地方**
- 里面写的 `msg`、`num` 都是你自己定义的变量
- 页面 `{{ }}` 里用的就是这里的变量
- 变量一改，页面自动刷新

---

```js
methods: {
  add() {
    this.num++
  }
}
```
人话：
- `methods`：**放所有函数/方法的地方**
- `add()` 是你自己写的函数
- `this.num++` → 把 data 里的 num 变量 +1

---

```js
}).mount('#app')
```
人话：
**把创建好的 Vue 应用，挂载到页面上 id="app" 的盒子里**
→ 从此 Vue 开始管理这个区域

---

# 三、整段代码的运行效果（人话版）
1. 页面打开 → 显示：**你好，Vue3！**
2. 数据里有个数字 `num`，默认是 1
3. 有个方法 `add`，调用一次，`num` 就加 1
4. 数据变了，页面会**自动更新**，不用你手动改 HTML

---

# 四、最简单的总结（新手必记）
1. **`<div id="app">`** → Vue 的地盘
2. **`{{ 变量名 }}`** → 展示数据
3. **`data()`** → 存数据/变量
4. **`methods`** → 存函数/方法
5. **数据一变，页面自动变** → 这就是 Vue 的核心

### 总结
- **Vue3**：帮你快速做动态网页的工具，数据和页面自动联动
- 你的代码：创建了一个 Vue 应用，定义了数据和方法，让 Vue 管理页面
- 最核心特点：**数据驱动视图**，不用手动操作页面元素

如果你愿意，我还能帮你**加个按钮测试点击加数字**，让你直观看到效果！