1. vue 简介
1.1. 什么是 vue
官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。
1. 构建用户界面
用 vue 往 html 页面中填充数据，非常的方便
2. 框架
框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
要学习 vue，就是在学习 vue 框架中规定的用法！
vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库
只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！
推荐安装的 VScode 中的 Vue 插件
1. Vue 3 Snippets:https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
2. Vetur: https://marketplace.visualstudio.com/items?itemName=octref.vetur
https://marketplace.visualstudio.com/items?itemName=octref.veturhttps://marketplace.visualstudio.com/items?itemName=octref.vetur
1.2. vue 的特性
vue 框架的特性，主要体现在如下两方面：
① 数据驱动视图(单向数据绑定)
② 双向数据绑定
1. 数据驱动视图：
数据的变化会驱动视图自动更新
好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！
2. 双向数据绑定：
在网页中，form 表单负责采集数据，Ajax 负责提交数据。
js 数据的变化，会被自动渲染到页面上
页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中
注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）
1.2.1 数据驱动视图
在使用了vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：
好处：当页面数据发生变化时，页面会自动重新渲染！
注意：数据驱动视图是单向的数据绑定。
1.2.2 双向数据绑定
在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源 中。示意图如下：
好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！
1.2.3 MVVM
MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是Model、View 和 ViewModel， 它把每个HTML 页面都拆分成了这三个部分，如图所示：
在 MVVM 概念中：
Model 表示当前页面渲染时所依赖的数据源。
View 表示当前页面所渲染的 DOM 结构。
ViewModel 表示 vue 的实例，它是MVVM 的核心。
1.2.4 MVVM 的工作原理
ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被VM 监听到，VM 会把变化过后最新的值自动同步到Model 数据源中
1.3. vue 的版本
当前，vue 共有 3 个大版本，其中：
2.x 版本的vue 是目前企业级项目开发中的主流版本
3.x 版本的vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x 版本的 vue 几乎被淘汰，不再建议学习与使用
总结：
3.x 版本的vue 是未来企业级项目开发的趋势；
2.x 版本的vue 在未来（1 ~ 2年内）会被逐渐淘汰；
2. vue 的基本使用
2.1. 基本使用步骤
① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）
el属性的值只要是是css的选择器都行，id，class，标签的之类的都可以，最好是id因为id选择器是唯一的
2.2. 基本代码与 MVVM 的对应关系
3. vue 的调试工具
3.1. 安装 vue-devtools 调试工具
vue 官方提供的vue-devtools 调试工具，能够方便开发者对vue 项目进行调试与开发。
Chrome 浏览器在线安装vue-devtools ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpdhttps://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox 浏览器在线安装vue-devtools ：
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/
3.2. 配置 Chrome 浏览器中的 vue-devtools
点击 Chrome 浏览器右上角的 
按钮，选择更多工具-> 扩展程序-> Vue.js devtools 详细信息，并勾选如下的两个选项：
注意：修改完配置项，须重启浏览器才能生效！
3.3. 使用 vue-devtools 调试 vue 页面
在浏览器中访问一个使用了vue 的页面，打开浏览器的开发者工具，切换到Vue 面板，即可使用vue-devtools调试当前的页面。
