vue01----虚拟DOM、指令、事件修饰符、按键修饰符、双向数据绑定、v-if和v-show的区别
### 虚拟DOM：
虚拟DOM就是内存中的一个变量，是一个对象结构
前端效率优化：最致命的问题就是DOM操作，尽量减少DOM操作
vue的高效：
1、虚拟DOM页面渲染高效
2、js ①获取数据②根据数据渲染界面DOM操作 for
vue将开发者的精力从DOM操作上转移到了数据操作上，数据变页面变
为什么要使用虚拟DOM？
每一次DOM的变动，浏览器就得重新渲染一次页面。为了提高页面的性能，就应该尽量减少DOM的变更次数。现代框架通常会用一个对象来保存目标DOM节点的标签名、属性、内容、子节点等信息，也就是用js的对象结构来表示DOM树的结构，这个js对象就是虚拟DOM。当状态变更的时候，js会先更新虚拟DOM，再通过diff算法比较虚拟DOM和真实DOM的差异，找出最少变更的方案，最后一并更新到真实DOM中。
虚拟DOM最终也是操作真实DOM，为什么会更快？
如果全称操作真实DOM的话，任何一个状态的变更，都会导致页面重排或重绘，这个环节就非常耗费性能了。采用虚拟DOM的话，就能避免这个问题。而且如果diff算法效率高的话，总是能采用最少的改动来更新DOM。总的来说，就是不会出现频繁的、大面积的DOM操作，从而提升了页面性能。
### 指令：
内置指令
v-if
v-show
v-on----事件绑定
语法： v-on:事件名称="事件函数"
v-on:click="事件函数"
简写： @事件名称（需要传参时加()，不需要传参时不用加()。在事件函数中，用this可以访问到data中的数据：this.msg=1907）
事件对象：（$event）
如果需要事件对象，只需要给函数传递一个$event。
@click="clickHandler($event)" 将事件对象e传过去，默认参数是事件对象，不传参时，参数默认是e；如果有其他参数，需要通过$event手动传递。
v-test
值为data中的数据，null和undefined无法显示，可以用三元表达式进行判断
1、解析data中的数据
2、可以解析js的表达式
底层原理：innerText
简写：{{}}----插值法
v-html
值为data中的数据
1、解析data中的数据
2、可以解析js的表达式
底层原理：innerHTML
v-html和v-text是一样的，不同的是v-html可以解析html标签
v-bind
给元素绑定属性
语法：v-bind:属性=属性值
简写： :属性=属性值
v-bind绑定class：
myClass:"box1 box2"
myClass:["box1","box2"]
myClass:{
box1:true,
box2:true
}
v-for
用来遍历数组、对象、字符串、数字……
如果报波浪线警告，加 :key="index"
v-pre
不解析{{}}
v-cloak
防止{{}}在vue.js没有加载进来的时候显示，需要写个样式：[v-clock]:{display:none;}
v-once
数据值解析一次
自定义指令
创建一个自动聚焦的自定义指令：
Vue.directive("focus",{
inserted(el){
el.focus()
}
})
### 事件修饰符：
stop 阻止冒泡 @contextmenu.prevent=""----阻止右键默认事件
self 只针对自己有效
prevent 阻止浏览器默认事件
enter 按下回车 @keydown.enter="downClick"----按下回车时触发事件
once 事件只绑定一次 语法：指令.修饰符.修饰符
capture 取消捕获
### 按键修饰符：（效率更高）
enter @keyup.enter----按下enter键抬起时触发
esc @keyup.esc----按下esc键抬起时触发
left @keyup.left----按下left键抬起时触发
right @keyup.right----按下right键抬起时触发
up
down
tab
delete
space
### 双向数据绑定
v-model----将表单元素的value和data数据绑定
### Q:
1、v-if和v-show的区别：
①v-if底层是控制元素的创建和销毁，v-show是操作元素的display属性。v-if的开销要大一点，判断登录和未登录状态时用这个，但是它并未操作DOM，vue中都是操作的虚拟DOM。
②v-if配合v-else-if和v-else使用。
场景：v-if 权限校验的时候
v-show 展示页面，类似于一些选项卡
