Vue入门

1. Vue 是什么？为什么后端也要学？

• Vue 是一个渐进式前端框架，专门用来构建用户界面（View层）。
• 核心特点：声明式渲染 + 组件化 + 响应式系统。
• 和你熟悉的后端不同，前端关注“数据变化 → 页面自动更新”，Vue 把这部分做得非常简单。
• 学习Vue后，你能快速做出交互丰富的管理后台、单页应用（SPA）。

推荐直接看官方文档（中文极好）： Vue 3 官方文档

2. 快速起步（10分钟搭建第一个项目）

使用 Vite（官方推荐，最快最现代的构建工具）：

[object Object]

打开 http://localhost:5173，就能看到“Hello Vue”页面。

项目结构重点看：

• src/App.vue：根组件（单文件组件，.vue文件集成了HTML、JS、CSS）
• src/main.js：入口文件，创建Vue应用实例

3. 单文件组件（.vue文件）结构

每个.vue文件分为三部分：

[object Object]

这就是Vue最常见的写法，后面所有例子都基于<script setup>。

4. 核心概念

4.1 响应式数据（ref / reactive）

Vue 最牛的地方：数据变了，页面自动更新。

[object Object]

4.2 模板语法

• 插值：{{ expression }}
• 指令（以v-开头）：
  • v-bind（缩写 :）绑定属性：<img :src="imgUrl">
  • v-on（缩写 @）绑定事件：<button @click="handleClick">
  • v-model 双向绑定表单：<input v-model="searchText">
  • v-if / v-else 条件渲染
  • v-for 列表渲染（必须加 :key）

[object Object]

4.3 计算属性（computed）

当你需要基于响应式数据做计算时用，避免在模板里写复杂逻辑。

[object Object]

4.4 事件处理

[object Object]

4.5 生命周期

组件的生命周期大致流程：

[object Object]

• 创建阶段：实例被创建，data/props 初始化（适合初始化数据）
• 挂载阶段：模板编译、DOM 插入（适合发请求、操作 DOM）
• 更新阶段：数据变化触发（适合处理副作用）
• 销毁阶段：组件移除（适合清理定时器、事件监听）

4.5.2. 完整钩子对比表（Vue 3）