What are the built-in components in vuejs-Front-end Q&A-php.cn

Built-in components in vuejs include: " ", " ", " ", " ", " ", " ".

What are the built-in components in vuejs

#The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

vue built-in components

Built-in components can be used directly in templates without registration.

, , and components can all be tree-shaked by the packaging tool. So they are only introduced when used. You can also import them explicitly if you need to access them directly.

// Vue 的 CDN 构建版本 const { KeepAlive, Teleport, Transition, TransitionGroup } = Vue

Copy after login

// Vue 的 ESM 构建版本 import { KeepAlive, Teleport, Transition, TransitionGroup } from 'vue'

Copy after login

and are component-style attributes in template syntax. They are not real components and cannot be imported like the above components.

Let me give you a brief introduction to the built-in components in vuejs.

##Multiple applications and creating dynamic components

The parameters include is and inline-template, The former are mostly strings or custom components, while the latter are Boolean types,

Code examples

Copy after login

When wrapping dynamic components, inactive component instances are cached instead of destroying them. Like , is an abstract component: it does not render a DOM element by itself, nor does it appear in the parent component chain.

The attributes on this component include include, exclude, and max. The first two are strings or this expression. Cache/not cache the matched components. Max represents the maximum number of components that can be cached.
Matching first checks the component's own name option, and if the name option is not available, matches its local registration name (the key value of the parent component's components option). Anonymous components cannot be matched.
This component is usually used in conjunction with v-show, v-if, v-else-if, v-else, is and other components containing conditions

Code examples

Copy after login

##Add the transition effect of the wrapped element, element as a single element /Component's transition effect. will only apply the transition effect to its wrapped content, without rendering additional DOM elements and not appearing in the detected component hierarchy.

Usually used in combination with v-show v-if is, etc.;

There are css transition and js transition
Common attributes: name: string, used to automatically generate CSS transition class name; css: Boolean type, Whether to use CSS transition classes. Defaults to true. If set to false, the registered JavaScript hook will only be triggered through component events
You can also customize the class name through enter-class, leave-class and other attributes, which is usually used in conjunction with a third-party animation library;

css transition

v-enter: Defines the starting state of entering the transition. It takes effect before the element is inserted and is removed on the next frame after the element is inserted.

Copy after login

js过渡

也可以在属性中声明 JavaScript 钩子函数，在钩子函数中，使用js进行动画的操作；
当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成
对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

// 使用js过渡，通常在组件中监听事件，并写好监听到的回调函数即可

Copy after login

Props：

tag - string - 如果未定义，则不渲染动画元素。
move-class - 覆盖移动过渡期间应用的 CSS 类。
除了 mode - 其他 attribute 和相同。

事件：

事件和相同。

用法：

提供了多个元素/组件的过渡效果。默认情况下，它不会渲染一个 DOM 元素包裹器，但是可以通过 tag attribute 来定义。

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

支持通过 CSS transform 过渡移动。当一个子节点被更新，从屏幕上的位置发生变化，它会被应用一个移动中的 CSS 类 (通过 name attribute 或配置 move-class attribute 自动生成)。如果 CSS transform property 是“可过渡” property，当应用移动类时，将会使用 FLIP 技术使元素流畅地到达动画终点。