vue API 知识点（4） --- 指令、特殊 attribute 、内置组件
一、指令
1.v-text
<span v-text="msg"></span> <!-- 两种写法是一样的 --> <span>{{ msg }}</span>
2.v-html
更新元素的 innerHTML ，内容按普通 HTML 插入，不会作为 Vue 模板进行编译，如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来代替
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击，只在可信内容上使用 v-html ，永不用在用户提交的内容上
在单文件组件里， scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理，如果你希望针对 v-html 的内容设置带作用域的 CSS ，你可以替换为 CSS Modules 或用一个额外的全局 <style> 元素手动设置类似 BEM 的作用域策略
3.v-show、v-if、v-else、v-else-if、v-for
4.v-on
修饰符：
.stop 调用 event.stopPropagation()
.prevent 调用 event.preventDefault()
.capture 添加事件侦听器时使用 capture 模式（改变冒泡顺序）
<div id="app" v-on:click="show"> 1 <div id="app2" v-on:click.capture="show2"> 2 <div id="app3" v-on:click="show3"> 3 </div> </div> </div>
这里的代码因为div2有 capture 关键字，所以此时冒泡顺序发生了改变
正常情况下，点击 div3 一层一层冒泡，div3=>div2=>div1
使用了关键字，先div2=>div3=>div1
1.先冒泡外层带有关键字的事件
2.外层执行结束之后，往里层执行事件
3.最后按照从里向外的事件开始执行
.self 只当事件时从侦听器绑定的元素本身触发时才触发回调
可以理解为跳过冒泡事件。只有点击自己的时候才能触发自己的事件
.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调
.native 监听组件根元素的原生事件
.once 只触发一次回调
.left 只当点击鼠标左键时触发
.right 右键
.middle 中键
.passive 以 { passive: true } 模式添加侦听器
5.v-bind
6.v-model
修饰符：
.lazy 取代 input 监听 change 事件
.number 输入字符串转为有效的数字
.trim 输入首尾空格过滤
7.v-slot
缩写：#
参数：插槽名（可选，默认是 default）
用法：提供具名插槽或需要接收 prop 的插槽
8.v-pre
跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译
<div v-pre>{{ dddddd }}</div>
9.v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] {display: none} 一起用时，这个指令可以隐藏未编译的 Mustache 标签，知道实例准备完毕
<div v-cloak> {{ message }} </div>
[v-cloak] { display: none; }
不会显示，直到编译结束
10.v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
二、特殊的 attribute
1.key
key 的特殊 attribute 主要用于在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
有相同父元素的子元素必须有独特的 key，重复的 key 会造成渲染错误
2.ref
ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上，如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
3.is
用于动态组件且基于 DOM 内模板的限制来工作
<component v-bind:is="currentTabComponent"></component>
三、内置的组件
1.component
渲染一个 元组件 为动态组件。依 is 的值，来决定哪个组件渲染
2.transition
props:
name 用于自动生成 CSS 过渡类名
appear boolean，是否在初始渲染时使用过渡。默认 false
css boolean，是否使用 css 过渡类。默认 true
type string，指定过渡事件类型，侦听过度何时结束。有效值为 transition 和 animation
mode string，控制离开/进入过渡的事件序列。out-in 和 in-out ；默认同时进行
duration number | {enter: number, leave: number} 指定过渡的持续时间，默认情况下，Vue会等待过渡所在根元素的第一个 transitionend 或 animationend 事件
enter-class
leave-class
appear-class
enter-to-class
leave-to-class
appear-to-class
enter-active-class
leave-active-class
appear-active-class
事件：
before-enter
before-leave
before-appear
enter
leave
appear
after-enter
after-leave
after-appear
enter-cancelled
leave-cancelled（v-show only）
appear-cancelled
用法：<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中
3.transition-group
基本同 transition
作为多个元素/组件的过渡效果
注意，每个 transition-group 的子节点必须有独立的key，动画才能正常工作
4.keep-alive
props:
include 字符串或政正则表达式。只有名称匹配的组件会被缓存
exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存
max 数字。最多可以缓存多少组件实例
最多可以缓存多少组件实例，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉
<keep-alive :max="10"> <component :is="view"></component> </keep-alive>
用法：<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
主要用于保留组件状态或避免重新渲染。
<keep-alive> 要求同时只有一个子元素被渲染
5.slot
用于命名插槽
<slot> 元素作为组件模板之中的内容分发插槽。<slot> 元素自身将被替换
