一、什么是VUE（官网 ：https://cn.vuejs.org/）
官方给出的概念 ：Vue (读音 /vju ː/ ，类似于 view) 是一套用
于构建用户界面的前端框架
渐进式的 JavaScript 框架
二、VUE的特点
易用 ：基础只需HTML、CSS、JAvaScript
灵活 ：可以只在一个库和一套完整框架之间伸缩自如（渐进式）
高效 ：运行大小20kb ，超快的虚拟DOM
Vue框架的特性主要是数据驱动试图，双向数据绑定
▲ 面试 ： 为 什 么 要 使 用 虚 拟DOM ？
Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发
生变化时，其实就是对应某个DOM节点发生了变化
虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，
若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM， 而是将这10次更新的diff内容保存到本地一个JS对象中，最终将
这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量
无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的 更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对 象的速度显然要更快，等更新完成后，再将最终的JS对象映射成
真实的DOM，交由浏览器去绘制。
三、vue的底层原理— MVVM模式
MVVM：model、view、ViewModel。MVVM架构一样是M、V分离，但 中间是以VM（ViewModel）来串接，这个VM就像View 的一个代理 程序，它负责直接对Model做沟通。而View可以通过一些机制例 如双向数据绑定来和VM沟通以获取资料，再抛给model做存储工作。
▲ 面试 题 ： 那 你 能讲 一讲MVVM吗 ？
MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。
四、Vue的优势
. 轻量级：vue只关注视图层，是一个构建数据的视图集 合，大小只有几十kb,angular学习成本高，使用复杂。 Vue相对简单，直接所以vue使用更加友好
. 数据绑定：vue是一个MVVM框架，数据发生变化时，视 图就会发生变化，视图变化相应的数据也会变化，保 留了angular的特点，双向数据绑定
. 指令：指令有内置指令和自定义指令，以“v- ”开头， 作用于html元素，将指令绑定在元素上，会给绑定的 元素添加一些特殊行为
. 插件：常用的扩展插件vue-router、Vuex等
. 视图，数据，结构分离：使数据的更改更为简单，不 需要进行逻辑代码的修改，只需要操作数据就能完成 相关操作；
. 虚拟DOM：dom操作是非常耗费性能的， 不再使用原生 的dom操作节点，极大解放dom操作，但具体操作的还 是dom不过是换了另一种方式；
. 运行速度更快:相比较与react而言，同样是操作虚拟dom，就性能而言，vue存在很大的优势。
五、vue初体验
VUE的三部曲 引包、留坑、实例化
> 引包
1、直接引入<script></script>
2、CDN:内容分发网络（将一套东西放服务器里面让别人去访问）
3、Npm下载：Npm install vue (配合官方提供的脚手架去使用)
> 留坑
即在html中留了一个vue模板插入的地方或是vue代码对其生效的地方
<div id="app">
{{message}}
</div>
实例化
new Vue({
e1:目的地,//e1:挂载点//(选择器可以是css的选择器类型，但建议用ID选择器)
template:模板内容`,//(根节点只能有一个，不能并列标签)Data:{}，//(可以是函数也可是对象，但基本用函数)
}）
关于初始化的选择器：
1.选择器只能选中一个范围，默认选择第一个，所以建议使用id选择器
2.根标签不能用body（el挂载不能用Boby也不可以用HTML），一般都在body里面放一个根标签
3.能够使用vue的标签只能是双目标签
4.new Vue可以在一个页面用多次（后面的组件化也能够支撑这一点）
六、VUE的模板渲染（模板引擎）
{{}}（vue 就是用的两个花括号的模板引擎方式，是借鉴了
Mustache 语法 (双大括号/胡子语法) 的文本插值）
模板引擎的本质: 正则的替换
目的: 为了增强html功能
Vue模板引擎的用法：
1. {{数据绑定}}
2. {{简单计算}}
3. {{简单逻辑运算}}（三元运算）
4. {{做简单js判断}}
注意：不能写语句、不能解析html渲染、不能放在在属性身上
![[小程序]页面事件](https://img-blog.csdnimg.cn/direct/85c945f208674f2587ddc4c2be957496.png)
