Vue的内置组件
component
作用:渲染一个“原组件”为动态组件。依is
的值,来决定那个组件被渲染
props:
is
: -string|ComponentDefinition|ComponentConstructor
inline-template
: -boolean
用法:
动态组件由 vm 实例的属性值 componentId
控制
<component :is="componentId"></component>
也能够渲染注册过的组件或 prop 传入的组件
<component :is="$options.components.child"></component>
transition
为组件的载入和切换提供动画效果,具有非常强的可定制性,支持16
个属性和12
个事件
Props:
name
- string,用于自动生成 CSS 过渡类名。例如:name: 'fade'
将自动拓展为.fade-enter
,.fade-enter-active
等。默认类名为 "v"
appear
- boolean,是否在初始渲染时使用过渡。默认为 false
。
css
- boolean,是否使用 CSS 过渡类。默认为 true
。如果设置为 false
,将只通过组件事件触发注册的 JavaScript 钩子
。
type
- string,指定过渡事件类型,侦听过渡何时结束。有效值为 “transition
” 和 “animation
”。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
mode
- string,控制离开/进入的过渡时间序列。有效的模式有 “out-in
” 和 “in-out
”;默认同时生效。
duration
- number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下,Vue 会等待过渡所在根元素的第一个 transitionend
或 animationend
事件。
enter-class
- string
leave-class
- string
appear-class
- string
enter-to-class
- string
leave-to-class
- string
appear-to-class
- string
enter-active-class
- string
leave-active-class
- string
appear-active-class
- string
事件:
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 元素,也不会出现在检测过的组件层级中。
<!-- 简单元素 -->
<transition>
<div v-if="ok">toggled content</div>
</transition>
<!-- 动态组件 -->
<transition