Vue内置组件和Vue指令

Vue内置组件

component

属性:
is: string | ComponentDefinition | ComponentConstructor

transition

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

transition-group

  • 元素作为多个元素/组件的过渡效果。 渲染一个真实的 DOM 元素。默认渲染 ,可以通过 tag attribute 配置哪个元素应该被渲染。

keep-alive

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

Vue指令

v-pre

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

<span v-pre>{
   
   { this will not be compiled }}</span>

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。(当{ {message}}还没有被解析出来时页面上会先显示{ {message}},使用v-cloak可以隐藏{ {message}}直到它被解析出来)

[v-cloak] {
    
    
  display: none;
}
<div v-cloak>
  {
   
   { message }}
</div>

once

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

猜你喜欢

转载自blog.csdn.net/qq_36303110/article/details/112250338