vue以组件来代替html,vue API 知识点（4） --- 指令、特殊 attribute 、内置组件

一、指令

1.v-text

{{ msg }}

2.v-html

更新元素的 innerHTML ，内容按普通 HTML 插入，不会作为 Vue 模板进行编译，如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来代替

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击，只在可信内容上使用 v-html ，永不用在用户提交的内容上

在单文件组件里， scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理，如果你希望针对 v-html 的内容设置带作用域的 CSS ，你可以替换为 CSS Modules 或用一个额外的全局

3.v-show、v-if、v-else、v-else-if、v-for

4.v-on

修饰符：

.stop 调用 event.stopPropagation()

.prevent 调用 event.preventDefault()

.capture 添加事件侦听器时使用 capture 模式(改变冒泡顺序)

123

这里的代码因为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 标签。跳过大量没有指令的节点会加快编译

{{ dddddd }}

9.v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如[v-cloak] {display: none} 一起用时，这个指令可以隐藏未编译的 Mustache 标签，知道实例准备完毕

{{ message }}[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 内模板的限制来工作

三、内置的组件

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

用法： 元素作为单个元素/组件的过渡效果。 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中

3.transition-group

基本同 transition

作为多个元素/组件的过渡效果

注意，每个 transition-group 的子节点必须有独立的key，动画才能正常工作

4.keep-alive

props:

include 字符串或政正则表达式。只有名称匹配的组件会被缓存

exclude 字符串或正则表达式。任何名称匹配的组件都不会被缓存

max 数字。最多可以缓存多少组件实例

最多可以缓存多少组件实例，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉

用法： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

主要用于保留组件状态或避免重新渲染。

要求同时只有一个子元素被渲染

5.slot

用于命名插槽

元素作为组件模板之中的内容分发插槽。 元素自身将被替换