Qual é a diferença entre v-if e v-show no Vue.js 3?

v-if cria ou remove o elemento do DOM; v-show apenas alterna sua visibilidade com CSS.

Como acessar o parâmetro id em uma rota dinâmica do Vue Router?

Use route.params.id, por exemplo, para ler o id em uma rota como /usuarios/:id.

Qual a diferença entre ref e reactive na Composition API do Vue 3?

ref é usado principalmente para valores simples e acessado com .value no JavaScript; reactive é indicado para objetos reativos.

Imagem do Curso gratuito Vue.js 3 do Zero ao Intermediário (Router, Vuex e Composition API)

Curso online gratuito Vue.js 3 do Zero ao Intermediário (Router, Vuex e Composition API)

Name: Vue.js 3 do Zero ao Intermediário (Router, Vuex e Composition API)
Availability: InStock

Duração do curso online: 6 horas e 48 minutos

Novo

Aprenda Vue.js 3 na prática e crie SPAs com Router, Vuex e Composition API. Curso online gratuito, com exercícios e projeto para portfólio.

Neste curso gratuito, aprenda sobre

Fundamentos do Vue 3 e estrutura de um app no ecossistema
Formas de instalação: CDN vs Vite/NPM e quando usar cada uma
SFC (.vue): uso de template, script e style no mesmo arquivo
Renderização condicional: diferenças e uso de v-if e v-show
Listas com v-for: uso de key para performance e consistência
Data binding com v-bind e bindings dinâmicos de class/style
Two-way data binding com v-model em formulários
Eventos no Vue: v-on, modifiers como .prevent e boas práticas
Computed vs watch: derivação reativa e reação a mudanças
Ciclo de vida: hooks para iniciar libs no DOM e limpar recursos
Componentização: slots, scoped CSS, props e emit (pai/filho)
Vue Router: RouterView e acesso a params em rotas dinâmicas
Vuex: state global, mutations, getters, actions e fluxo de dados
Composition API: setup, ref/reactive, computed/watch e props/emit

Sobre o curso online gratuito

Desenvolver interfaces modernas e escaláveis exige mais do que saber “montar telas”: é preciso dominar componentes, reatividade e organização de estado e rotas. Neste curso online gratuito de Vue.js 3, você evolui do zero ao nível intermediário criando aplicações front-end com uma base sólida, entendendo como o framework funciona e, principalmente, como aplicar cada recurso com intenção e boas práticas.

Você começa pelos fundamentos essenciais do ecossistema Vue, aprendendo diferentes formas de instalação e como trabalhar com Single File Components (SFC) para estruturar projetos de maneira profissional. A partir daí, ganha fluência na construção de templates com controle de renderização e listas, data binding em atributos, classes e estilos, além da ligação bidirecional de dados em formulários. Tudo isso é complementado com o uso correto de eventos, computed properties e watchers para tornar sua aplicação mais eficiente, previsível e fácil de manter.

Para que seus componentes sejam realmente reutilizáveis, o curso aprofunda comunicação entre pai e filho com props e emit, além do uso de slots para composição de layout. Você também entende a diferença entre CSS global e escopado e aprende a evitar efeitos colaterais visuais em projetos maiores. Com isso, você passa a montar interfaces por partes, com responsabilidade bem definida e código mais limpo.

No nível intermediário, o foco vai para arquitetura de SPA com Vue Router, trabalhando com rotas, rotas dinâmicas e a renderização de páginas dentro da aplicação. Em seguida, você aprende gerenciamento de estado global com Vuex, entendendo na prática quando e por que usar state, mutations, actions e getters para manter consistência entre componentes e tratar fluxos assíncronos de forma segura.

Para fechar, você entra na Composition API do Vue 3, aprendendo setup, reatividade com ref e reactive, computed e watch no novo modelo, além de lifecycle hooks e padrões para lidar com props e emissão de eventos. O curso culmina em um projeto completo, incluindo a simulação de back-end e a evolução do código, reforçando decisões de arquitetura, sincronização de estado e organização de componentes — um ótimo material para demonstrar habilidades em entrevistas e fortalecer seu portfólio.

Conteúdo do curso

Aula em vídeo: Curso gratuito Vue.js 3 INTRO #1 - Introdução 14m
Exercício: No ecossistema do Vue.js, qual ferramenta é responsável por gerenciar o estado global da aplicação?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #2 - Instalando 17m
Exercício: Em qual cenário a instalação do Vue via CDN é mais indicada?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #3 - Componentes de arquivo u?nico SFC 11m
Exercício: Em um componente Vue no formato SFC (.vue), qual combinação de camadas pode existir dentro de um único arquivo?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #4 - Declarac?o?es condicionais (diretiva v-if v-show) 16m
Exercício: Qual é a principal diferença entre as diretivas v-show e v-if ao controlar a exibição de um elemento?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #5 - Instruço?es de loops (diretiva v-for) 07m
Exercício: Ao renderizar uma lista com v-for no Vue 3, qual prática melhora a performance e evita problemas de renderização ao identificar cada item?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #6 - Atributos dinâmicos com data binding (diretiva v-bind) 08m
Exercício: Em Vue.js, qual é a forma correta de tornar um atributo HTML dinâmico (ex.: src ou alt) usando bind?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #7 - Atributos Class e Style dina?micos 12m
Exercício: No Vue.js, como funciona o binding de classes usando objeto em :class?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #8 - Ligac?a?o de dados bidirecional (diretiva v model) 10m
Exercício: No Vue.js, qual diretiva é usada para fazer two-way data binding (ligação de mão dupla) em elementos de formulário?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #9 - Eventos 12m
Exercício: Em Vue.js, qual alternativa usa corretamente um modificador de evento para impedir o comportamento padrão do formulário ao enviar?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #10 - Propriedade computada (computed) 15m
Exercício: Em Vue.js, qual é a principal vantagem de usar uma propriedade computada para gerar um valor (ex.: nome completo) a partir de outros campos?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #11 - Observadores (watch) 12m
Exercício: Ao criar um observador (watcher) para a propriedade name, quais parâmetros a função observadora recebe para lidar com a mudança?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #12 - Ciclo de vida (life cycle) 17m
Exercício: Em qual fase/gancho do ciclo de vida é mais indicado inicializar uma biblioteca externa que precisa acessar o DOM/template no Vue.js?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #13 - Componentes slot 09m
Exercício: Qual é a forma correta de enviar conteúdo para um slot nomeado em um componente Vue 3?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #14 - Scoped e global CSS 08m
Exercício: Ao definir estilos dentro de um componente Vue, qual alternativa garante que a classe não afete elementos fora desse componente?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #15 - Enviando dados para o componente filho (props) 17m
Exercício: No Vue.js, qual é a finalidade principal de usar props em um componente filho?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #16 - Enviando dados do filho para o pai (emit) 06m
Exercício: Como o componente filho pode avisar o componente pai para fechar um Alert no Vue.js?

Aula em vídeo: Curso gratuito Vue.js 3 INTRO #17 - Introduc?a?o ao Vue Router parte 1 11m
Exercício: Ao usar o Vue Router, qual é a função do componente RouterView na aplicação?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #18 - Introduc?a?o ao Vue Router parte 2 09m
Exercício: Em uma rota dinâmica como /usuarios/:id, qual propriedade é usada para acessar o valor do parâmetro id dentro do componente?

Aula em vídeo: Curso gratuito Vue.js 3 INTRO #19 - Introduc?a?o VUEX (state) 12m
Exercício: Qual é a principal vantagem de usar Vuex para acessar dados do usuário logado em vários componentes?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #20 - Introduc?a?o VUEX Mutations parte 1 06m
Exercício: No Vuex, qual método é usado no componente para disparar uma mutation e atualizar o state?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #21 - Introduc?a?o VUEX Mutations parte 2 15m
Exercício: Ao clicar em Adicionar em um produto, qual é a forma correta de atualizar o carrinho no Vuex?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #22 - Introduc?a?o VUEX Getters 05m
Exercício: No Vuex, qual é a principal função de um getter ao calcular o total do carrinho?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #23 - Introduc?a?o VUEX Actions 11m
Exercício: No Vuex, qual é o principal motivo para usar Actions em vez de alterar o state diretamente ou usar apenas Mutations?

Aula em vídeo: Curso gratuito Vue.js 3 INTRO #24 - Introduc?a?o a composition API setup 14m
Exercício: Na Composition API do Vue 3, o que define quais variáveis e funções ficam disponíveis no template do componente?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #25 - Introduc?a?o a composition API Reatividade 09m
Exercício: Ao usar a Composition API no Vue 3, qual é a principal diferença prática entre reactive e ref ao manipular valores no JavaScript?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #26 - Introduc?a?o a composition API Computed e Watch 07m
Exercício: Na Composition API do Vue 3, qual é a forma correta de observar uma propriedade específica dentro de um objeto reativo usando watch?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #27 - Introduc?a?o a composition API Ciclo de vida 06m
Exercício: No Vue 3 com Composition API, qual é o hook mais indicado para limpar recursos (ex.: listeners, timers e libs de terceiros) e evitar vazamento de memória ao remover um componente?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #28 - Introduc?a?o a composition API Props e Emit 08m
Exercício: Na Composition API do Vue 3, como acessar props e emitir eventos dentro do método setup()?

Aula em vídeo: Curso gratuito Vue.js 3 INTRO #29 - Projeto aula 01 13m
Exercício: Para simular um back-end durante o projeto, qual ferramenta deve ser instalada globalmente para subir uma REST API a partir de um arquivo JSON?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #30 - Projeto aula 02 17m
Exercício: Ao organizar a interface em subcomponentes no Vue, qual foi o padrão adotado para nomear componentes do contexto de tarefas (todos)?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #31 - Projeto aula 03 13m
Exercício: Ao usar Vuex com actions que retornam Promise, qual é a principal vantagem de retornar a Promise da action e usar .then/.finally no componente?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #32 - Projeto aula 04 15m
Exercício: Ao editar o título de uma tarefa, qual abordagem evita o anti padrão de modificar diretamente uma prop e facilita disparar a atualização ao pressionar Enter?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #33 - Projeto aula 05 13m
Exercício: Ao atualizar uma tarefa, como sincronizar o estado no Vuex para substituir o item existente (em vez de apenas adicionar um novo)?

Aula em vídeo: Curso gratuito Vue.js 3 INTRO #34 - Refazedo o projeto com composition API part 1 09m
Exercício: Ao migrar um componente da Options API para a Composition API no Vue 3, qual é a forma correta de disponibilizar uma variável reativa no template?
Aula em vídeo: Curso gratuito Vue.js 3 INTRO #35 - Refazedo o projeto com composition API part 2 08m
Exercício: Ao migrar um componente para a Composition API no Vue 3, qual é a forma correta de expor variáveis e funções para uso no template?

Cursos online Gratuitos sobre JavaScript

Aprenda sobreJavaScript

Aprenda JavaScript com cursos online gratuitos e com certificado para impulsionar sua carreira em desenvolvimento web. Encontre aulas para iniciantes e profissionais sobre lógica de programação, funções, objetos, DOM, eventos, APIs e frameworks. Estude no seu ritmo, desenvolva projetos práticos e conquiste novas oportunidades no mercado de tecnologia.

Aprenda sobreVue.js

Encontre cursos online gratuitos de Vue.js com certificado e aprenda a criar interfaces modernas, aplicações web reativas e componentes reutilizáveis. Estude desde os fundamentos até recursos avançados do framework, no seu ritmo, e desenvolva habilidades valorizadas no mercado de tecnologia. Comece agora sua formação em Vue.js gratuitamente!