一、Vue 简介
1. 定义
Vue 是一个动态构建用户界面的渐进式 JS 框架：
- 构建用户界面：将数据转换成界面（视图）
- 渐进式：自底向上，逐步改进
- 简单应用：可作为 jQuery 的代替品
- 中型应用：采用组件化，重构单个或多个页面
- 大型应用：使用 Vue 全家桶开发
2. 优点
- 上手容易，学习曲线平滑
- 文档友好，社区活跃
- 集众家所长：借鉴 Angular 的模板语法和数据绑定，借鉴 React 的组件化和虚拟 DOM
3. 核心模型
（1）MVC 模型
- 结构：Controller（控制器）→ View（视图）→ Model（模型）
- 特点：仅支持模型到视图的单向绑定
（2）MVVM 模型
- 结构：Model（模型）与 View（视图）通过 ViewModel 实现双向绑定
- 核心优势：数据与视图自动同步，无需手动操作 DOM
二、Vue 的特点与优缺点
1. 核心特点
- 声明式渲染
- 响应式数据
- 组件化开发
2. 优点
- 渐进式、组件化、轻量级
- 虚拟 DOM 提升渲染效率
- 响应式数据绑定
- 单页面路由支持
- 数据与视图分离，逻辑清晰
3. 缺点
- 单页面应用不利于 SEO 优化
- 不支持 IE8 及以下浏览器
- 首屏加载时间较长
三、Vue 快速上手
1. 搭建开发环境
Vue 环境分为「不使用构建工具」和「使用构建工具」两类，以下先介绍基础的「不使用构建工具」方式：
（1）初始化项目
执行指令创建 package.json 文件（项目依赖配置文件）：
bash
npm init -y（2）安装 Vue
执行指令安装 Vue（默认安装最新版本，当前为 3.2.x）：
bash
# 完整指令
npm install vue
# 简写指令
npm i vue-
安装后生成目录/文件：
node_modules：依赖包存放目录，其中vue/dist包含 Vue 各类版本文件package-lock.json：依赖版本锁定文件
-
package.json新增依赖配置：json"dependencies": { "vue": "^3.2.37" }
（3）Vue 版本说明（vue/dist 目录下）
| 版本文件 | 说明 |
|---|---|
vue.global.js |
完整版，适合初学阶段使用 |
esm 前缀文件 |
遵循 ES Module 规范（支持 export default 导入导出） |
runtime 前缀文件 |
运行时版本，体积更小、效率更高（无编译功能） |
prod 后缀文件 |
生产环境版本，已压缩优化 |
（4）小结
安装 Vue 核心两步：
- 项目初始化：
npm init -y - 安装 Vue：
npm install vue
2. 起步案例（Vue 使用 3 步曲）
（1）引入 Vue.js
在 HTML 头部通过 <script src> 引入完整版文件：
html
<!-- 引入 Vue 完整版 -->
<script src="../node_modules/vue/dist/vue.global.js"></script>（2）编写页面（视图）
在 <body> 中创建容器，所有视图内容将在此渲染：
html
<!-- 视图容器：id 为 app -->
<div id="app">hello</div>（3）创建 App 实例并挂载
通过 API 创建应用实例并绑定到视图容器：
javascript
<script>
// 1. 从 Vue 对象中解构 API
const { createApp } = Vue;
// 2. 创建 App 实例（传入配置对象）
const app = createApp({});
// 3. 挂载到视图容器（通过选择器匹配 id="app" 的元素）
app.mount('#app');
</script>3. 核心特性演示
（1）声明式渲染
-
核心流程：先声明状态（变量），再在视图中使用
-
声明状态（在
createApp配置对象中通过data函数定义）：javascriptconst app = createApp({ data() { // 返回状态对象 return { msg: 'hello' }; } }); -
使用状态（通过插值表达式
{``{ }}渲染）：html<div id="app"> {{ msg }} <!-- 渲染结果：hello --> </div>
（2）响应式数据
- 定义：当状态值发生变化时，Vue 会自动重新渲染视图
- 调试：可安装 Vue 调试工具（vue-devtools）观察数据变化
（3）小结
Vue 两大核心特性：
- 声明式渲染：先声明后使用，语法简洁
- 响应式数据：数据驱动视图，无需手动操作 DOM
四、相关资源推荐
1. 参考书籍
《Vue.js 项目开发实战》（张帆 编著）
- 涵盖内容：HTML5、CSS3、JavaScript 基础，NoSQL 数据库、Node.js、Express 后端开发，Vue.js 前端框架，Webpack、Babel 等构建工具
- 特点：通过完整 Web 项目案例，展现从设计到开发的全流程
视频教程+下方↓↓小助手，备注：《Vue零基础教程》
电子书+下方↓↓小助手，备注：《Vue.js项目开发实战》