0帧起手《Vue零基础教程》，从前端框架到GIS开发系列课程
一、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文件（项目依赖配置文件）：
npminit -y（2）安装 Vue
执行指令安装 Vue（默认安装最新版本，当前为 3.2.x）：
# 完整指令npminstallvue# 简写指令npmi vue- 安装后生成目录/文件：
node_modules：依赖包存放目录，其中vue/dist包含 Vue 各类版本文件package-lock.json：依赖版本锁定文件
package.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>引入完整版文件：
<!-- 引入 Vue 完整版 --><scriptsrc="../node_modules/vue/dist/vue.global.js"></script>（2）编写页面（视图）
在<body>中创建容器，所有视图内容将在此渲染：
<!-- 视图容器：id 为 app --><divid="app">hello</div>（3）创建 App 实例并挂载
通过 API 创建应用实例并绑定到视图容器：
<script>// 1. 从 Vue 对象中解构 APIconst{createApp}=Vue;// 2. 创建 App 实例（传入配置对象）constapp=createApp({});// 3. 挂载到视图容器（通过选择器匹配 id="app" 的元素）app.mount('#app');</script>3. 核心特性演示
（1）声明式渲染
- 核心流程：先声明状态（变量），再在视图中使用
- 声明状态（在
createApp配置对象中通过data函数定义）：constapp=createApp({data(){// 返回状态对象return{msg:'hello'};}}); - 使用状态（通过插值表达式
{{ }}渲染）：<divid="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项目开发实战》