DEV Community

Cover image for Componentes nativos do Vue.js
Jhonata Vinicius Da Silva Araujo
Jhonata Vinicius Da Silva Araujo

Posted on

Componentes nativos do Vue.js

#vue #javascript #programming

Os componentes nativos do Vue.js, também conhecidos como "Built-in Components", desempenham um papel fundamental no desenvolvimento de aplicativos Vue.js.

Estes são componentes essenciais fornecidos pelo Vue.js que simplificam a criação de interfaces de usuário interativas e dinâmicas.

Vue Transition e Transition Group: Permitem a criação de transições suaves e animações durante a entrada e saída de elementos na interface do usuário.

Exemplo:

<button @click="show = !show">Toggle</button> <Transition> <p v-if="show">hello</p> </Transition>
Enter fullscreen mode Exit fullscreen mode 
<TransitionGroup name="list" tag="ul"> <li v-for="item in items" :key="item"> {{ item }} </li> </TransitionGroup>
Enter fullscreen mode Exit fullscreen mode

Vue Keep-Alive: Este componente é usado para manter o estado de componentes em cache e preservar seu estado mesmo quando eles são desmontados e remontados.

Exemplo:

<!-- Inactive components will be cached! --> <KeepAlive> <component :is="activeComponent" /> </KeepAlive>
Enter fullscreen mode Exit fullscreen mode

Vue Teleporte: O componente Teleporte permite que você renderize conteúdo em um local diferente da árvore de DOM, o que é útil para criar modais, menus contextuais e sobreposições.

Exemplo:

<script setup> import { ref } from 'vue' const open = ref(false) </script> <template> <button @click="open = true">Open Modal</button> <div v-if="open" class="modal"> <p>Hello from the modal!</p> <button @click="open = false">Close</button> </div> </template> <style scoped> .modal { position: fixed; z-index: 999; top: 20%; left: 50%; width: 300px; margin-left: -150px; } </style>
Enter fullscreen mode Exit fullscreen mode

Vue Suspense: O componente Suspense é usado para gerenciar o carregamento de dados assíncronos e exibir conteúdo de fallback enquanto os dados estão sendo buscados.

<Suspense> <!-- component with nested async dependencies --> <Dashboard /> <!-- loading state via #fallback slot --> <template #fallback> Loading... </template> </Suspense>
Enter fullscreen mode Exit fullscreen mode

O componente possui dois slots: #defaulte #fallback. Ambos os slots permitem apenas um nó filho imediato. O nó no slot padrão é mostrado, se possível. Caso contrário, o nó no slot fallback será mostrado.

Esses componentes nativos desempenham um papel vital no ecossistema do Vue.js, tornando-o uma escolha poderosa para o desenvolvimento de aplicativos web interativos.

Incorporá-los em seu trabalho permite criar aplicações mais eficazes e de fácil manutenção. Além disso, eles são altamente personalizáveis e podem ser usados em conjunto para criar experiências de usuário ricas e dinâmicas.

Referências

https://vuejs.org/guide/built-ins/transition.html

Top comments (0)