东月的文档站 | 东月的文档站

Vue 到底是干什么的？

简单说，Vue 帮你做一件事：把数据和页面自动关联起来。举个例子：你有一个变量叫 name = "小明"，你想在页面上显示"你好，小明"。用原生 JavaScript 你可能要写：

javascript

document.getElementById('greeting').textContent = '你好，' + name

但如果 name 变成了 "小红"，你得再写一行代码更新页面。数据一变，你得手动更新。 Vue 的思路是：你只管改数据，页面自动更新。这就是"响应式"——数据的变化会自动"响应"到页面上。

项目的启动流程

每个 Vue 项目启动时，都从 main.js 开始执行。打开 src/main.js：

javascript

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

这三行代码的意思是： | 代码 | 做什么 | | import { createApp } from 'vue' | 从 Vue 库里借一个 createApp 函数 | | import App from './App.vue' | 把自己写的 App.vue 组件加载进来 | | createApp(App).mount('#app') | 创建应用 → 把 App 组件挂到 #app 这个位置 | 画成图就是这样：

index.html                  main.js                    App.vue
┌───────────┐    启动    ┌──────────────┐    挂载    ┌──────────────┐
│ <div      │ ◄──────── │ createApp(…  │ ◄──────── │ <template>   │
│  id="app">│           │  mount(#app) │           │   整个页面的   │
│ </div>    │           └──────────────┘           │   内容都在这里  │
└───────────┘                                     └──────────────┘

💡 Tip：mount 是什么？ "挂载"就是把 Vue 组件"装"到 HTML 的某个位置上。mount('#app') 的意思就是：把 Vue 应用放到 id="app" 的那个 <div> 里。

根组件 App.vue 长什么样

打开 src/App.vue，你会看到这样的结构：

vue

<template>
  <h1>{{ title }}</h1>
</template>
<script>
export default {
  data() {
    return {
      title: 'Hello Vue 3'
    }
  }
}
</script>

这是 Vue 最基础的写法（叫"选项式 API"），我们来拆解每一块：

<template> — 就是 HTML，但可以使用 Vue 的特殊语法
— 双大括号叫"插值"，把 title 这个变量的值显示在这里
<script> — 写 JavaScript 的地方
data() — 一个函数，return 出去的就是这个组件的"数据"
export default — 把这整块代码"导出"，让别的地方可以用它 📝 Note：为什么 data 是函数不是对象？ 这是 Vue 的一个设计：data 必须写成一个函数（data() { ... }），不能直接写 data: { ... }。原因很简单：每个组件需要有自己的数据副本，函数保证了每次用的都是"新的一份"，不会互相干扰。你暂时记住这个规则就行。

SPA 是什么？

接下来学什么？

了解了项目结构后，建议按这个顺序学习：

— 了解 Vue 的两种写法
— 怎么把数据显示到页面上
— 动态改 HTML 属性
— 控制元素的显示/隐藏
— 遍历数据显示列表 💡 Tip：Composition API 写法（Vue 3） 上面的示例用了 Options API。用 Composition API 写同一个功能是这样的：

vue

<script setup>
import { ref } from 'vue'
const title = ref('Hello Vue 3')
</script>

详见：

Vue 到底是干什么的？ #

项目的启动流程 #

根组件 App.vue 长什么样 #

SPA 是什么？ #

接下来学什么？ #

Vue 到底是干什么的？

项目的启动流程

根组件 App.vue 长什么样

SPA 是什么？

接下来学什么？