Desenvolvimento Web Avançado com Vue.JS e Vuex

Desenvolvimento Web Avançado com Vue.JS e Vuex

Sobre o Curso

Bem-vindo ao curso Desenvolvimento Web Avançado com Vue e Vuex.

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

Iniciando com VueJS

smart_display[IMPORTANTE] - Orientações sobre o curso
smart_displayIntrodução ao Vue.js
smart_displayInstalando as ferramentas de desenvolvimento local
smart_displayIniciando o nosso primeiro front-end com Vue
smart_displayPrimeiro App em Vue (instância de Vue e o double mustache)
smart_displayIniciando projetos Vue com o JSFiddle e ou Codepen
smart_displayExplorando um pouco mais a propriedade data
smart_displayMethods - Adicionando os nossos primeiros métodos a instância Vue
smart_displayMethods - Recuperando atributos do data
smart_displayMethods - O contexto léxico das arrow functions e o conflito de nomes
smart_displayDiretiva V-Bind - Realizando o bind de atributos de tags HTML
smart_displayDiretiva V-Bind - Sintaxe sugar e a sobreposição / encadeamento de valores
smart_displayUtilizando expressões no data binding
smart_displayDiretiva V-On - Manipulando eventos
smart_displayMethods - Passando parâmetros para os métodos
smart_displayDiretiva V-On - Capturando os dados do evento ($event)
smart_displayHands on - Praticando com data, methods, template string, v-bind e v-on
smart_displayDiretiva V-On - Implementando modificadores
smart_displaySelecionando elementos HTML e suas propriedades por ID
smart_displayDiretiva V-If - Renderização condicional de elementos HTML
smart_displayDiretiva V-Show - Exibição condicional de elementos HTML
smart_displayDiretiva V-HTML - Injetando elementos HTML
smart_displayDiretiva V-Text - Injetando textos
smart_displayDiretiva V-Once - Evitando que elementos HTML sejam renderizados novamente
smart_displayDiretiva V-For - Implementando laços de repetição parte 1
smart_displayDiretiva V-For - Implementando laços de repetição parte 2
smart_displayRenderização de listas com o atributo Key
smart_displayDiretiva V-For - Implementando laços de repetição parte 3
smart_displayDiretiva V-For - Implementando laços de repetição parte 4
smart_displayTrabalhando com a tag Template para renderização condicional e listas
smart_displayTrabalhando com propriedades computadas (computed) parte 1
smart_displayTrabalhando com propriedades computadas (computed) parte 2
smart_displayDiretiva V-Model - Sincronizando inputs com atributos (two-way-data binding)
smart_displayDiretiva V-Model - Praticando um pouco mais o two-way-data binding
smart_displayTrabalhando com propriedades observadoras (watch)

Projeto Montando o Lanche

smart_displayIniciando o projeto
smart_displayImplementando a interface parte 1
smart_displayImplementando a interface parte 2
smart_displayDefinindo as imagens por meio de propriedades computadas do Vue
smart_displaySelecionando o tipo de pão
smart_displaySelecionando a salada, os molhos e o hambúrguer
smart_displayImplementando a etapa 2
smart_displayImplementando a etapa 3
smart_displayAjustando a chamada assíncrona de novo pedido

Avançando com VueJS

smart_displayUtilizando objetos para definir estilos visuais por meio do atributo class
smart_displayUtilizando arrays para definir estilos visuais por meio do atributo class
smart_displayUtilizando objetos para definir estilos visuais por meio do atributo style
smart_displayAplicando estilos com propriedades computadas
smart_displayReferenciando elementos HTML com $refs
smart_displayDOM e Virtual DOM
smart_displayDOM e Virtual DOM - Evitando comportamentos inesperados
smart_displayCarregando o template por meio do método $mount
smart_displayCarregando o template por meio da propriedade template

Avançando com VueJS 3

smart_display[IMPORTANTE] Antes do upgrade de versão
smart_displayConfigurando e iniciando um projeto com VueJS 3

Vue CLI, Git e Bitbucket, deploy com Heroku e Vue Devtools

smart_displayIntrodução a seção
smart_display[WINDOWS] - Instalando o Node e NPM
smart_display[LINUX] - Instalando o Node e NPM
smart_display[OSX] - Instalando o Node e NPM
smart_displayInstalando o Vue CLI
smart_displayIniciando um projeto com o Vue CLI
smart_displayIniciando um projeto customizado com Vue CLI
smart_displayDefinindo a porta para servir a aplicação
smart_displayVue UI - Criando projetos
smart_displayVue UI - Gerenciando projetos
smart_displayEntendendo a estrutura de pastas e arquivos do projeto parte 1
smart_displayEntendendo a estrutura de pastas e arquivos do projeto parte 2
smart_displayComposição das versões e os caracteres til e circunflexo
smart_displayReconstruindo as dependências do projeto
smart_display[WINDOWS] - Instalando o Git
smart_display[LINUX] - Instalando o Git
smart_display[OSX] - Instalando o Git
smart_displayO que é o GIT, Github e Bitbucket
smart_displayGit - Configuração global e local
smart_displayBitbucket - Criando uma conta de usuário
smart_displayGit e Bitbucket - Conectando o repositório local com o repositório remoto
smart_displayGit - Trabalhando com alterações (status, add, reset, commit e log)
smart_displayGit - Enviando atualizações do repositório local para o remoto (push)
smart_displayGit - Clonando um repositório remoto e instalando as dependências
smart_displayHeroku - Criando uma conta de usuário
smart_displayHeroku - Criando um app
smart_display[WINDOWS] - Instalando o Heroku CLI
smart_display[LINUX] - Instalando o Heroku CLI
smart_display[OSX] - Instalando o Heroku CLI
smart_displayInstalando Express
smart_displayCriando um servidor web com Node e Express
smart_displayServindo a aplicação Vue de produção por meio do Express
smart_displayConfigurando um comando no package.json para iniciar o servidor web
smart_displayGit e Heroku - Conectando o repositório local com o repositório remoto
smart_displayExtra - Comentários sobre a arquitetura de versionamento
smart_displayHeroku - Realizando o deploy da aplicação
smart_displayVue Devtools - Introdução e instalação

Avançando com Vue CLI

smart_displayPlugins do Vue CLI
smart_displayVariáveis de ambiente
smart_displayVariáveis de ambiente e modos de build parte 1
smart_displayVariáveis de ambiente e modos de build parte 2
smart_displayESLint parte 1
smart_displayESLint parte 2
smart_displayCustomizando o Webpack

[Extra] - Aplicações desktop com Vue 3 e Electron

smart_displayIntrodução a seção
smart_displayIniciando um projeto Vue 3 e instalando o plugin Electron Builder
smart_displayExportando uma versão desktop da aplicação web

Componentes - Do básico ao avançado

smart_displayIniciando o projeto Vagas
smart_displaySingle File Component ou Single File Template
smart_displayCriando os componentes Topo e Conteudo
smart_displayDefinindo nomes para os componentes
smart_displaySeletores (tags) dos componentes e kebab case
smart_displayAdicionando o Bootstrap ao projeto e customizando o componente Topo
smart_displayCriando os componentes Home e PublicarVaga
smart_displayEstilo aplicado ao escopo do componente parte 1 (scoped)
smart_displayEstilo aplicado ao escopo do componente parte 2 (module)
smart_displayImportando componentes com o alias @
smart_displayCiclo de vida do componente (Lifecycle Hooks) - Introdução
smart_displayCiclo de vida do componente (Lifecycle Hooks) - Criação e montagem
smart_displayCiclo de vida do componente (Lifecycle Hooks) - Atualização e remoção
smart_displayRenderização dinâmica de componentes
smart_displayCiclo de vida do componente (Lifecycle Hooks) - Ativação e desativação
smart_displayImplementando o componente Home
smart_displayImplementando o componente PesquisarVaga
smart_displayImplementando o componente Indicador
smart_displayComunicação entre componentes (props) - Pai para o filho
smart_displayCriando um estilo visual computado
smart_displayComunicação entre componentes (props) - Reatividade pai para o filho
smart_displayCriando o componente Vaga
smart_displayListando vagas
smart_displayNomeação de propriedades (props)
smart_displayTipagem de props
smart_displayValidação de props (required e validator)
smart_displayValores padrões de props (default)
smart_displayEnviando objeto via props com a diretiva v-bind
smart_displayImplementando o componente PublicarVaga
smart_displayArmazenando registro de vaga em LocalStorage
smart_displayArmazenando múltiplos registros de vagas em LocalStorage
smart_displayExibindo vagas registradas em LocalStorage
smart_displayCriando propriedades computadas para exibição da modalidade e tipo
smart_displayAdicionando e exibindo a data de publicação
smart_displayTratando a exibição das datas de publicação
smart_displayComunicação entre componente filho e pai - Introdução
smart_displayComunicação entre componente filho e pai - Trabalhando com o $emit e v-on/@
smart_displayComunicação entre componente filho e pai - Callbacks via $event
smart_displayComunicação entre componente filho e pai - Callbacks via prop
smart_displayImplementando a navegação por meio do componente TopoPadrao e Conteudo
smart_displayFavoritando vagas parte 1
smart_displayFavoritando vagas parte 2
smart_displayComunicação indireta entre componentes com $emitter
smart_displayConfigurando e emitindo eventos com mitt
smart_displayFavoritando vagas parte 3
smart_displayLimpando o formulário de cadastro de vagas após o registro
smart_displayCriando o componente Alerta
smart_displayExibindo e ocultando o componente Alerta após o cadastro de vaga
smart_displayPassando conteúdo HTML para o componente por meio de Slots
smart_displayMúltiplos Slots (slots nomeados)
smart_displaySlot padrão
smart_displayDefinindo valores padrões nos Slots
smart_displayFinalizando o cadastro de vagas com o feedback de sucesso
smart_displayFinalizando o cadastro de vagas com o feedback de erro
smart_displayModificando o estilo visual do alerta
smart_displayImplementando o filtro de vagas
smart_displaySlots com escopo definido parte 1
smart_displaySlots com escopo definido parte 2
smart_displaySlots com escopo definido parte 3 (slot padrão)
smart_displaySlots com escopo definido parte 4 (múltiplos slots)

Formulários e máscaras de input

smart_displayIniciando o projeto Formulario
smart_displayTwo-way data binding (v-model)
smart_displayAgrupando dados do formulário em um objeto
smart_displayV-model e a sobrescrita do atributo value de inputs HTML
smart_displayModificadores embutidos do v-model (number, trim e lazy)
smart_displayManipulando inputs do tipo checkbox parte 1 - Atributos true-value e false-value
smart_displayManipulando inputs do tipo checkbox parte 2 - Múltiplas opções
smart_displayManipulando inputs do tipo radio
smart_displayInstalando e configurando a lib maska
smart_displayMáscara de telefone
smart_displayMáscaras de cep, cpf, cnpj e cartão de crédito
smart_displayMáscaras de placas de veículos e rg
smart_displayManipulando inputs do tipo date, datetime-local, month, week e time parte 1
smart_displayInstalando e configurando a lib moment (abordagem local)
smart_displayRefactoring da configuração da lib moment (abordagem global)
smart_displayManipulando inputs do tipo date, datetime-local, month, week e time parte 2
smart_displayManipulando inputs do tipo color
smart_displayManipulando inputs do tipo range
smart_displayManipulando inputs do tipo hidden
smart_displayManipulando inputs do tipo file
smart_displayFix - Correção do valor inicial do atributo cor
smart_displayManipulando campos textarea
smart_displayManipulando campos select parte 1
smart_displayManipulando campos select parte 2
smart_displayEnviando o formulário (submit e button)
smart_displayResetando o form (retornando os dados para o estado inicial)
smart_displayCriando um campo personalizado parte 1
smart_displayCriando um campo personalizado parte 2
smart_displayCriando um campo personalizado parte 3
smart_displayCriando um campo personalizado parte 4
smart_displayCriando um campo personalizado parte 5

Diretivas customizadas

smart_displayIniciando o projeto Diretivas
smart_displayCriando uma diretiva personalizada
smart_displayManipulando o elemento HTML por meio da diretiva personalizada
smart_displayBinding de valores da diretiva
smart_displayBinding de valores da diretiva com atributos da instância do componente
smart_displayBinding de argumento da diretiva
smart_displayBinding de modificadores da diretiva parte 1
smart_displayBinding de modificadores da diretiva parte 2
smart_displayModificando a exibição com base no argumento
smart_displayAplicando múltiplos modificadores em uma diretiva
smart_displayImportando diretivas para o registro global
smart_displayRegistrando diretivas localmente
smart_displayImportando diretivas para o registro local

Mixins - Mesclando funcionalidades entre componentes

smart_displayIniciando o projeto Mixins
smart_displayCriando os componentes ListaFilmes, ListaPessoas e ListaVideogames
smart_displayAdicionando registros em ListaFilmes
smart_displayReutilizando código com mixins
smart_displayMúltiplos mixins
smart_displayLidando com conflitos de propriedades (data, methods, computed, watch, props)
smart_displayLidando com o ciclo de vida

Vue Router (navegando entre componentes) e JSON Server

smart_displayIniciando o projeto Empresa 360
smart_displayInstalando o Vue Router
smart_displayConfigurando o Vue Router em um projeto Vue 3
smart_displayIsolando as configurações de rotas em um script
smart_displayNavegação Hash vs History
smart_displayRouter link - Navegando entre rotas
smart_displayConfigurando o Bootstrap no projeto e adicionando o componente Site
smart_displayImplementando o componente Site
smart_displayImplementando o componente Login
smart_displayNavegação programática parte 1 (push e replace)
smart_displayNavegação programática parte 2 (forward, back e go)
smart_displayImplementando o componente Home
smart_displayRotas alinhadas (rotas filhas) parte 1
smart_displayRotas alinhadas (rotas filhas) parte 2
smart_displayEstilizando rota ativa parte 1 (router-link-active e router-link-exact-active)
smart_displayEstilizando rota ativa parte 2 (active-class e exact-active-class)
smart_displayImplementando o componente Dashboard
smart_displayInstalando o JSON Server
smart_displayCriando uma API com JSON Server (end-point de leads)
smart_displayLeads - Requisição HTTP para API fake
smart_displayLeads - Listando registros
smart_displayParâmetros de rotas parte 1 - Enviando parâmetros
smart_displayParâmetros de rotas parte 2 - Recebendo parâmetros via $route.params
smart_displayLead - Exibindo dados
smart_displayApiMixin para requisições HTTP
smart_displayComponente padrão em rotas alinhadas (rotas filhas)
smart_displayNomeando rotas
smart_displayParâmetros em rotas nomeadas
smart_displayRotas nomeadas em navegações programáticas
smart_displayServicos - Listando registros
smart_displayServico - Apresentando detalhes do serviço
smart_displayReagindo a alterações na url com watchers
smart_displayFix - Corrigindo o get undefined
smart_displayReagindo a alterações na url com beforeRouteUpdate
smart_displayMúltiplos Router Views parte 1
smart_displayMúltiplos Router Views parte 2
smart_displayCriando apelidos (alias) para rotas
smart_displayRedirecionamento de rotas
smart_displayRota curinga ”pega tudo”
smart_displayContratos - Listando registros
smart_displayJSON Server - Consultas com relacionamentos
smart_displayQuery Params via router-link
smart_displayTratando os parâmetros de consulta (query params) no hook created
smart_displayContratos - Criando um formulário para pesquisa de registros
smart_displayQuery Params via navegação programática parte 1
smart_displayQuery Params via navegação programática parte 2
smart_displayQuery Params via navegação programática parte 3
smart_displayOtimizando o método getDadosApi
smart_displayParâmetros via props parte 1 - Ativando a captura de parâmetros via props
smart_displayParâmetros via props parte 2 - Props para múltiplos router views
smart_displayParâmetros via props parte 3 - Sobrepondo parâmetros da rota
smart_displayParâmetros via props parte 4 - Function mode
smart_displayGuardas de rota parte 1 - Introdução
smart_displayGuardas de rota parte 2 - Guarda global beforeEach
smart_displayRoute Meta Fields - Campos personalizados
smart_displayGuardas de rota parte 3 - Guarda global afterEach
smart_displayGuardas de rota parte 4 - Guarda de rota beforeEnter
smart_displayGuardas de rota parte 5 - Guarda de componente beforeRouteEnter
smart_displayGuardas de rota parte 6 - Guarda de componente beforeRouteLeave
smart_displayGuardas de rota parte 7 - Guarda de componente beforeRouteUpdate
smart_displayGuardas de rota parte 8 - Guarda global beforeResolve
smart_displayControle de scroll parte 1
smart_displayControle de scroll parte 2 - Implementando o método scrollBehavior
smart_displayControle de scroll parte 3 - Capturando o fragmento Hash e posicionando o scroll
smart_displayControle de scroll parte 4 - Reutilizando o savedPosition
smart_displayLazy loading - Carregamento tardio de componentes
smart_displayLazy loading - Pacotes de carregamento (webpackChunkName)

Animações

smart_displayIniciando o projeto Pokédex
smart_displayAjustes iniciais do projeto
smart_displayCatálogo de Pokémons
smart_displayPalco
smart_displayRenderização e exibição condicional com v-if e v-show
smart_displayAdicionando o componente Transition
smart_displayTransição baseada em CSS - Introdução
smart_displayTransição baseada em CSS - Entrada
smart_displayTransição baseada em CSS - Saída
smart_displayExtra - Comparando o v-if e v-show
smart_displayTransição baseada em CSS - Criando uma transição slide
smart_displayTransição baseada em CSS - Múltiplos componentes Transition
smart_displayTransição baseada em CSS - Nomeando animações
smart_displayOrganizando e otimizando o CSS
smart_displayTransição baseada em CSS - Criando uma transição de zoom
smart_displayTransição baseada em CSS - CSS animation parte 1
smart_displayTransição baseada em CSS - CSS animation parte 2
smart_displayTransição baseada em CSS - Combinando CSS transition e animation
smart_displayTransição baseada em CSS - Tempo de progressão predominante
smart_displayTransição baseada em CSS - Tempo de progressão manual
smart_displayPersonalizando os nomes das classes CSS
smart_displayAdicionando e utilizando a biblioteca Animation.css
smart_displayJavaScript Hooks - Introdução
smart_displayJavaScript Hooks - Combinando os gatilhos com métodos
smart_displayJavaScript Hooks - Callback done()
smart_displayJavaScript Hooks - Exibindo evoluções após a conclusão da transição do Pokémon
smart_displayAdicionando cards ao catálogo de Pokémons
smart_displayModificando o Pokémon exibido no palco
smart_displayOtimizando o método analisar Pokémon
smart_displayImplementando a lógica para exibição das evoluções do Pokémon
smart_displayExibindo os detalhes do Pokémon no palco
smart_displayAnimando o router-view (navegação entre componentes)
smart_displayFix - Corrigindo o erro do uso do roter-view dentro do transition
smart_displayApresentando dinamicamente os detalhes do Pokémon parte 1
smart_displayApresentando dinamicamente os detalhes do Pokémon parte 2
smart_displayAnimando a renderização inicial de elementos
smart_displayAjustando os componentes Sobre, Status e Habilidades
smart_displayRemovendo os detalhes quando não houver um Pokémon no palco
smart_displayAdicionando habilidades
smart_displayRemovendo habilidades
smart_displayAnimando grupos de elementos com transition-group parte 1
smart_displayAnimando grupos de elementos com transition-group parte 2
smart_displayAnimando grupos de elementos com transition-group parte 3
smart_displayOrdenando as habilidades por ordem alfabética
smart_displayOrdenando os cards de Pokémons por ID
smart_displayOrdenando os cards de Pokémons por Nome
smart_displayOrdenando os cards de Pokémons por Nome com localeCompare
smart_displayAnimando a ordenação
smart_displayFiltrando cards de Pokémons por nome

Gerenciamento de estado centralizado com Vuex

smart_displayIniciando o projeto Emergência Médica
smart_displayInstalando o Vuex e o Vue Router
smart_displayAdicionando o Bootstrap e Bootstrap Icons
smart_displayAdicionando componentes e navegação (Vue Router)
smart_displayIntrodução ao Vuex
smart_displayConfigurando o Vuex
smart_displayGerenciamento de estado centralizado com Vuex
smart_displaymapState - Mapeando o estado da Store como propriedades computadas parte 1
smart_displaymapState - Mapeando o estado da Store como propriedades computadas parte 2
smart_displaymapState - Mapeando o estado da Store como propriedades computadas parte 3
smart_displayCombinando o mapState com propriedades computadas do componente
smart_displayAdicionando enfermeiros, socorristas, médicos, carros, telefones e kits
smart_displayListando enfermeiros, socorristas e médicos parte 1
smart_displayListando enfermeiros, socorristas e médicos parte 2
smart_displayListando carros, telefones e kits de reanimação
smart_displayGetters - Computando atributos do estado centralizado da aplicação
smart_displayGetters - Filtrando socorristas por turno
smart_displayGetters - Encaminhando parâmetros
smart_displayGetters - Reutilizando getters em outros getters
smart_displayGetters - Mapeando getters no componente (mapGetters)
smart_displayMutations - Alterando o estado centralizado da aplicação (como não fazer)
smart_displayMutations - Alterando o estado centralizado da aplicação (como fazer)
smart_displayExtra - Analisando os logs das mutations no Vue Devtools
smart_displayMutations - Payload com notação de objeto e atribuição via desestruturação
smart_displayMutations - Mapeando mutations no componente (mapMutations) parte 1
smart_displayMutations - Mapeando mutations no componente (mapMutations) parte 2
smart_displayAdicionando um back-end fake com JSON Server
smart_displayMutations - Recuperando os dados do back-end e alterando o state
smart_displayActions - Efetivando (commit) mutations
smart_displayActions - Refactoring do fetch de profissionais e equipamentos
smart_displayActions - Dispatch com notação de objeto
smart_displayActions - Mapeando actions no componente (mapActions) parte 1
smart_displayActions - Mapeando actions no componente (mapActions) parte 2
smart_displayDefinindo a imagem da ambulância
smart_displayMontando equipes
smart_displayListando equipes montadas parte 1
smart_displayListando equipes montadas parte 2

Conclusão

smart_displayConsiderações finais

R$ 29,00

R$ 38,00-24%

Comprar este curso

Este curso inclui:

  • Video aulas: 367
  • Carga horária: 16h38
  • Certificado validado
  • Recursos adicionais

Instrutor(a):

Jorge Sant Ana

1 curso6 alunosOlá, meu nome é Jorge Santa Ana. Sou tecnólogo em Informática para Gestão de Negócios pela Fatec e possuo pós-graduação em Gestão de Projetos de TI pela Fundação Vanzolini.