Desenvolvimento Web Avançado com Vue.JS e Vuex
Produzido por Jorge Sant Ana
Desenvolvimento Web Avançado com Vue.JS e Vuex
- 367 Video Aulas (41 horas)
- Certificado Validado
- Recursos Adicionais
- Acesso Vitalício
24% de desconto R$ 38,00
R$ 29,00
O que você aprenderá
- 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
Requisitos
Conhecimento básico em HTML, CSS, Bootstrap e JavaScript
Conteúdo
- [IMPORTANTE] - Orientações sobre o curso1 minutos
- Introdução ao Vue.js3 minutos
- Instalando as ferramentas de desenvolvimento local4 minutos
- Iniciando o nosso primeiro front-end com Vue12 minutos
- Primeiro App em Vue (instância de Vue e o double mustache)11 minutos
- Iniciando projetos Vue com o JSFiddle e ou Codepen4 minutos
- Explorando um pouco mais a propriedade data8 minutos
- Methods - Adicionando os nossos primeiros métodos a instância Vue9 minutos
- Methods - Recuperando atributos do data3 minutos
- Methods - O contexto léxico das arrow functions e o conflito de nomes6 minutos
- Diretiva V-Bind - Realizando o bind de atributos de tags HTML9 minutos
- Diretiva V-Bind - Sintaxe sugar e a sobreposição / encadeamento de valores6 minutos
- Utilizando expressões no data binding8 minutos
- Diretiva V-On - Manipulando eventos5 minutos
- Methods - Passando parâmetros para os métodos6 minutos
- Diretiva V-On - Capturando os dados do evento ($event)3 minutos
- Hands on - Praticando com data, methods, template string, v-bind e v-on19 minutos
- Diretiva V-On - Implementando modificadores18 minutos
- Selecionando elementos HTML e suas propriedades por ID7 minutos
- Diretiva V-If - Renderização condicional de elementos HTML18 minutos
- Diretiva V-Show - Exibição condicional de elementos HTML6 minutos
- Diretiva V-HTML - Injetando elementos HTML6 minutos
- Diretiva V-Text - Injetando textos3 minutos
- Diretiva V-Once - Evitando que elementos HTML sejam renderizados novamente5 minutos
- Diretiva V-For - Implementando laços de repetição parte 16 minutos
- Diretiva V-For - Implementando laços de repetição parte 28 minutos
- Renderização de listas com o atributo Key8 minutos
- Diretiva V-For - Implementando laços de repetição parte 31 minutos
- Diretiva V-For - Implementando laços de repetição parte 410 minutos
- Trabalhando com a tag Template para renderização condicional e listas5 minutos
- Trabalhando com propriedades computadas (computed) parte 111 minutos
- Trabalhando com propriedades computadas (computed) parte 212 minutos
- Diretiva V-Model - Sincronizando inputs com atributos (two-way-data binding)7 minutos
- Diretiva V-Model - Praticando um pouco mais o two-way-data binding10 minutos
- Trabalhando com propriedades observadoras (watch)14 minutos
- Iniciando o projeto5 minutos
- Implementando a interface parte 111 minutos
- Implementando a interface parte 22 minutos
- Definindo as imagens por meio de propriedades computadas do Vue5 minutos
- Selecionando o tipo de pão5 minutos
- Selecionando a salada, os molhos e o hambúrguer10 minutos
- Implementando a etapa 211 minutos
- Implementando a etapa 310 minutos
- Ajustando a chamada assíncrona de novo pedido7 minutos
- Utilizando objetos para definir estilos visuais por meio do atributo class10 minutos
- Utilizando arrays para definir estilos visuais por meio do atributo class7 minutos
- Utilizando objetos para definir estilos visuais por meio do atributo style10 minutos
- Aplicando estilos com propriedades computadas9 minutos
- Referenciando elementos HTML com $refs16 minutos
- DOM e Virtual DOM5 minutos
- DOM e Virtual DOM - Evitando comportamentos inesperados11 minutos
- Carregando o template por meio do método $mount3 minutos
- Carregando o template por meio da propriedade template3 minutos
- [IMPORTANTE] Antes do upgrade de versão1 minutos
- Configurando e iniciando um projeto com VueJS 310 minutos
- Introdução a seção2 minutos
- [WINDOWS] - Instalando o Node e NPM6 minutos
- [LINUX] - Instalando o Node e NPM3 minutos
- [OSX] - Instalando o Node e NPM4 minutos
- Instalando o Vue CLI2 minutos
- Iniciando um projeto com o Vue CLI7 minutos
- Iniciando um projeto customizado com Vue CLI9 minutos
- Definindo a porta para servir a aplicação1 minutos
- Vue UI - Criando projetos7 minutos
- Vue UI - Gerenciando projetos12 minutos
- Entendendo a estrutura de pastas e arquivos do projeto parte 115 minutos
- Entendendo a estrutura de pastas e arquivos do projeto parte 27 minutos
- Composição das versões e os caracteres til e circunflexo10 minutos
- Reconstruindo as dependências do projeto3 minutos
- [WINDOWS] - Instalando o Git5 minutos
- [LINUX] - Instalando o Git2 minutos
- [OSX] - Instalando o Git1 minutos
- O que é o GIT, Github e Bitbucket4 minutos
- Git - Configuração global e local9 minutos
- Bitbucket - Criando uma conta de usuário5 minutos
- Git e Bitbucket - Conectando o repositório local com o repositório remoto11 minutos
- Git - Trabalhando com alterações (status, add, reset, commit e log)14 minutos
- Git - Enviando atualizações do repositório local para o remoto (push)9 minutos
- Git - Clonando um repositório remoto e instalando as dependências6 minutos
- Heroku - Criando uma conta de usuário4 minutos
- Heroku - Criando um app3 minutos
- [WINDOWS] - Instalando o Heroku CLI2 minutos
- [LINUX] - Instalando o Heroku CLI2 minutos
- [OSX] - Instalando o Heroku CLI2 minutos
- Instalando Express2 minutos
- Criando um servidor web com Node e Express6 minutos
- Servindo a aplicação Vue de produção por meio do Express4 minutos
- Configurando um comando no package.json para iniciar o servidor web2 minutos
- Git e Heroku - Conectando o repositório local com o repositório remoto6 minutos
- Extra - Comentários sobre a arquitetura de versionamento3 minutos
- Heroku - Realizando o deploy da aplicação8 minutos
- Vue Devtools - Introdução e instalação4 minutos
- Plugins do Vue CLI8 minutos
- Variáveis de ambiente6 minutos
- Variáveis de ambiente e modos de build parte 115 minutos
- Variáveis de ambiente e modos de build parte 27 minutos
- ESLint parte 118 minutos
- ESLint parte 210 minutos
- Customizando o Webpack5 minutos
- Introdução a seção1 minutos
- Iniciando um projeto Vue 3 e instalando o plugin Electron Builder2 minutos
- Exportando uma versão desktop da aplicação web4 minutos
- Iniciando o projeto Vagas2 minutos
- Single File Component ou Single File Template8 minutos
- Criando os componentes Topo e Conteudo7 minutos
- Definindo nomes para os componentes6 minutos
- Seletores (tags) dos componentes e kebab case8 minutos
- Adicionando o Bootstrap ao projeto e customizando o componente Topo5 minutos
- Criando os componentes Home e PublicarVaga4 minutos
- Estilo aplicado ao escopo do componente parte 1 (scoped)9 minutos
- Estilo aplicado ao escopo do componente parte 2 (module)15 minutos
- Importando componentes com o alias @4 minutos
- Ciclo de vida do componente (Lifecycle Hooks) - Introdução6 minutos
- Ciclo de vida do componente (Lifecycle Hooks) - Criação e montagem10 minutos
- Ciclo de vida do componente (Lifecycle Hooks) - Atualização e remoção7 minutos
- Renderização dinâmica de componentes6 minutos
- Ciclo de vida do componente (Lifecycle Hooks) - Ativação e desativação8 minutos
- Implementando o componente Home7 minutos
- Implementando o componente PesquisarVaga5 minutos
- Implementando o componente Indicador4 minutos
- Comunicação entre componentes (props) - Pai para o filho9 minutos
- Criando um estilo visual computado6 minutos
- Comunicação entre componentes (props) - Reatividade pai para o filho7 minutos
- Criando o componente Vaga6 minutos
- Listando vagas8 minutos
- Nomeação de propriedades (props)4 minutos
- Tipagem de props6 minutos
- Validação de props (required e validator)10 minutos
- Valores padrões de props (default)4 minutos
- Enviando objeto via props com a diretiva v-bind4 minutos
- Implementando o componente PublicarVaga6 minutos
- Armazenando registro de vaga em LocalStorage11 minutos
- Armazenando múltiplos registros de vagas em LocalStorage8 minutos
- Exibindo vagas registradas em LocalStorage7 minutos
- Criando propriedades computadas para exibição da modalidade e tipo5 minutos
- Adicionando e exibindo a data de publicação5 minutos
- Tratando a exibição das datas de publicação7 minutos
- Comunicação entre componente filho e pai - Introdução1 minutos
- Comunicação entre componente filho e pai - Trabalhando com o $emit e v-on/@9 minutos
- Comunicação entre componente filho e pai - Callbacks via $event4 minutos
- Comunicação entre componente filho e pai - Callbacks via prop5 minutos
- Implementando a navegação por meio do componente TopoPadrao e Conteudo13 minutos
- Favoritando vagas parte 19 minutos
- Favoritando vagas parte 25 minutos
- Comunicação indireta entre componentes com $emitter7 minutos
- Configurando e emitindo eventos com mitt11 minutos
- Favoritando vagas parte 314 minutos
- Limpando o formulário de cadastro de vagas após o registro3 minutos
- Criando o componente Alerta4 minutos
- Exibindo e ocultando o componente Alerta após o cadastro de vaga7 minutos
- Passando conteúdo HTML para o componente por meio de Slots3 minutos
- Múltiplos Slots (slots nomeados)5 minutos
- Slot padrão5 minutos
- Definindo valores padrões nos Slots4 minutos
- Finalizando o cadastro de vagas com o feedback de sucesso6 minutos
- Finalizando o cadastro de vagas com o feedback de erro5 minutos
- Modificando o estilo visual do alerta9 minutos
- Implementando o filtro de vagas17 minutos
- Slots com escopo definido parte 19 minutos
- Slots com escopo definido parte 23 minutos
- Slots com escopo definido parte 3 (slot padrão)15 minutos
- Slots com escopo definido parte 4 (múltiplos slots)9 minutos
- Iniciando o projeto Formulario6 minutos
- Two-way data binding (v-model)4 minutos
- Agrupando dados do formulário em um objeto8 minutos
- V-model e a sobrescrita do atributo value de inputs HTML2 minutos
- Modificadores embutidos do v-model (number, trim e lazy)8 minutos
- Manipulando inputs do tipo checkbox parte 1 - Atributos true-value e false-value5 minutos
- Manipulando inputs do tipo checkbox parte 2 - Múltiplas opções5 minutos
- Manipulando inputs do tipo radio4 minutos
- Instalando e configurando a lib maska5 minutos
- Máscara de telefone6 minutos
- Máscaras de cep, cpf, cnpj e cartão de crédito6 minutos
- Máscaras de placas de veículos e rg8 minutos
- Manipulando inputs do tipo date, datetime-local, month, week e time parte 13 minutos
- Instalando e configurando a lib moment (abordagem local)9 minutos
- Refactoring da configuração da lib moment (abordagem global)6 minutos
- Manipulando inputs do tipo date, datetime-local, month, week e time parte 29 minutos
- Manipulando inputs do tipo color3 minutos
- Manipulando inputs do tipo range3 minutos
- Manipulando inputs do tipo hidden2 minutos
- Manipulando inputs do tipo file9 minutos
- Fix - Correção do valor inicial do atributo cor2 minutos
- Manipulando campos textarea5 minutos
- Manipulando campos select parte 14 minutos
- Manipulando campos select parte 27 minutos
- Enviando o formulário (submit e button)11 minutos
- Resetando o form (retornando os dados para o estado inicial)10 minutos
- Criando um campo personalizado parte 13 minutos
- Criando um campo personalizado parte 212 minutos
- Criando um campo personalizado parte 312 minutos
- Criando um campo personalizado parte 45 minutos
- Criando um campo personalizado parte 54 minutos
- Iniciando o projeto Diretivas2 minutos
- Criando uma diretiva personalizada7 minutos
- Manipulando o elemento HTML por meio da diretiva personalizada9 minutos
- Binding de valores da diretiva12 minutos
- Binding de valores da diretiva com atributos da instância do componente1 minutos
- Binding de argumento da diretiva9 minutos
- Binding de modificadores da diretiva parte 19 minutos
- Binding de modificadores da diretiva parte 215 minutos
- Modificando a exibição com base no argumento13 minutos
- Aplicando múltiplos modificadores em uma diretiva5 minutos
- Importando diretivas para o registro global5 minutos
- Registrando diretivas localmente8 minutos
- Importando diretivas para o registro local3 minutos
- Iniciando o projeto Mixins2 minutos
- Criando os componentes ListaFilmes, ListaPessoas e ListaVideogames4 minutos
- Adicionando registros em ListaFilmes6 minutos
- Reutilizando código com mixins13 minutos
- Múltiplos mixins6 minutos
- Lidando com conflitos de propriedades (data, methods, computed, watch, props)5 minutos
- Lidando com o ciclo de vida6 minutos
- Iniciando o projeto Empresa 3603 minutos
- Instalando o Vue Router3 minutos
- Configurando o Vue Router em um projeto Vue 314 minutos
- Isolando as configurações de rotas em um script3 minutos
- Navegação Hash vs History11 minutos
- Router link - Navegando entre rotas8 minutos
- Configurando o Bootstrap no projeto e adicionando o componente Site6 minutos
- Implementando o componente Site3 minutos
- Implementando o componente Login2 minutos
- Navegação programática parte 1 (push e replace)9 minutos
- Navegação programática parte 2 (forward, back e go)7 minutos
- Implementando o componente Home1 minutos
- Rotas alinhadas (rotas filhas) parte 111 minutos
- Rotas alinhadas (rotas filhas) parte 28 minutos
- Estilizando rota ativa parte 1 (router-link-active e router-link-exact-active)12 minutos
- Estilizando rota ativa parte 2 (active-class e exact-active-class)8 minutos
- Implementando o componente Dashboard5 minutos
- Instalando o JSON Server4 minutos
- Criando uma API com JSON Server (end-point de leads)9 minutos
- Leads - Requisição HTTP para API fake6 minutos
- Leads - Listando registros4 minutos
- Parâmetros de rotas parte 1 - Enviando parâmetros5 minutos
- Parâmetros de rotas parte 2 - Recebendo parâmetros via $route.params4 minutos
- Lead - Exibindo dados8 minutos
- ApiMixin para requisições HTTP7 minutos
- Componente padrão em rotas alinhadas (rotas filhas)5 minutos
- Nomeando rotas5 minutos
- Parâmetros em rotas nomeadas6 minutos
- Rotas nomeadas em navegações programáticas4 minutos
- Servicos - Listando registros6 minutos
- Servico - Apresentando detalhes do serviço10 minutos
- Reagindo a alterações na url com watchers11 minutos
- Fix - Corrigindo o get undefined1 minutos
- Reagindo a alterações na url com beforeRouteUpdate6 minutos
- Múltiplos Router Views parte 17 minutos
- Múltiplos Router Views parte 26 minutos
- Criando apelidos (alias) para rotas6 minutos
- Redirecionamento de rotas10 minutos
- Rota curinga ”pega tudo”7 minutos
- Contratos - Listando registros4 minutos
- JSON Server - Consultas com relacionamentos9 minutos
- Query Params via router-link25 minutos
- Tratando os parâmetros de consulta (query params) no hook created4 minutos
- Contratos - Criando um formulário para pesquisa de registros2 minutos
- Query Params via navegação programática parte 14 minutos
- Query Params via navegação programática parte 26 minutos
- Query Params via navegação programática parte 36 minutos
- Otimizando o método getDadosApi8 minutos
- Parâmetros via props parte 1 - Ativando a captura de parâmetros via props8 minutos
- Parâmetros via props parte 2 - Props para múltiplos router views13 minutos
- Parâmetros via props parte 3 - Sobrepondo parâmetros da rota4 minutos
- Parâmetros via props parte 4 - Function mode9 minutos
- Guardas de rota parte 1 - Introdução1 minutos
- Guardas de rota parte 2 - Guarda global beforeEach4 minutos
- Route Meta Fields - Campos personalizados6 minutos
- Guardas de rota parte 3 - Guarda global afterEach2 minutos
- Guardas de rota parte 4 - Guarda de rota beforeEnter5 minutos
- Guardas de rota parte 5 - Guarda de componente beforeRouteEnter6 minutos
- Guardas de rota parte 6 - Guarda de componente beforeRouteLeave9 minutos
- Guardas de rota parte 7 - Guarda de componente beforeRouteUpdate4 minutos
- Guardas de rota parte 8 - Guarda global beforeResolve3 minutos
- Controle de scroll parte 15 minutos
- Controle de scroll parte 2 - Implementando o método scrollBehavior4 minutos
- Controle de scroll parte 3 - Capturando o fragmento Hash e posicionando o scroll10 minutos
- Controle de scroll parte 4 - Reutilizando o savedPosition4 minutos
- Lazy loading - Carregamento tardio de componentes12 minutos
- Lazy loading - Pacotes de carregamento (webpackChunkName)6 minutos
- Iniciando o projeto Pokédex5 minutos
- Ajustes iniciais do projeto5 minutos
- Catálogo de Pokémons4 minutos
- Palco2 minutos
- Renderização e exibição condicional com v-if e v-show4 minutos
- Adicionando o componente Transition3 minutos
- Transição baseada em CSS - Introdução2 minutos
- Transição baseada em CSS - Entrada4 minutos
- Transição baseada em CSS - Saída3 minutos
- Extra - Comparando o v-if e v-show1 minutos
- Transição baseada em CSS - Criando uma transição slide6 minutos
- Transição baseada em CSS - Múltiplos componentes Transition3 minutos
- Transição baseada em CSS - Nomeando animações5 minutos
- Organizando e otimizando o CSS6 minutos
- Transição baseada em CSS - Criando uma transição de zoom3 minutos
- Transição baseada em CSS - CSS animation parte 19 minutos
- Transição baseada em CSS - CSS animation parte 26 minutos
- Transição baseada em CSS - Combinando CSS transition e animation6 minutos
- Transição baseada em CSS - Tempo de progressão predominante5 minutos
- Transição baseada em CSS - Tempo de progressão manual4 minutos
- Personalizando os nomes das classes CSS9 minutos
- Adicionando e utilizando a biblioteca Animation.css4 minutos
- JavaScript Hooks - Introdução3 minutos
- JavaScript Hooks - Combinando os gatilhos com métodos10 minutos
- JavaScript Hooks - Callback done()4 minutos
- JavaScript Hooks - Exibindo evoluções após a conclusão da transição do Pokémon5 minutos
- Adicionando cards ao catálogo de Pokémons6 minutos
- Modificando o Pokémon exibido no palco3 minutos
- Otimizando o método analisar Pokémon4 minutos
- Implementando a lógica para exibição das evoluções do Pokémon9 minutos
- Exibindo os detalhes do Pokémon no palco7 minutos
- Animando o router-view (navegação entre componentes)3 minutos
- Fix - Corrigindo o erro do uso do roter-view dentro do transition3 minutos
- Apresentando dinamicamente os detalhes do Pokémon parte 16 minutos
- Apresentando dinamicamente os detalhes do Pokémon parte 215 minutos
- Animando a renderização inicial de elementos5 minutos
- Ajustando os componentes Sobre, Status e Habilidades3 minutos
- Removendo os detalhes quando não houver um Pokémon no palco7 minutos
- Adicionando habilidades11 minutos
- Removendo habilidades5 minutos
- Animando grupos de elementos com transition-group parte 17 minutos
- Animando grupos de elementos com transition-group parte 26 minutos
- Animando grupos de elementos com transition-group parte 37 minutos
- Ordenando as habilidades por ordem alfabética3 minutos
- Ordenando os cards de Pokémons por ID16 minutos
- Ordenando os cards de Pokémons por Nome5 minutos
- Ordenando os cards de Pokémons por Nome com localeCompare9 minutos
- Animando a ordenação5 minutos
- Filtrando cards de Pokémons por nome11 minutos
- Iniciando o projeto Emergência Médica4 minutos
- Instalando o Vuex e o Vue Router3 minutos
- Adicionando o Bootstrap e Bootstrap Icons1 minutos
- Adicionando componentes e navegação (Vue Router)5 minutos
- Introdução ao Vuex6 minutos
- Configurando o Vuex3 minutos
- Gerenciamento de estado centralizado com Vuex6 minutos
- mapState - Mapeando o estado da Store como propriedades computadas parte 18 minutos
- mapState - Mapeando o estado da Store como propriedades computadas parte 27 minutos
- mapState - Mapeando o estado da Store como propriedades computadas parte 36 minutos
- Combinando o mapState com propriedades computadas do componente7 minutos
- Adicionando enfermeiros, socorristas, médicos, carros, telefones e kits1 minutos
- Listando enfermeiros, socorristas e médicos parte 111 minutos
- Listando enfermeiros, socorristas e médicos parte 27 minutos
- Listando carros, telefones e kits de reanimação9 minutos
- Getters - Computando atributos do estado centralizado da aplicação7 minutos
- Getters - Filtrando socorristas por turno3 minutos
- Getters - Encaminhando parâmetros9 minutos
- Getters - Reutilizando getters em outros getters10 minutos
- Getters - Mapeando getters no componente (mapGetters)8 minutos
- Mutations - Alterando o estado centralizado da aplicação (como não fazer)14 minutos
- Mutations - Alterando o estado centralizado da aplicação (como fazer)15 minutos
- Extra - Analisando os logs das mutations no Vue Devtools6 minutos
- Mutations - Payload com notação de objeto e atribuição via desestruturação9 minutos
- Mutations - Mapeando mutations no componente (mapMutations) parte 19 minutos
- Mutations - Mapeando mutations no componente (mapMutations) parte 27 minutos
- Adicionando um back-end fake com JSON Server3 minutos
- Mutations - Recuperando os dados do back-end e alterando o state22 minutos
- Actions - Efetivando (commit) mutations18 minutos
- Actions - Refactoring do fetch de profissionais e equipamentos8 minutos
- Actions - Dispatch com notação de objeto5 minutos
- Actions - Mapeando actions no componente (mapActions) parte 19 minutos
- Actions - Mapeando actions no componente (mapActions) parte 27 minutos
- Definindo a imagem da ambulância6 minutos
- Montando equipes11 minutos
- Listando equipes montadas parte 16 minutos
- Listando equipes montadas parte 27 minutos
- Considerações finais1 minutos
Jorge Sant Ana
Produtor deste 05/07/20221 cursos
Olá, 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.