Vue 第一个应用

本章将创建一个简单的 Vue 应用，帮助你理解 Vue 的基本工作原理。

Vue 应用的基本结构

一个基本的 Vue 应用由以下部分组成：

HTML 容器：挂载 Vue 应用的 DOM 元素
Vue 实例：创建应用实例，定义数据和方法
模板：描述 UI 结构
响应式数据：数据变化时自动更新视图

使用 Vite 创建的项目结构

当你使用 Vite 创建项目后，src/main.js 是入口文件：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

// 创建应用实例并挂载到 #app 元素
createApp(App).mount('#app')

index.html 中的 #app 是 Vue 应用的根容器：

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 应用</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

创建第一个组件

打开 src/App.vue，这是根组件：

<!-- src/App.vue -->
<script setup>
import { ref } from 'vue'

// 定义响应式数据
const message = ref('你好，Vue!')
const count = ref(0)

// 定义方法
function increment() {
  count.value++
}

function reset() {
  count.value = 0
}
</script>

<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="reset">重置</button>
  </div>
</template>

CSS 样式：在实际开发中，你可以添加以下 CSS 样式到上面的组件中：
.app {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
}

button {
  margin: 5px;
  padding: 8px 16px;
}
样式部分使用 <style> 标签包裹，可以添加 scoped 属性使样式仅对当前组件生效。

代码解析

script setup 区域

<script setup>
import { ref } from 'vue'

// 定义响应式数据
const message = ref('你好，Vue!')
const count = ref(0)

// 定义方法
function increment() {
  count.value++
}
</script>

这部分是组件的逻辑部分，包含：

import：导入 Vue 提供的 API
ref()：创建响应式数据
function：定义组件方法

template 区域

<template>
  <div class="app">
    <h1>{{ message }}</h1>
    <p>当前计数: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

这部分是组件的模板部分，包含：

{{ }}：插值语法，显示数据
@click：事件绑定
HTML 标签：结构元素

style 区域

Vue 组件的样式使用 <style> 标签定义，可以添加 scoped 属性使样式仅对当前组件生效。

运行应用

在终端中运行：

npm run dev

打开浏览器访问 http://localhost:5173/，你应该能看到：

你好，Vue!
当前计数: 0
[增加] [重置]

点击"增加"按钮，计数会实时更新。

Vue 的响应式原理

当你点击按钮时，会发生以下过程：

┌─────────────────────────────────────────────────────────────┐
│                    Vue 响应式流程                            │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  用户点击 ──▶ 方法执行 ──▶ 修改数据 ──▶ 重新渲染模板        │
│               ↑                                            │
│               └──────────────── 响应式系统 ────────────────┘│
│                                                             │
└─────────────────────────────────────────────────────────────┘

用户点击"增加"按钮
increment() 方法被调用
count.value 被修改为新值
Vue 的响应式系统检测到数据变化
Vue 自动重新渲染模板，页面更新

单文件组件（.vue）

Vue 使用 单文件组件（Single File Component，SFC） 格式，将组件的模板、逻辑和样式封装在一个文件中：

<script setup>
  // 组件逻辑（JavaScript）
</script>

<template>
  <!-- 组件模板（HTML） -->
</template>

<style scoped>
  /* 组件样式（CSS） */
</style>

这种格式的优势：

集中管理：相关代码放在一起，易于维护
语法高亮：编辑器提供良好的语法高亮
组件化：便于复用和组合

练习：创建一个问候组件

尝试创建一个组件，当用户输入名字时，显示个性化的问候。

<!-- src/components/Greeting.vue -->
<script setup>
import { ref } from 'vue'

const name = ref('')
const greeting = ref('')

function updateGreeting() {
  if (name.value.trim()) {
    greeting.value = `你好，${name.value}！欢迎学习 Vue！`
  } else {
    greeting.value = ''
  }
}
</script>

<template>
  <div class="greeting">
    <input 
      v-model="name" 
      @input="updateGreeting"
      placeholder="请输入你的名字"
    />
    <p v-if="greeting">{{ greeting }}</p>
  </div>
</template>

CSS 样式参考：组件样式示例：

.greeting {
  text-align: center;
}

.greeting input {
  padding: 8px;
  font-size: 16px;
}

.greeting p {
  color: #42b883;
  font-size: 18px;
  margin-top: 10px;
}

然后在 App.vue 中使用：

<script setup>
import Greeting from './components/Greeting.vue'
</script>

<template>
  <Greeting />
</template>

小结

本章我们学习了：

Vue 应用结构：index.html、main.js、App.vue
单文件组件：.vue 文件格式
响应式数据：ref() 创建响应式数据
模板语法：插值、事件绑定
响应式原理：数据变化触发视图更新

下一步

在下一章中，我们将深入学习 Vue 的模板语法，包括插值、指令等内容。

Vue 应用的基本结构​

使用 Vite 创建的项目结构​

创建第一个组件​

代码解析​

script setup 区域​

template 区域​

style 区域​

运行应用​

Vue 的响应式原理​

单文件组件（.vue）​

练习：创建一个问候组件​

小结​

下一步​