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

这里的代码因为div2有 capture 关键字&＃xff0c;所以此时冒泡顺序发生了改变

正常情况下&＃xff0c;点击 div3 一层一层冒泡&＃xff0c;div3&＃61;>div2&＃61;>div1

使用了关键字&＃xff0c;先div2&＃61;>div3&＃61;>div1

1.先冒泡外层带有关键字的事件

2.外层执行结束之后&＃xff0c;往里层执行事件

3.最后按照从里向外的事件开始执行

.self 只当事件时从侦听器绑定的元素本身触发时才触发回调

可以理解为跳过冒泡事件。只有点击自己的时候才能触发自己的事件

.{keyCode | keyAlias} 只当事件是从特定键触发时才触发回调

.native 监听组件根元素的原生事件

.once 只触发一次回调

.left 只当点击鼠标左键时触发

.right 右键

.middle 中键

.passive 以 { passive: true } 模式添加侦听器

5.v-bind

6.v-model

修饰符&＃xff1a;

.lazy 取代 input 监听 change 事件

.number 输入字符串转为有效的数字

.trim 输入首尾空格过滤

7.v-slot

缩写&＃xff1a;#

参数&＃xff1a;插槽名(可选&＃xff0c;默认是 default)

用法&＃xff1a;提供具名插槽或需要接收 prop 的插槽

8.v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译

{{ dddddd }}

9.v-cloak

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

{{ message }}[v-cloak] {

display: none;

}

不会显示&＃xff0c;直到编译结束

10.v-once

只渲染元素和组件一次。随后的重新渲染&＃xff0c;元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

二、特殊的 attribute

1.key

key 的特殊 attribute 主要用于在 Vue 的虚拟 DOM 算法&＃xff0c;在新旧 nodes 对比时辨识 VNodes。如果不使用 key&＃xff0c;Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时&＃xff0c;它会基于 key 的变化重新排列元素顺序&＃xff0c;并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key&＃xff0c;重复的 key 会造成渲染错误

2.ref

ref 被用来给元素或子组件注册引用信息&＃xff0c;引用信息将会注册在父组件的 $refs 对象上&＃xff0c;如果在普通的 DOM 元素上使用&＃xff0c;引用指向的就是 DOM 元素&＃xff1b;如果用在子组件上&＃xff0c;引用就指向组件实例

3.is

用于动态组件且基于 DOM 内模板的限制来工作

三、内置的组件

1.component

渲染一个 元组件 为动态组件。依 is 的值&＃xff0c;来决定哪个组件渲染

2.transition

props:

name 用于自动生成 CSS 过渡类名

appear boolean&＃xff0c;是否在初始渲染时使用过渡。默认 false

css boolean&＃xff0c;是否使用 css 过渡类。默认 true

type string&＃xff0c;指定过渡事件类型&＃xff0c;侦听过度何时结束。有效值为 transition 和 animation

mode string&＃xff0c;控制离开/进入过渡的事件序列。out-in 和 in-out &＃xff1b;默认同时进行

duration number | {enter: number, leave: number} 指定过渡的持续时间&＃xff0c;默认情况下&＃xff0c;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

事件&＃xff1a;

before-enter

before-leave

before-appear

enter

leave

appear

after-enter

after-leave

after-appear

enter-cancelled

leave-cancelled(v-show only)

appear-cancelled

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

3.transition-group

基本同 transition

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

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

4.keep-alive

props:

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

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

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

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

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

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

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

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

5.slot

用于命名插槽

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