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...
smart_display | [IMPORTANTE] - Orientações sobre o curso | |
smart_display | Introdução ao Vue.js | |
smart_display | Instalando as ferramentas de desenvolvimento local | |
smart_display | Iniciando o nosso primeiro front-end com Vue | |
smart_display | Primeiro App em Vue (instância de Vue e o double mustache) | |
smart_display | Iniciando projetos Vue com o JSFiddle e ou Codepen | |
smart_display | Explorando um pouco mais a propriedade data | |
smart_display | Methods - Adicionando os nossos primeiros métodos a instância Vue | |
smart_display | Methods - Recuperando atributos do data | |
smart_display | Methods - O contexto léxico das arrow functions e o conflito de nomes | |
smart_display | Diretiva V-Bind - Realizando o bind de atributos de tags HTML | |
smart_display | Diretiva V-Bind - Sintaxe sugar e a sobreposição / encadeamento de valores | |
smart_display | Utilizando expressões no data binding | |
smart_display | Diretiva V-On - Manipulando eventos | |
smart_display | Methods - Passando parâmetros para os métodos | |
smart_display | Diretiva V-On - Capturando os dados do evento ($event) | |
smart_display | Hands on - Praticando com data, methods, template string, v-bind e v-on | |
smart_display | Diretiva V-On - Implementando modificadores | |
smart_display | Selecionando elementos HTML e suas propriedades por ID | |
smart_display | Diretiva V-If - Renderização condicional de elementos HTML | |
smart_display | Diretiva V-Show - Exibição condicional de elementos HTML | |
smart_display | Diretiva V-HTML - Injetando elementos HTML | |
smart_display | Diretiva V-Text - Injetando textos | |
smart_display | Diretiva V-Once - Evitando que elementos HTML sejam renderizados novamente | |
smart_display | Diretiva V-For - Implementando laços de repetição parte 1 | |
smart_display | Diretiva V-For - Implementando laços de repetição parte 2 | |
smart_display | Renderização de listas com o atributo Key | |
smart_display | Diretiva V-For - Implementando laços de repetição parte 3 | |
smart_display | Diretiva V-For - Implementando laços de repetição parte 4 | |
smart_display | Trabalhando com a tag Template para renderização condicional e listas | |
smart_display | Trabalhando com propriedades computadas (computed) parte 1 | |
smart_display | Trabalhando com propriedades computadas (computed) parte 2 | |
smart_display | Diretiva V-Model - Sincronizando inputs com atributos (two-way-data binding) | |
smart_display | Diretiva V-Model - Praticando um pouco mais o two-way-data binding | |
smart_display | Trabalhando com propriedades observadoras (watch) |
smart_display | Iniciando o projeto | |
smart_display | Implementando a interface parte 1 | |
smart_display | Implementando a interface parte 2 | |
smart_display | Definindo as imagens por meio de propriedades computadas do Vue | |
smart_display | Selecionando o tipo de pão | |
smart_display | Selecionando a salada, os molhos e o hambúrguer | |
smart_display | Implementando a etapa 2 | |
smart_display | Implementando a etapa 3 | |
smart_display | Ajustando a chamada assíncrona de novo pedido |
smart_display | Utilizando objetos para definir estilos visuais por meio do atributo class | |
smart_display | Utilizando arrays para definir estilos visuais por meio do atributo class | |
smart_display | Utilizando objetos para definir estilos visuais por meio do atributo style | |
smart_display | Aplicando estilos com propriedades computadas | |
smart_display | Referenciando elementos HTML com $refs | |
smart_display | DOM e Virtual DOM | |
smart_display | DOM e Virtual DOM - Evitando comportamentos inesperados | |
smart_display | Carregando o template por meio do método $mount | |
smart_display | Carregando o template por meio da propriedade template |
smart_display | [IMPORTANTE] Antes do upgrade de versão | |
smart_display | Configurando e iniciando um projeto com VueJS 3 |
smart_display | Introduçã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_display | Instalando o Vue CLI | |
smart_display | Iniciando um projeto com o Vue CLI | |
smart_display | Iniciando um projeto customizado com Vue CLI | |
smart_display | Definindo a porta para servir a aplicação | |
smart_display | Vue UI - Criando projetos | |
smart_display | Vue UI - Gerenciando projetos | |
smart_display | Entendendo a estrutura de pastas e arquivos do projeto parte 1 | |
smart_display | Entendendo a estrutura de pastas e arquivos do projeto parte 2 | |
smart_display | Composição das versões e os caracteres til e circunflexo | |
smart_display | Reconstruindo as dependências do projeto | |
smart_display | [WINDOWS] - Instalando o Git | |
smart_display | [LINUX] - Instalando o Git | |
smart_display | [OSX] - Instalando o Git | |
smart_display | O que é o GIT, Github e Bitbucket | |
smart_display | Git - Configuração global e local | |
smart_display | Bitbucket - Criando uma conta de usuário | |
smart_display | Git e Bitbucket - Conectando o repositório local com o repositório remoto | |
smart_display | Git - Trabalhando com alterações (status, add, reset, commit e log) | |
smart_display | Git - Enviando atualizações do repositório local para o remoto (push) | |
smart_display | Git - Clonando um repositório remoto e instalando as dependências | |
smart_display | Heroku - Criando uma conta de usuário | |
smart_display | Heroku - 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_display | Instalando Express | |
smart_display | Criando um servidor web com Node e Express | |
smart_display | Servindo a aplicação Vue de produção por meio do Express | |
smart_display | Configurando um comando no package.json para iniciar o servidor web | |
smart_display | Git e Heroku - Conectando o repositório local com o repositório remoto | |
smart_display | Extra - Comentários sobre a arquitetura de versionamento | |
smart_display | Heroku - Realizando o deploy da aplicação | |
smart_display | Vue Devtools - Introdução e instalação |
smart_display | Plugins do Vue CLI | |
smart_display | Variáveis de ambiente | |
smart_display | Variáveis de ambiente e modos de build parte 1 | |
smart_display | Variáveis de ambiente e modos de build parte 2 | |
smart_display | ESLint parte 1 | |
smart_display | ESLint parte 2 | |
smart_display | Customizando o Webpack |
smart_display | Introdução a seção | |
smart_display | Iniciando um projeto Vue 3 e instalando o plugin Electron Builder | |
smart_display | Exportando uma versão desktop da aplicação web |
smart_display | Iniciando o projeto Vagas | |
smart_display | Single File Component ou Single File Template | |
smart_display | Criando os componentes Topo e Conteudo | |
smart_display | Definindo nomes para os componentes | |
smart_display | Seletores (tags) dos componentes e kebab case | |
smart_display | Adicionando o Bootstrap ao projeto e customizando o componente Topo | |
smart_display | Criando os componentes Home e PublicarVaga | |
smart_display | Estilo aplicado ao escopo do componente parte 1 (scoped) | |
smart_display | Estilo aplicado ao escopo do componente parte 2 (module) | |
smart_display | Importando componentes com o alias @ | |
smart_display | Ciclo de vida do componente (Lifecycle Hooks) - Introdução | |
smart_display | Ciclo de vida do componente (Lifecycle Hooks) - Criação e montagem | |
smart_display | Ciclo de vida do componente (Lifecycle Hooks) - Atualização e remoção | |
smart_display | Renderização dinâmica de componentes | |
smart_display | Ciclo de vida do componente (Lifecycle Hooks) - Ativação e desativação | |
smart_display | Implementando o componente Home | |
smart_display | Implementando o componente PesquisarVaga | |
smart_display | Implementando o componente Indicador | |
smart_display | Comunicação entre componentes (props) - Pai para o filho | |
smart_display | Criando um estilo visual computado | |
smart_display | Comunicação entre componentes (props) - Reatividade pai para o filho | |
smart_display | Criando o componente Vaga | |
smart_display | Listando vagas | |
smart_display | Nomeação de propriedades (props) | |
smart_display | Tipagem de props | |
smart_display | Validação de props (required e validator) | |
smart_display | Valores padrões de props (default) | |
smart_display | Enviando objeto via props com a diretiva v-bind | |
smart_display | Implementando o componente PublicarVaga | |
smart_display | Armazenando registro de vaga em LocalStorage | |
smart_display | Armazenando múltiplos registros de vagas em LocalStorage | |
smart_display | Exibindo vagas registradas em LocalStorage | |
smart_display | Criando propriedades computadas para exibição da modalidade e tipo | |
smart_display | Adicionando e exibindo a data de publicação | |
smart_display | Tratando a exibição das datas de publicação | |
smart_display | Comunicação entre componente filho e pai - Introdução | |
smart_display | Comunicação entre componente filho e pai - Trabalhando com o $emit e v-on/@ | |
smart_display | Comunicação entre componente filho e pai - Callbacks via $event | |
smart_display | Comunicação entre componente filho e pai - Callbacks via prop | |
smart_display | Implementando a navegação por meio do componente TopoPadrao e Conteudo | |
smart_display | Favoritando vagas parte 1 | |
smart_display | Favoritando vagas parte 2 | |
smart_display | Comunicação indireta entre componentes com $emitter | |
smart_display | Configurando e emitindo eventos com mitt | |
smart_display | Favoritando vagas parte 3 | |
smart_display | Limpando o formulário de cadastro de vagas após o registro | |
smart_display | Criando o componente Alerta | |
smart_display | Exibindo e ocultando o componente Alerta após o cadastro de vaga | |
smart_display | Passando conteúdo HTML para o componente por meio de Slots | |
smart_display | Múltiplos Slots (slots nomeados) | |
smart_display | Slot padrão | |
smart_display | Definindo valores padrões nos Slots | |
smart_display | Finalizando o cadastro de vagas com o feedback de sucesso | |
smart_display | Finalizando o cadastro de vagas com o feedback de erro | |
smart_display | Modificando o estilo visual do alerta | |
smart_display | Implementando o filtro de vagas | |
smart_display | Slots com escopo definido parte 1 | |
smart_display | Slots com escopo definido parte 2 | |
smart_display | Slots com escopo definido parte 3 (slot padrão) | |
smart_display | Slots com escopo definido parte 4 (múltiplos slots) |
smart_display | Iniciando o projeto Formulario | |
smart_display | Two-way data binding (v-model) | |
smart_display | Agrupando dados do formulário em um objeto | |
smart_display | V-model e a sobrescrita do atributo value de inputs HTML | |
smart_display | Modificadores embutidos do v-model (number, trim e lazy) | |
smart_display | Manipulando inputs do tipo checkbox parte 1 - Atributos true-value e false-value | |
smart_display | Manipulando inputs do tipo checkbox parte 2 - Múltiplas opções | |
smart_display | Manipulando inputs do tipo radio | |
smart_display | Instalando e configurando a lib maska | |
smart_display | Máscara de telefone | |
smart_display | Máscaras de cep, cpf, cnpj e cartão de crédito | |
smart_display | Máscaras de placas de veículos e rg | |
smart_display | Manipulando inputs do tipo date, datetime-local, month, week e time parte 1 | |
smart_display | Instalando e configurando a lib moment (abordagem local) | |
smart_display | Refactoring da configuração da lib moment (abordagem global) | |
smart_display | Manipulando inputs do tipo date, datetime-local, month, week e time parte 2 | |
smart_display | Manipulando inputs do tipo color | |
smart_display | Manipulando inputs do tipo range | |
smart_display | Manipulando inputs do tipo hidden | |
smart_display | Manipulando inputs do tipo file | |
smart_display | Fix - Correção do valor inicial do atributo cor | |
smart_display | Manipulando campos textarea | |
smart_display | Manipulando campos select parte 1 | |
smart_display | Manipulando campos select parte 2 | |
smart_display | Enviando o formulário (submit e button) | |
smart_display | Resetando o form (retornando os dados para o estado inicial) | |
smart_display | Criando um campo personalizado parte 1 | |
smart_display | Criando um campo personalizado parte 2 | |
smart_display | Criando um campo personalizado parte 3 | |
smart_display | Criando um campo personalizado parte 4 | |
smart_display | Criando um campo personalizado parte 5 |
smart_display | Iniciando o projeto Diretivas | |
smart_display | Criando uma diretiva personalizada | |
smart_display | Manipulando o elemento HTML por meio da diretiva personalizada | |
smart_display | Binding de valores da diretiva | |
smart_display | Binding de valores da diretiva com atributos da instância do componente | |
smart_display | Binding de argumento da diretiva | |
smart_display | Binding de modificadores da diretiva parte 1 | |
smart_display | Binding de modificadores da diretiva parte 2 | |
smart_display | Modificando a exibição com base no argumento | |
smart_display | Aplicando múltiplos modificadores em uma diretiva | |
smart_display | Importando diretivas para o registro global | |
smart_display | Registrando diretivas localmente | |
smart_display | Importando diretivas para o registro local |
smart_display | Iniciando o projeto Mixins | |
smart_display | Criando os componentes ListaFilmes, ListaPessoas e ListaVideogames | |
smart_display | Adicionando registros em ListaFilmes | |
smart_display | Reutilizando código com mixins | |
smart_display | Múltiplos mixins | |
smart_display | Lidando com conflitos de propriedades (data, methods, computed, watch, props) | |
smart_display | Lidando com o ciclo de vida |
smart_display | Iniciando o projeto Empresa 360 | |
smart_display | Instalando o Vue Router | |
smart_display | Configurando o Vue Router em um projeto Vue 3 | |
smart_display | Isolando as configurações de rotas em um script | |
smart_display | Navegação Hash vs History | |
smart_display | Router link - Navegando entre rotas | |
smart_display | Configurando o Bootstrap no projeto e adicionando o componente Site | |
smart_display | Implementando o componente Site | |
smart_display | Implementando o componente Login | |
smart_display | Navegação programática parte 1 (push e replace) | |
smart_display | Navegação programática parte 2 (forward, back e go) | |
smart_display | Implementando o componente Home | |
smart_display | Rotas alinhadas (rotas filhas) parte 1 | |
smart_display | Rotas alinhadas (rotas filhas) parte 2 | |
smart_display | Estilizando rota ativa parte 1 (router-link-active e router-link-exact-active) | |
smart_display | Estilizando rota ativa parte 2 (active-class e exact-active-class) | |
smart_display | Implementando o componente Dashboard | |
smart_display | Instalando o JSON Server | |
smart_display | Criando uma API com JSON Server (end-point de leads) | |
smart_display | Leads - Requisição HTTP para API fake | |
smart_display | Leads - Listando registros | |
smart_display | Parâmetros de rotas parte 1 - Enviando parâmetros | |
smart_display | Parâmetros de rotas parte 2 - Recebendo parâmetros via $route.params | |
smart_display | Lead - Exibindo dados | |
smart_display | ApiMixin para requisições HTTP | |
smart_display | Componente padrão em rotas alinhadas (rotas filhas) | |
smart_display | Nomeando rotas | |
smart_display | Parâmetros em rotas nomeadas | |
smart_display | Rotas nomeadas em navegações programáticas | |
smart_display | Servicos - Listando registros | |
smart_display | Servico - Apresentando detalhes do serviço | |
smart_display | Reagindo a alterações na url com watchers | |
smart_display | Fix - Corrigindo o get undefined | |
smart_display | Reagindo a alterações na url com beforeRouteUpdate | |
smart_display | Múltiplos Router Views parte 1 | |
smart_display | Múltiplos Router Views parte 2 | |
smart_display | Criando apelidos (alias) para rotas | |
smart_display | Redirecionamento de rotas | |
smart_display | Rota curinga ”pega tudo” | |
smart_display | Contratos - Listando registros | |
smart_display | JSON Server - Consultas com relacionamentos | |
smart_display | Query Params via router-link | |
smart_display | Tratando os parâmetros de consulta (query params) no hook created | |
smart_display | Contratos - Criando um formulário para pesquisa de registros | |
smart_display | Query Params via navegação programática parte 1 | |
smart_display | Query Params via navegação programática parte 2 | |
smart_display | Query Params via navegação programática parte 3 | |
smart_display | Otimizando o método getDadosApi | |
smart_display | Parâmetros via props parte 1 - Ativando a captura de parâmetros via props | |
smart_display | Parâmetros via props parte 2 - Props para múltiplos router views | |
smart_display | Parâmetros via props parte 3 - Sobrepondo parâmetros da rota | |
smart_display | Parâmetros via props parte 4 - Function mode | |
smart_display | Guardas de rota parte 1 - Introdução | |
smart_display | Guardas de rota parte 2 - Guarda global beforeEach | |
smart_display | Route Meta Fields - Campos personalizados | |
smart_display | Guardas de rota parte 3 - Guarda global afterEach | |
smart_display | Guardas de rota parte 4 - Guarda de rota beforeEnter | |
smart_display | Guardas de rota parte 5 - Guarda de componente beforeRouteEnter | |
smart_display | Guardas de rota parte 6 - Guarda de componente beforeRouteLeave | |
smart_display | Guardas de rota parte 7 - Guarda de componente beforeRouteUpdate | |
smart_display | Guardas de rota parte 8 - Guarda global beforeResolve | |
smart_display | Controle de scroll parte 1 | |
smart_display | Controle de scroll parte 2 - Implementando o método scrollBehavior | |
smart_display | Controle de scroll parte 3 - Capturando o fragmento Hash e posicionando o scroll | |
smart_display | Controle de scroll parte 4 - Reutilizando o savedPosition | |
smart_display | Lazy loading - Carregamento tardio de componentes | |
smart_display | Lazy loading - Pacotes de carregamento (webpackChunkName) |
smart_display | Iniciando o projeto Pokédex | |
smart_display | Ajustes iniciais do projeto | |
smart_display | Catálogo de Pokémons | |
smart_display | Palco | |
smart_display | Renderização e exibição condicional com v-if e v-show | |
smart_display | Adicionando o componente Transition | |
smart_display | Transição baseada em CSS - Introdução | |
smart_display | Transição baseada em CSS - Entrada | |
smart_display | Transição baseada em CSS - Saída | |
smart_display | Extra - Comparando o v-if e v-show | |
smart_display | Transição baseada em CSS - Criando uma transição slide | |
smart_display | Transição baseada em CSS - Múltiplos componentes Transition | |
smart_display | Transição baseada em CSS - Nomeando animações | |
smart_display | Organizando e otimizando o CSS | |
smart_display | Transição baseada em CSS - Criando uma transição de zoom | |
smart_display | Transição baseada em CSS - CSS animation parte 1 | |
smart_display | Transição baseada em CSS - CSS animation parte 2 | |
smart_display | Transição baseada em CSS - Combinando CSS transition e animation | |
smart_display | Transição baseada em CSS - Tempo de progressão predominante | |
smart_display | Transição baseada em CSS - Tempo de progressão manual | |
smart_display | Personalizando os nomes das classes CSS | |
smart_display | Adicionando e utilizando a biblioteca Animation.css | |
smart_display | JavaScript Hooks - Introdução | |
smart_display | JavaScript Hooks - Combinando os gatilhos com métodos | |
smart_display | JavaScript Hooks - Callback done() | |
smart_display | JavaScript Hooks - Exibindo evoluções após a conclusão da transição do Pokémon | |
smart_display | Adicionando cards ao catálogo de Pokémons | |
smart_display | Modificando o Pokémon exibido no palco | |
smart_display | Otimizando o método analisar Pokémon | |
smart_display | Implementando a lógica para exibição das evoluções do Pokémon | |
smart_display | Exibindo os detalhes do Pokémon no palco | |
smart_display | Animando o router-view (navegação entre componentes) | |
smart_display | Fix - Corrigindo o erro do uso do roter-view dentro do transition | |
smart_display | Apresentando dinamicamente os detalhes do Pokémon parte 1 | |
smart_display | Apresentando dinamicamente os detalhes do Pokémon parte 2 | |
smart_display | Animando a renderização inicial de elementos | |
smart_display | Ajustando os componentes Sobre, Status e Habilidades | |
smart_display | Removendo os detalhes quando não houver um Pokémon no palco | |
smart_display | Adicionando habilidades | |
smart_display | Removendo habilidades | |
smart_display | Animando grupos de elementos com transition-group parte 1 | |
smart_display | Animando grupos de elementos com transition-group parte 2 | |
smart_display | Animando grupos de elementos com transition-group parte 3 | |
smart_display | Ordenando as habilidades por ordem alfabética | |
smart_display | Ordenando os cards de Pokémons por ID | |
smart_display | Ordenando os cards de Pokémons por Nome | |
smart_display | Ordenando os cards de Pokémons por Nome com localeCompare | |
smart_display | Animando a ordenação | |
smart_display | Filtrando cards de Pokémons por nome |
smart_display | Iniciando o projeto Emergência Médica | |
smart_display | Instalando o Vuex e o Vue Router | |
smart_display | Adicionando o Bootstrap e Bootstrap Icons | |
smart_display | Adicionando componentes e navegação (Vue Router) | |
smart_display | Introdução ao Vuex | |
smart_display | Configurando o Vuex | |
smart_display | Gerenciamento de estado centralizado com Vuex | |
smart_display | mapState - Mapeando o estado da Store como propriedades computadas parte 1 | |
smart_display | mapState - Mapeando o estado da Store como propriedades computadas parte 2 | |
smart_display | mapState - Mapeando o estado da Store como propriedades computadas parte 3 | |
smart_display | Combinando o mapState com propriedades computadas do componente | |
smart_display | Adicionando enfermeiros, socorristas, médicos, carros, telefones e kits | |
smart_display | Listando enfermeiros, socorristas e médicos parte 1 | |
smart_display | Listando enfermeiros, socorristas e médicos parte 2 | |
smart_display | Listando carros, telefones e kits de reanimação | |
smart_display | Getters - Computando atributos do estado centralizado da aplicação | |
smart_display | Getters - Filtrando socorristas por turno | |
smart_display | Getters - Encaminhando parâmetros | |
smart_display | Getters - Reutilizando getters em outros getters | |
smart_display | Getters - Mapeando getters no componente (mapGetters) | |
smart_display | Mutations - Alterando o estado centralizado da aplicação (como não fazer) | |
smart_display | Mutations - Alterando o estado centralizado da aplicação (como fazer) | |
smart_display | Extra - Analisando os logs das mutations no Vue Devtools | |
smart_display | Mutations - Payload com notação de objeto e atribuição via desestruturação | |
smart_display | Mutations - Mapeando mutations no componente (mapMutations) parte 1 | |
smart_display | Mutations - Mapeando mutations no componente (mapMutations) parte 2 | |
smart_display | Adicionando um back-end fake com JSON Server | |
smart_display | Mutations - Recuperando os dados do back-end e alterando o state | |
smart_display | Actions - Efetivando (commit) mutations | |
smart_display | Actions - Refactoring do fetch de profissionais e equipamentos | |
smart_display | Actions - Dispatch com notação de objeto | |
smart_display | Actions - Mapeando actions no componente (mapActions) parte 1 | |
smart_display | Actions - Mapeando actions no componente (mapActions) parte 2 | |
smart_display | Definindo a imagem da ambulância | |
smart_display | Montando equipes | |
smart_display | Listando equipes montadas parte 1 | |
smart_display | Listando equipes montadas parte 2 |
smart_display | Considerações finais |
Instrutor(a):
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.