Antes de começar confira o resultado do nosso desenvolvimento no vídeo abaixo!
Clique na imagem para ser redirecionado!
Este projeto foi desenvolvido a partir do The Vue 3 Bootcamp - The Complite Developer Guide, como proposta de terceiro projeto usado o Vue 3.
- App Overview
- The HTML and CSS
- List Card Renderign - usando os dados quizes.json
- Qatching For State Changes - usando o import watch
- Separating our COde Into Components
- Passing Data to Components via Props
Em uma segunda etapa, após a introdução do vue-router -que você pode conferir o projeto de aprendizagem em um link abaixo- aplicamos esses conhecimentos em nosso QuizApp
Confira o projeto de aprendizagem RouterVueLearning
Para finalizar a primeira etapa do projeto, vimos:
- Listening to Changes eith Watch
- Computing Values with State
- Passing Data From the Child Component
- Emiting an Event From the Child Component
😉
Nessa segunda etapa foi trabalhado alguns aspectos importantes sobre o animation. Neste contexto, realizamos dois projetos paralelos com o objeto de: estudo de práticas iniciais, aplicação em um pequeno projeto com um template mais elaborado. Você pode conferir os dois projetos logo abaixo:
Note
Confira o projeto animation clicando aqui!
Note
Confira o projeto smallApp clicando aqui!
- Introduction to Vue Animations
- The Transition Component
- Animationg When a Component Leaves
- Conditional Rendering Animations
- TransitionGroup to Animate Multiple Elements
- Routing Animations
- Lifecycle Hook of the Transition
- Animation Styling With Java Script
🤓
Obrigada!
This template should help get you started developing with Vue 3 in Vite.
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
npm installnpm run devnpm run build