Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Desenvolvimento Web Avançado com Vue (v2 e v3) e Vuex

Name: Desenvolvimento Web Avançado com Vue (v2 e v3) e Vuex
Rating: 4.7 (795 reviews)

Domine o framework JavaScript front-end que combina o melhor do React e o melhor do Angular

Created byJorge Sant Ana

Last updated 12/2025

Portuguese

Portuguese [Auto],

What you'll learn

Criar aplicações modernas com Vue
Os fundamentos, conceitos e funcionamento do framework Vue
Iniciar e desenvolver projetos profissionais utilizando o Vue CLI
Versionar aplicações Vue no Bitbucket e publicá-las no Heroku
Criar componentes reutilizáveis

Course content

15 sections • 367 lectures • 43h 33m total length

Introdução ao Vue.js3:15
Canais de comunicação0:05
Instalando as ferramentas de desenvolvimento local4:57
Iniciando o nosso primeiro front-end com Vue12:19
Primeiro App em Vue (instância de Vue e o double mustache)11:09
Iniciando projetos Vue com o JSFiddle e ou Codepen4:53
Explorando um pouco mais a propriedade data8:23
Methods - Adicionando os nossos primeiros métodos a instância Vue9:11
Methods - Recuperando atributos do data3:28
Methods - O contexto léxico das arrow functions e o conflito de nomes6:12
Diretiva V-Bind - Realizando o bind de atributos de tags HTML9:35
Diretiva V-Bind - Sintaxe sugar e a sobreposição/encadeamento de valores6:25
Utilizando expressões no data binding8:27
Diretiva V-On - Manipulando eventos5:31
Methods - Passando parâmetros para os métodos6:01
Diretiva V-On - Capturando os dados do evento ($event)3:16
Hands on - Praticando com data, methods, template string, v-bind e v-on19:13
Diretiva V-On - Implementando modificadores18:48
Selecionando elementos HTML e suas propriedades por ID7:39
Diretiva V-If - Renderização condicional de elementos HTML18:19
Diretiva V-Show - Exibição condicional de elementos HTML6:43
Diretiva V-HTML - Injetando elementos HTML6:04
Diretiva V-Text - Injetando textos3:16
Diretiva V-Once - Evitando que elementos HTML sejam renderizados novamente5:46
Diretiva V-For - Implementando laços de repetição parte 16:03
Diretiva V-For - Implementando laços de repetição parte 28:28
Renderização de listas com o atributo Key8:58
Diretiva V-For - Implementando laços de repetição parte 31:43
Diretiva V-For - Implementando laços de repetição parte 410:37
Trabalhando com a tag Template para renderização condicional e listas5:36
Trabalhando com propriedades computadas (computed) parte 111:18
Trabalhando com propriedades computadas (computed) parte 212:57
Diretiva V-Model - Sincronizando inputs com atributos (two-way-data binding)7:50
Diretiva V-Model - Praticando um pouco mais o two-way-data binding10:09
Trabalhando com propriedades observadoras (watch)14:28

Utilizando objetos para definir estilos visuais por meio do atributo class10:47
Utilizando arrays para definir estilos visuais por meio do atributo class7:07
Utilizando objetos para definir estilos visuais por meio do atributo style10:34
Aplicando estilos com propriedades computadas9:41
Referenciando elementos HTML com $refs16:36
DOM e Virtual DOM5:55
DOM e Virtual DOM - Evitando comportamentos inesperados11:07
Carregando o template por meio do método $mount3:04
Carregando o template por meio da propriedade template3:26

Introdução a seção2:22
[WINDOWS] - Instalando o Node e NPM6:40
[LINUX] - Instalando o Node e NPM3:20
[OSX] - Instalando o Node e NPM4:05
Instalando o Vue CLI2:39
Iniciando um projeto com o Vue CLI7:14
Iniciando um projeto customizado com Vue CLI9:39
Definindo a porta para servir a aplicação1:30
Vue UI - Criando projetos7:25
Vue UI - Gerenciando projetos12:13
Entendendo a estrutura de pastas e arquivos do projeto parte 115:15
Entendendo a estrutura de pastas e arquivos do projeto parte 27:54
Composição das versões e os caracteres til e circunflexo10:33
Reconstruindo as dependências do projeto3:48
[WINDOWS] - Instalando o Git5:20
[LINUX] - Instalando o Git2:10
[OSX] - Instalando o Git1:34
O que é o GIT, Github e Bitbucket4:59
Git - Configuração global e local9:10
Bitbucket - Criando uma conta de usuário5:56
Git e Bitbucket - Conectando o repositório local com o repositório remoto11:46
Git - Trabalhando com alterações (status, add, reset, commit e log)14:59
Git - Enviando atualizações do repositório local para o remoto (push)9:31
Git - Clonando um repositório remoto e instalando as dependências6:25
Heroku - Criando uma conta de usuário4:37
Heroku - Criando um app3:03
[WINDOWS] - Instalando o Heroku CLI2:50
[LINUX] - Instalando o Heroku CLI2:35
[OSX] - Instalando o Heroku CLI2:01
Instalando Express2:02
Criando um servidor web com Node e Express6:07
Servindo a aplicação Vue de produção por meio do Express4:22
Configurando um comando no package.json para iniciar o servidor web2:57
Git e Heroku - Conectando o repositório local com o repositório remoto6:27
Extra - Comentários sobre a arquitetura de versionamento3:44
Heroku - Realizando o deploy da aplicação8:17
Vue Devtools - Introdução e instalação4:46

Iniciando o projeto Vagas2:10
Single File Component ou Single File Template8:16
Criando os componentes Topo e Conteudo7:26
Definindo nomes para os componentes6:15
Seletores (tags) dos componentes e kebab case8:13
Adicionando o Bootstrap ao projeto e customizando o componente Topo5:09
Criando os componentes Home e PublicarVaga4:13
Estilo aplicado ao escopo do componente parte 1 (scoped)9:20
Estilo aplicado ao escopo do componente parte 2 (module)15:40
Importando componentes com o alias @4:39
Ciclo de vida do componente (Lifecycle Hooks) - Introdução6:33
Ciclo de vida do componente (Lifecycle Hooks) - Criação e montagem10:04
Ciclo de vida do componente (Lifecycle Hooks) - Atualização e remoção7:36
Renderização dinâmica de componentes6:17
Ciclo de vida do componente (Lifecycle Hooks) - Ativação e desativação8:06
Implementando o componente Home7:35
Implementando o componente PesquisarVaga5:14
Implementando o componente Indicador4:33
Comunicação entre componentes (props) - Pai para o filho9:51
Criando um estilo visual computado6:03
Comunicação entre componentes (props) - Reatividade pai para o filho7:11
Criando o componente Vaga6:12
Listando vagas8:46
Nomeação de propriedades (props)4:50
Tipagem de props6:16
Validação de props (required e validator)10:27
Valores padrões de props (default)4:09
Enviando objeto via props com a diretiva v-bind4:45
Implementando o componente PublicarVaga6:39
Armazenando registro de vaga em LocalStorage11:59
Armazenando múltiplos registros de vagas em LocalStorage8:41
Exibindo vagas registradas em LocalStorage7:52
Criando propriedades computadas para exibição da modalidade e tipo5:36
Adicionando e exibindo a data de publicação5:15
Tratando a exibição das datas de publicação7:41
Comunicação entre componente filho e pai - Introdução1:57
Comunicação entre componente filho e pai - Trabalhando com o $emit e v-on/@9:18
Comunicação entre componente filho e pai - Callbacks via $event4:55
Comunicação entre componente filho e pai - Callbacks via prop5:11
Implementando a navegação por meio do componente TopoPadrao e Conteudo13:18
Favoritando vagas parte 19:09
Favoritando vagas parte 25:56
Comunicação indireta entre componentes com $emitter7:48
Configurando e emitindo eventos com mitt11:50
Favoritando vagas parte 314:30
Limpando o formulário de cadastro de vagas após o registro3:15
Criando o componente Alerta4:27
Exibindo e ocultando o componente Alerta após o cadastro de vaga7:33
Passando conteúdo HTML para o componente por meio de Slots3:58
Múltiplos Slots (slots nomeados)5:15
Slot padrão5:37
Definindo valores padrões nos Slots4:34
Finalizando o cadastro de vagas com o feedback de sucesso6:10
Finalizando o cadastro de vagas com o feedback de erro5:10
Modificando o estilo visual do alerta9:27
Implementando o filtro de vagas17:34
Slots com escopo definido parte 19:18
Slots com escopo definido parte 23:19
Slots com escopo definido parte 3 (slot padrão)15:06
Slots com escopo definido parte 4 (múltiplos slots)9:54

Iniciando o projeto Formulario6:36
Two-way data binding (v-model)4:16
Agrupando dados do formulário em um objeto8:36
V-model e a sobrescrita do atributo value de inputs HTML2:38
Modificadores embutidos do v-model (number, trim e lazy)8:49
Manipulando inputs do tipo checkbox parte 1 - Atributos true-value e false-value5:54
Manipulando inputs do tipo checkbox parte 2 - Múltiplas opções5:04
Manipulando inputs do tipo radio4:04
Instalando e configurando a lib maska5:30
Máscara de telefone6:24
Máscaras de cep, cpf, cnpj e cartão de crédito6:00
Máscaras de placas de veículos e rg8:48
Manipulando inputs do tipo date, datetime-local, month, week e time parte 13:05
Instalando e configurando a lib moment (abordagem local)9:36
Refactoring da configuração da lib moment (abordagem global)6:45
Manipulando inputs do tipo date, datetime-local, month, week e time parte 29:45
Manipulando inputs do tipo color3:15
Manipulando inputs do tipo range3:15
Manipulando inputs do tipo hidden2:15
Manipulando inputs do tipo file9:59
Fix - Correção do valor inicial do atributo cor2:01
Manipulando campos textarea5:05
Manipulando campos select parte 14:09
Manipulando campos select parte 27:38
Enviando o formulário (submit e button)11:52
Resetando o form (retornando os dados para o estado inicial)10:07
Criando um campo personalizado parte 13:55
Criando um campo personalizado parte 212:19
Criando um campo personalizado parte 312:13
Criando um campo personalizado parte 45:07
Criando um campo personalizado parte 54:34

Iniciando o projeto Diretivas2:39
Criando uma diretiva personalizada7:28
Manipulando o elemento HTML por meio da diretiva personalizada9:59
Binding de valores da diretiva12:01
Binding de valores da diretiva com atributos da instância do componente1:31
Binding de argumento da diretiva9:25
Binding de modificadores da diretiva parte 19:28
Binding de modificadores da diretiva parte 215:17
Modificando a exibição com base no argumento13:03
Aplicando múltiplos modificadores em uma diretiva5:28
Importando diretivas para o registro global5:36
Registrando diretivas localmente8:13
Importando diretivas para o registro local3:33

Requirements

Conhecimento básico em HTML, CSS, Bootstrap e JavaScript

Description

Bem-vindo ao curso Desenvolvimento Web Avançado com Vue (v2 e v3) e Vuex.

Descubra como ganhar produtividade no desenvolvimento de aplicações web front-end modernas utilizando o framework Vue e a linguagem de programação JavaScript.

O curso conta com mais de 350 aulas, ao todo são mais de 40 horas de videoaulas, tudo com muita prática. Além disso você contará com um suporte campeão para tirar suas dúvidas.

Para iniciar o treinamento é importante que você tenha conhecimentos básicos HTML, CSS, Bootstrap e JavaScript.

Conheça agora mesmo o curso mais COMPLETO da Udemy sobre o framework Vue e leve seus conhecimentos de programação para o próximo nível!

Confira abaixo os principais tópicos que você irá aprender nesse curso:

- Configuração do ambiente de desenvolvimento nos sistemas operacionais Windows, Linux Ubuntu e OSX.

- Conceitos iniciais do framework VueJS.

- Propriedades el, data, methods, computed, watch, $refs, template.

- Diretivas v-bind, v-on, v-if, v-show, v-html, v-text, v-once, v-for, v-model.

- One-way data binding e two-way data binding.

- Virtual DOM vs DOM real.

- Vue CLI (plugins, variáveis de ambiente, eslint, webpack), Git e Bitbucket, deploy Heroku e Vue Devtools.

- Extra: Aplicações desktop com Vue 3 e Electron.

- Componentes: Single file component, lifecycle hooks, props, $event, barramento de eventos global com lib mitt e slots.

- Formulários e máscaras de input (bibliotecas maska e moment)

- Diretivas customizadas

- Mixins

- Vue Router (navegando entre componentes) e JSON Server

- Animações

- Gerenciamento de estado centralizado com Vuex

Who this course is for:

Esse curso é destinado a qualquer profissional interessado em alcançar os mais altos níveis de desenvolvimento de aplicações web modernas utilizando a tecnologia JavaScript e o framework Vue

Desenvolvimento Web Avançado com Vue (v2 e v3) e Vuex

What you'll learn

Explore related topics

Course content

Iniciando com VueJS35 lectures • 4hr 47min

Projeto Montando o Lanche9 lectures • 1hr 12min

Avançando com VueJS9 lectures • 1hr 18min

Avançando com VueJS 32 lectures • 12min

Vue CLI, Git e Bitbucket, deploy com Heroku e Vue Devtools37 lectures • 3hr 40min

Avançando com Vue CLI7 lectures • 1hr 12min

[Extra] - Aplicações desktop com Vue 3 e Electron3 lectures • 9min

Componentes - Do básico ao avançado60 lectures • 7hr 24min

Formulários e máscaras de input31 lectures • 3hr 20min

Diretivas customizadas13 lectures • 1hr 44min

Requirements

Description

Who this course is for: