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> 元素自身将被替换