一、vue 简介
1.1 什么是 vue
官方给出的概念：Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的前端框架。
解读核心关键词：构建用户界面
前端开发者最主要的工作，就是为网站的使用者（又称为：网站的用户）构建出美观、舒适、好用的网页。
构建用户界面的传统方式
在传统的 Web 前端开发中，是基于 jQuery + 模板引擎 的方式来构建用户界面的。
使用 vue 构建用户界面
使用 vue 构建用户界面，解决了 jQuery + 模板引擎 的诸多痛点，极大的提高了前端开发的效率和体验。
解读核心关键词：框架
官方给 vue 的定位是前端框架，因为它提供了构建用户界面的一整套解决方案（俗称 vue 全家桶）：
- ? vue（核心库）
- ? vue-router（路由方案）
- ? vuex（状态管理方案）
- ? vue 组件库（快速搭建页面 UI 效果的方案）
以及辅助 vue 项目开发的一系列工具：
- ? vue-cli（npm 全局包：一键生成工程化的 vue 项目 - 基于 webpack、大而全）
- ? vite（npm 全局包：一键生成工程化的 vue 项目 - 小而巧）
- ? vue-devtools（浏览器插件：辅助调试的工具）
- ? vetur（vscode 插件：提供语法高亮和智能提示）
1.2vue 的特性
vue 框架的特性，主要体现在如下两方面：
- ① 数据驱动视图
- ② 双向数据绑定
数据驱动视图
在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：
- 好处：当页面数据发生变化时，页面会自动重新渲染！
- 注意：数据驱动视图是单向的数据绑定。
双向数据绑定
在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。示意图如下：
好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！
MVVM
MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。它把每个 HTML 页面都拆分成了如下三个部分：
在 MVVM 概念中：
- View 表示当前页面所渲染的 DOM 结构。
- Model 表示当前页面渲染时所依赖的数据源。
- ViewModel 表示 vue 的实例，它是 MVVM 的核心。
MVVM 的工作原理
ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中
vue 的版本
当前，vue 共有 3 个大版本，其中：
2.x 版本的 vue 是目前企业级项目开发中的主流版本
3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x 版本的 vue 几乎被淘汰，不再建议学习与使用
总结：
3.x 版本的 vue 是未来企业级项目开发的趋势；
2.x 版本的 vue 在未来（1 ~ 2年内）会被逐渐淘汰；
1.3vue3.x 和 vue2.x 版本的对比
vue2.x 中绝大多数的 API 与特性，在 vue3.x 中同样支持。同时，vue3.x 中还新增了 3.x 所特有的功能、并
废弃了某些 2.x 中的旧功能：
新增的功能例如：
组合式 API、多根节点组件、更好的 TypeScript 支持等
废弃的旧功能如下：
过滤器、不再支持 $on，$off 和 $once 实例方法等
详细的变更信息，请参考官方文档给出的迁移指南：
https://v3.vuejs.org/guide/migration/introduction.html
二、vue 的基本使用
2.1 基本使用步骤
① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）