Vue3 Built-in Components

Welcome to the Vue3 built-in components tutorial for beginners.

Reference Manual

• Vue3 Built-in Attributes
• Vue3 Built-in Components
• Vue Component Instance
• Vue3 Built-in Directives
• Vue Instance Options
• Vue3 Lifecycle Hooks
• Vue3 Tailwind CSS
• Vue3 Global API
• Vue3 Options API
• Vue3 Quiz

Practical Case One

• Vue3 Task Management System
• Environment Setup
• Core Business Development
• Component Splitting
• State Management and Data Persistence
• Routing System
• Logic Reuse and Performance Optimization
• Project Deployment

Practical Case Two

• Vue3 Blog Project
• Template Syntax Rendering
• Reactive Data
• Splitting Components
• Router Navigation
• Lifecycle with Data Requests
• Watch and Search Functionality
• Composable - Encapsulating Reusable Logic
• Pinia - Global State Management
• Deploy Online - Deploy to Vercel

Vue3 Built-in Components

In Vue.js, there are some built-in global components and built-in components that provide some commonly used functions and layout support, helping developers quickly build application interfaces.

1. component

The `` is an abstract component used to dynamically render different components or elements.

<component :is="currentComponent"></component>

2. transition and transition-group

The `` and `` provide functionality to implement transition and animation effects in Vue.js.

<transition name="fade"> <div v-if="show">Hello!</div></transition>
<transition-group name="list" tag="ul"> 
    <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

3. keep-alive

The `` is an abstract component used to keep component state or avoid multiple renders.

<keep-alive> 
    <component :is="currentComponent"></component>
</keep-alive>

4. slot

The `` is a Vue.js component used for inserting content slots. It allows parent components to pass content to specific slot positions, making components more flexible and reusable.

<child-component> 
    <template #header> 
        <h2>Header Content</h2> 
    </template> 
    <template #default> 
        <p>Default Content</p> 
    </template>
</child-component>

5. teleport

The `` allows you to render DOM elements anywhere in your app, without being constrained by the current DOM structure. This is useful when you need to dynamically move elements within your app, such as rendering popup content inside a modal.

<teleport to="body"> 
    <modal>...</modal>
</teleport>