教程推荐：前端框架Vue2+Vue3全套视频
1、什么是 vue
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。
2. vue 的特性
vue 框架的特性，主要体现在如下两方面：
① 数据驱动视图
② 双向数据绑定
2.1 数据驱动视图
在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：
好处：当页面数据发生变化时，页面会自动重新渲染！
注意：数据驱动视图是单向的数据绑定。
2 双向数据绑定
在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源 中。示意图如下：
好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！
好处：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！
3 、MVVM
MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel， 它把每个 HTML 页面都拆分成了这三个部分，如图所示：
4 、MVVM 的工作原理
ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。
当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中
3. vue 的版本
当前，vue 共有 3 个大版本，其中：
2.x 版本的 vue 是目前企业级项目开发中的主流版本
3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x 版本的 vue 几乎被淘汰，不再建议学习与使用
总结：
3.x 版本的 vue 是未来企业级项目开发的趋势；
2.x 版本的 vue 在未来（1 ~ 2年内）会被逐渐淘汰；
vue 的基本使用
1. 基本使用步骤
① 导入 vue.js 的 script 脚本文件
② 在页面中声明一个将要被 vue 所控制的 DOM 区域
③ 创建 vm 实例对象（vue 实例对象）
2. 基本代码与 MVVM 的对应关系
vue 的调试工具
1. 安装 vue-devtools 调试工具
vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。
Chrome 浏览器在线安装 vue-devtools ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox 浏览器在线安装 vue-devtools ： https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/
2. 配置 Chrome 浏览器中的 vue-devtools
点击 Chrome 浏览器右上角的 按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下 的两个选项：
3. 使用 vue-devtools 调试 vue 页面
在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools 调试当前的页面。
vue 的指令与过滤器
1. 指令的概念
指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。 vue 中的指令按照不同的用途可以分为如下 6 大类：
① 内容渲染指令
② 属性绑定指令 ③ 事件绑定指令 ④ 双向绑定指令 ⑤ 条件渲染指令
⑥ 列表渲染指令
注意：指令是 vue 开发中最基础、最常用、最简单的知识点。
1 内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：
⚫ v-text
⚫ {{ }}
⚫ v-html
v-text
用法示例：
注意：v-text 指令会覆盖元素内默认的值。
{{ }} 语法
vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达 式（英文名为：Mustache）。
注意：相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。
v-html
v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素， 则需要用到 v-html 这个指令：
