Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the built-in components in vuejs

2025-02-24 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/03 Report--

This article is about what are the built-in components in vuejs. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The built-in components in vuejs are: ",".

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 the template without registration.

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

/ / CDN build of Vue const {KeepAlive, Teleport, Transition, TransitionGroup} = ESM build of Vue// Vue import {KeepAlive, Teleport, Transition, TransitionGroup} from 'vue'

And are features of the component form in the template syntax. They are not real components and cannot be imported like the components described above.

Here is a brief introduction to the built-in components in vuejs.

Multi-application and creation of dynamic components

Parameters are is and inline-template, the former is mostly string or custom component, and the latter is Boolean type

Code example

Change the component / / two custom components import login from'.. / components/login.vue'import index from'.. / components/index.vue'export default {name: 'BuildInComponent', components: {index, login}, / / display the index component data () {return {currentComp:index}} by default Methods: {changeComponent () {if (this.currentComp = = login) {this.currentComp = index} else {this.currentComp = login}

When you wrap a dynamic component, inactive component instances are cached rather than destroyed. Similarly, it is an abstract component: it does not render an DOM element by itself, nor does it appear in the parent component chain.

The attributes on this component are include,exclude,max, and the first two are strings or this expression, caching / not caching matched components, and max represents the maximum number of components that can be cached.

The match first checks the name option of the component itself, and if the name option is not available, matches its local registered name (the key value of the parent component components option). Anonymous components cannot be matched.

This component is usually used in conjunction with components that contain conditions, such as vmurshowshow, vripifmage, vripifflage, vsley else, is, etc.

Code example

I'm 1111111111. I'm 2222222222222222. I'm 333333333333 export default {name: 'BuildInComponent', data () {return {condition:parseInt (Math.random () * 3)}},}.

Add the transition effect of the wrapped element as the transition effect of a single element / component. The transition effect is applied only to the content of its package, without additional rendering of DOM elements, and does not appear at the detected component level.

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 class. The default is true. If set to false, registered JavaScript hooks will only be triggered by component events

You can also customize the class name through attributes such as enter-class,leave-class, which is usually used in conjunction with third-party animation libraries

Css transition

The class name of the css transition has the value of the name attribute of the transition attribute (marked as v, and if there is no value of the name attribute, the default is v -), which combines the following:

V-enter: defines the starting state of the transition. It takes effect before the element is inserted and removed at the next frame after the element is inserted.

V-enter-active: defines the state when the transition takes effect. Applied throughout the transition phase, effective before the element is inserted and removed after the transition / animation is complete. This class can be used to define the process time, delay, and curve functions for entering the transition.

V-enter-to: the definition of version 2.1.8 and above enters the end of the transition. The next frame takes effect after the element is inserted (while the v-enter is removed) and removed after the transition / animation is complete.

V-leave: defines the start state of leaving the transition. It takes effect immediately when the departure transition is triggered, and the next frame is removed.

V-leave-active: defines the state when the transition takes effect. Applied throughout the phase of leaving the transition, it takes effect as soon as the leaving transition is triggered and removed after the transition / animation is complete. This class can be used to define the process time, delay, and curve functions that leave the transition.

V-leave-to: the definition of version 2.1.8 and above leaves the end state of the transition. The next frame takes effect after the departure transition is triggered (while the v-leave is deleted) and removed after the transition / animation is complete.

Code example

Toggle render hello

Toggle show Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.

Export default {name: 'BuildInComponent', data () {return {show: true}},} / * you can set different entry and departure animations * / / * set duration and animation functions * / .slide-fade-enter-active {transition: all .3s ease;} .animation-fade-leave-active {transition: all .8s cubic-bezier (1.0,0.5,0.8,1.0) } .animation-fade-enter, .animation-fade-leave-to/*-fade-leave-active for below version 2.1.8 * / {transform: translateX (10px); opacity: 0;} / * you can also use css animation * / .bounce-enter-active {animation: bounce-in .5s;} .bounce-leave-active {animation: bounce-in .5s reverse;} @ keyframes bounce-in } 50% {transform: scale (1.5);} 100% {transform: scale (1);}}

Js transition

You can also declare the JavaScript hook function in the property. In the hook function, you can use js for animation.

When only JavaScript transitions are used, done must be used for callbacks in enter and leave. Otherwise, they will be called synchronously and the transition will be completed immediately

For elements that use only JavaScript transitions, Vue skips CSS detection by adding vMub binding CSSs = "false". This can also avoid the impact of CSS in the transition process.

/ / using js transition, you can usually listen for events in the component and write a callback function for listening.

Props:

Tag-string-if not defined, animation elements are not rendered.

Move-class-overrides the CSS class applied during the mobile transition.

Except for mode-other attribute and the same.

Events:

The event is the same as.

Usage:

Provides the transition effect of multiple elements / components. By default, it does not render an DOM element wrapper, but it can be defined by tag attribute.

Note that each child node must have a separate key for the animation to work properly.

Support for transitional mobility through CSS transform. When a child node is updated and changes from the location on the screen, it is applied to a moving CSS class (automatically generated by name attribute or configuration move-class attribute). If CSS transform property is a "transitive" property, the FLIP technique will be used to smooth the element to the end of the animation when the mobile class is applied.

{{item.text}}

The content distribution of vue is very suitable for the scene of "fixed part + dynamic part". The fixed part can be structurally fixed or logically fixed, for example, the drop-down loading, the drop-down loading is only the middle content is dynamic, and pulling to the bottom will trigger the operation of pulling more content, so we can make the drop-down loading into a plug-in with slot

Props:

Name-string for named slots

Usage:

Element as a content distribution slot in the component template. The element itself will be replaced.

Props:

To-string. Prop is required and must be a valid query selector or HTMLElement (if used in a browser environment). Specify the target element in which the content will be moved

Disabled-boolean. This optional attribute can be used for disabled features, which means that the contents of its slot will not be moved to any location, but will be rendered in the location you specified in the surrounding parent component.

Note that this will move the actual DOM node instead of being destroyed and recreated, and it will also keep any component instance active. All stateful HTML elements (that is, videos played) remain in their state.

Thank you for reading! This is the end of this article on "what are the built-in components in vuejs"? I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report