Curso Vue JS 2 - O Guia Completo (incl. Vue Router & Vuex)
VueJS é um framework Javascript fantástico p construir aplicações Frontend! Vue.js mistura o melhor do Angular + React!
Confira algumas coisas que você aprenderá durante o curso.
Crie aplicativos incríveis com VueJS - de pequenos e simples até aplicativos que atendem grandes corporações
Aproveite o Vue JS em aplicativos multi páginas (MPAs) ou de página única (SPAs)
Entenda a teoria por trás do VueJS e use-a em projetos reais
Introdução do Curso
Acessando a documentação do Vue 2
Vamos Criar Nossa Primeira APP em VueJS
Extendendo Nossa Aplicação VueJS
Executando o Código Localmente
Mensagem do Maximilian Schwarzmüller
Visão Geral do Curso
Tire Proveito de Todos os Recursos do Curso!
Atalhos no Visual Studio Code
Recursos do Módulo & Links Úteis
Boas Práticas do Suporte
Aviso importante aos usuários de Windows
Usando o terminal
Terminais
Importação do Vue
Introdução do Módulo
Entendendo VueJS Templates
Sintaxe de Template e Instância VueJS Trabalhando Juntos
Acessando Dados na Instância VueJS
Binding de Atributos
Entendendo e Usando Diretivas
Evitando Re-Renderização com v-once
Como Imprimir HTML Puro
Hora de Praticar - Template
Hora de Praticar - Template (Resposta)
Escutando Eventos
Obtendo Dados do Evento
Passando nosso próprios Argumentos com Eventos
Modificadores de Eventos
Eventos de Teclado
Hora de Praticar - Eventos
Hora de Praticar - Eventos (Resposta)
Código JavaScript no Template
Usando Two-Way-Binding
Propriedades Computadas
Monitorando as Mudanças
Sintaxe Reduzida (Shorthands)
Hora de Praticar - Propriedades Reativas
Hora de Praticar - Propriedades Reativas (Resposta)
Estilo Dinâmico e Classe CSS #01
Estilo Dinâmico e Classe CSS #02
Estilo Dinâmico e Classe CSS #03
Estilo Dinâmico Sem Classes CSS
Hora de Praticar: Estilo
Hora de Praticar: Estilo (Resposta)
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Renderização Condicional com v-if/v-else
Seleção Múltipla com v-else-if
Usando v-if com Template
Esconda o Elemento com v-show
Renderizando Lista com v-for
Acessando o Índice Atual
Usando v-for com Template
Iterando em Objetos
Iterando em uma Lista de Números
Identificando os Elementos no v-for
Hora de Praticar: Condicionais & Listas
Hora de Praticar: Condicionais & Listas (Resposta)
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução & Desafio
Estrutura do Projeto (HTML, CSS & JS)
Implementando o Painel das Pontuações
Mostrando o Resultado
Os Botões de Controle do Jogo
Iniciar Jogo & Desistir do Jogo
Implementando Atacar
Implementando Curar
Adicionando o Registro de Log #01
Adicionando o Registro de Log #02
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Noções básicas sobre a Instância Vue
Usando Múltiplas Instâncias Vue
Acessando a Instância Vue Externamente
Como o VueJS Gerencia os Dados e Métodos
Meu Vue Framework
Uma Análise Mais Detalhada de $el e $data
Colocando $refs e Usando nos Templates
Onde Aprender Mais sobre a API do Vue
Montando um Template
Usando Componentes
Limitações dos Templates
Como o VueJS Atualiza o DOM
O Ciclo de Vida da Instância Vue #01
O Ciclo de Vida da Instância Vue #02
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Por que Precisamos de um Servidor Web?
O que "Fluxo de Desenvolvimento" Significa?
Usando o Vue CLI para Criar Projetos
Instalando o Vue CLI e Criando um Novo Projeto
Uma Visão Geral sobre a Estrutura de Pastas
Entendendo os Arquivos ".vue"
Como Construir sua APP para Produção
Criando um Projeto e Salvando Template
Adicionando Plugins ao Projeto
Conclusão do Módulo
Mais sobre Arquivos ".vue" e o CLI
Depurando Projetos VueJS
Recursos do Módulo & Links Úteis
Introdução do Módulo
Revisão Sobre Componentes
Registrar Componentes (Global e Local)
Criar Projeto Usando Vue CLI
Criar um Componente
Usando Componentes
Usando CSS com Escopo de Componente
Hora de Praticar: Organizar Projeto em Componentes
Hora de Praticar: Organizar Projeto em Componentes (Resposta)
Organizando os Componentes em Pastas
Regras de Nomes de Componentes
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Comunicação Entre Componentes
Comunicação Direta com Props #01
Comunicação Direta com Props #02
Nome das Propriedades são Case-Sensitive
Usando Props no Componente Filho
Validando Props #01
Validando Props #02
Comunicação Indireta com Eventos Personalizados
Comunicação Indireta com Callback
Problema da Comunicação entre Componentes Irmãos
Comunicação entre Componentes Irmãos
Usando Event Bus para Comunicação entre Componentes Irmãos #01
Usando Event Bus para Comunicação entre Componentes Irmãos #02
Adicionando Métodos no Event Bus
Hora de Praticar: Comunicação entre Componentes
Hora de Praticar: Comunicação entre Componentes (Resposta)
Props por Valor vs Props por Referência
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Configurando Projeto do Módulo
Como Passar Conteúdo no Corpo do Componente?
Passando Conteúdo com Slots
Como o Conteúdo do Slot é Estilizado
Usando Múltiplos Slots (Slots Nomeados)
Usando Slot Padrão
Resumo sobre Slots
Alternando entre Múltiplos Componentes com Componentes Dinâmicos
Entendendo o Comportamento do Componente Dinâmico
Mantendo o Componente Dinâmico Vivo
Métodos de Ciclo de Vida de um Componente Dinâmico
Hora de Praticar - Slots e Componentes Dinâmicos
Hora de Praticar - Slots e Componentes Dinâmicos (Resposta)
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Configurar Projeto
Componente Lista de Tarefas #01
Componente Tarefa #01
Componente Lista de Tarefas #02
Componente Nova Tarefa #01
Componente Nova Tarefa #02
Componente Tarefa #02
Componente Tarefa #03
Componente Progresso
Usando Local Storage
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Configurando Projeto do Módulo
Ligação básica em Formulário usando
Agrupando Dados e Pré-populando Inputs
Modificar Entrada de Usuário com Modificadores de Input
Usando
Usando Checkboxes e Salvando os Dados em um Array
Usando Botões Radio
Manipulando Combobox com
O que o v-model faz e Como criar um Input Personalizado
Submetendo Formulário
Hora de Praticar - Formulários
Hora de Praticar - Formulários (Resposta)
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Entendendo Diretivas
Como a Diretiva Funciona - Funções Gatilho (Hooks)
Criando uma Diretiva Simples
Passando Valor para Diretiva Personalizada
Passando Argumento para Diretiva Personalizada
Modificando Diretivas Personalizadas com Modificadores
Resumo sobre Diretivas Personalizadas
Registrando Diretivas Localmente
Usando Múltiplos Modificadores
Passando Valores mais Complexos para as Diretivas
Hora de Praticar - Diretivas
Hora de Praticar - Diretivas (Resposta)
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Criando um Filtro Local
Filtro Global e Como Encadear Múltiplos Filtros
Filtro & v-bind
Duplicando Código para Usar os Mixins
Criando e Usando Mixins
Criando um Mixin Global (Caso Especial!)
Hora de Praticar - Filtros & Mixins
Hora de Praticar - Filtros & Mixins (Resposta)
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Entendendo as Transições
Preparando o Código para Usar Transições
Configurando Transição
Definindo as Classes CSS para Transição
Criando Transição "Fade" com Propriedade CSS transition
Criando Transição "Slide" com Propriedade CSS animation
Misturando as Propriedades transition e animation
Usando v-show
Configurando Animação no Carregamento do Componente
Usando Nomes Diferentes de Classes CSS
Usando Nomes e Atributos Dinâmicos
Transicionar entre Múltiplos Elementos
Escutando a Eventos de Transição (Hooks)
Entendendo Animação em JavaScript
Excluindo CSS da Animação
Criando Animação em JavaScript
Animando Componentes Dinâmicos
Animando Listas com
Usando
Usando
Entendendo a Aplicação
Desenvolvendo a Aplicação #01
Desenvolvendo a Aplicação #02
Adicionando as Animações
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Configuração do Firebase
Configuração Global do Axios
Criando Instância do Axios
Criando Formulário
Enviando POST
Enviando GET
Usando Axios Localmente
Interceptando Requisições
Interceptando Resposta
Adicionando Headers Globais
Correção de problema com o método DELETE do CRUD
Implementando CRUD
Exibindo Mensagens
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Instalação do vue-router
Configuração do vue-router
Entendendo os Modos de Rotas (Hash vs History)
Navegando com Router Links
Onde estou? - Estilizando o Link Ativo
Navegação via Código (Navegação Imperativa)
Configurando Parâmetros de Rotas
Lendo e Usando Parâmetros de Rotas
Reagindo a Mudanças em Parâmetros de Rotas
Parâmetros de Rotas via "props"
Configurando Rotas Filhas (Rotas Aninhadas)
Navegando para Rotas Aninhadas
Tornando Router Links mais Dinâmico
Criando Links com Rotas Nomeadas
Usando Parâmetros da Query
Múltiplos Router Views (Router Views Nomeados)
Redirecionamento
Configurando Rota "Pega Tudo"
Animando Transições de Rotas
Passando Fragmento Hash
Controlando o Comportamento de Rolagem (Scroll)
Protegendo Rotas
Usando o Evento "beforeEnter"
Usando o Evento "beforeLeave"
Carregando Rotas Tardiamente
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Por que usar um Gerenciador de Estado?
Entendendo "Estado Centralizado"
Conhecendo o Projeto do Módulo
Usando Estado Centralizado
Por que Estado Centralizado Sozinho Não Resolve
Entendendo Getters
Usando Getters
Mapeando Getters para Propriedades
Entendendo Mutations
Usando Mutations
Por que existem Mutations e Actions?
Como Actions Complementam as Mutation
Usando Actions
Mapeando Actions para Métodos
Observação sobre o funcionamento da aplicação
Vuex e Two-Way-Binding (v-model)
Resumo do Vuex
Melhorando a Estrutura de Pastas
Modularizando o Gerenciador de Estado
Usando Arquivos Separados
Usando Namespaces para Evitar Conflitos de Nomes
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Projeto
Debugando Vuex com Vue Developer Tools
Configuração do Projeto
Criando os Primeiros Componentes
Configurando as Rotas do Projeto
Adicionando Cabeçalho e Navegação
Criando o Componente de Ações (Stocks)
Adicionando o Botão Comprar
Configurando o Vuex no Projeto
Adicionando o Módulo Portfolio ao Vuex
Trabalhando com Ações do Portfolio
Conectando o Portfolio ao Vuex
Exibindo o Saldo
Adicionando Validações
Aplicando Filtro de Valor Monetário no Saldo
Finalizando Dia - Alterando Preço das Ações
Animando a Transição de Rotas
Configurando Axios & Firebase
Salvando Dados (Requisição PUT)
Obtendo Dados (Requisição GET)
Conclusão do Módulo
Recursos do Módulo & Links Úteis
Introdução do Módulo
Gerar Build de Produção
Deploy do Frontend no S3
Criar Certificado SSL
Criar Distribuição no CloudFront (CDN)
Criar Segundo Bucket para Deploy Alternativo (Correção)
Configurar DNS (Registro BR)
Conclusão do Módulo
Sobre as próximas aulas
Criando Projeto
Criando Componentes
Componente Botão #01
Componente Display
Componente Botão #02
Implementando a Lógica
Problema de Monty Hall #02
Problema de Monty Hall #03
Problema de Monty Hall #04
Entendendo o Problema de Monty Hall
Download do instalador do MongoDB
Problema de Monty Hall #01
Código Fonte do Projeto
Visão Geral do Projeto
Instalação do Postgres (Windows)
Instalação do Postgres (Linux)
Aviso sobre a instalação do MongoDB (Windows)
Instalação MongoDB (Windows)
Instalação MongoDB (Mac)
Configurar Projeto
Executar Versão Final do Projeto
Middlewares
Salvar Usuário (Estrutura)
Banco de Dados Usando Knex #01
Banco de Dados Usando Knex #02
Funções de Validação
API de Usuário
Desafio Obter Usuário Por ID
Desafio Obter Usuário Por ID (Resposta)
API de Categoria #01
API de Categoria #02
API de Artigo #01
API de Artigo #02
API de Autenticação
Protegendo a API com Passport
Validando Usuário Administrador
API de Estatísticas (MongoDB)
Integrando Bancos com Scheduler
Soft Delete de Usuário
Informações de Conexão no .env
Validar Cadastro de Administradores
Código Fonte do Projeto
Estrutura Inicial do Template
Componente Cabeçalho
Visibilidade do Menu (Toggle)
Componente Menu do Usuário
Componente Título da Página
Router
Componente Home
Páginas Administrativas
Cadastro de Usuário #01
Configurando o Vue Toasted
Cadastro de Usuário #02
Cadastro de Usuário #03
Cadastro de Categoria #01
Cadastro de Categoria #02
Cadastro de Artigo #01
Cadastro de Artigo #02
Artigos Por Categoria #01
Artigos Por Categoria #02
Exibir Artigo
Artigos Por Categoria #03
Menu da Aplicação #01
Menu da Aplicação #02
Autenticação: Alterando Store
Autenticação: Tela de Login/Cadastro
Autenticação: Logout
Autenticação: Validar Token #01
Autenticação: Validar Token #02
Autenticação: Validando Admin
Autenticação: Token Expirado
Artigo com Highlight de Código
Responsividade do Menu
Código Fonte do Capítulo
Flex Box vs CSS Grid
Flex Box Nomenclatura
Flex Box #01
Flex Box #02
Flex Box #03
CSS Grid #01
CSS Grid #02
CSS Grid #03
Função: Cidadão de Primeira Classe
Função: Parâmetros e Retorno São Opcionais
Função: "this" pode Variar
Função: "this" e a Função bind #01
Função: "this" e a Função bind #02
Funções Arrow #01
Funções Arrow #02
Funções Arrow #03
Funções Anônimas
Funções Callback #01
Funções Callback #02
Funções Callback #03
Funções Construtoras
Desafio Função Construtora
Array: Map #01
Array: Map #02
Array: Map #03
Array: Filter #01
Array: Filter #02
Array: Reduce #01
Array: Reduce #02
Array: Reduce #03
ESNext: Revisão #01
ESNext: Revisão #02
ESNext: Revisão #03
ESNext: Operador Rest/Spread
Promises
Usando Callbacks Aninhadas
Refatorando Callbacks p/ Promises
Anatomia da TAG
Anatomia de uma Página HTML
Um Pouco de CSS
Estruturando os Exercícios
Texto Puro vs Browser
Tag para Textos #01
Tag para Textos #02
Listas
Listas Aninhadas
Listas Aninhadas (Desafio)
Links #01
Links #02
Tabela
Formulário #01
Formulário #02
Formulário #03
Não importa em que métrica você olhe (Google Trends, Github Stars, Tweets ...) O Vue JS é a estrela no mundo dos frameworks JavaScript - é simplesmente incrível!
Os frameworks de frontend são extremamente populares porque nos dão uma experiência de usuário como de aplicações Desktop e Mobile - mas agora no navegador! Não é de admirar que as oportunidades de emprego que exigem habilidades de framework de frontend como o Vue JS estejam entre os mais bem pagos da indústria!
Você pode conhecer o Angular 6 e o React JS, bem, o VueJS combina o melhor dos dois frameworks e torna a construção de qualquer coisa, desde pequenos widgets a aplicativos grandes de nível empresarial, muito fácil e divertido! E se você não conhece os dois Frameworks mencionados: tudo bem, porque este curso não espera nenhum conhecimento prévio de qualquer outro framework frontend - você aprenderá tudo ao longo deste Curso!
### Este curso cobre tudo! ###
Começaremos no básico, o que é o Vue.js e como ele funciona, pra só então passarmos para tópicos mais complexos e avançados, mas serei honesto: é demais para encaixar tudo em um parágrafo, então aqui está o que você aprenderá neste curso:
O que é o Vue JS e por que você deve usá-lo?
Configurando um ambiente de desenvolvimento e fluxo de trabalho
O básico (incluindo a sintaxe básica, templates e muito mais!)
Interagindo com o DOM (Renderizando listas, renderização condicional...)
Usando componentes
Formulários e entradas de usuário
Tudo sobre Diretivas, Filtros e Mixins
Como tornar seu aplicativo mais bonito com animações e transições
Requisições Ajax com Axios
Como criar um incrível aplicativo de uma única página (SPA) com roteamento
Como melhorar o gerenciamento de estado usando o Vuex
Como implantar o aplicativo na Amazon
E muito mais …
E tudo isso acompanhado de muitos exercícios, desafios e vários projetos - porque não se trata apenas de ver o código, e sim de como resolver problema reais do mercado!
### Este curso é para você? ###
Agora que você sabe do que trata este curso, vamos ver se ele é para você!
Aqui estão três tipos de alunos que vão adorar este curso:
Aluno #1: Tem alguma experiência em JavaScript e quer usar o potencial máximo da linguagem para construir aplicações poderosas ou aprimorar páginas Web existentes. Vue JS é a sua escolha!
Aluno #2: Tem alguma experiência com outros frameworks frontend como Angular ou React JS, mas quer conhecer uma alternativa seja por interesse ou desapontamento dos frameworks existentes - acredito que Vue JS seja o você estava procurando!
Aluno #3: Tem experiência com frameworks de backend, mas agora também quer entrar no mundo do frontend. O Vue JS é uma escolha incrível, tem uma curva de aprendizado muito rápida, usa JS nativo e é extremamente poderoso!
Vamos mergulhar no Vue JS agora mesmo!
Leonardo Leitão
Maximilian Schwarzmüller
Pessoas que adquiriram este curso também se interessaram pelos cursos abaixo
Todos os Cursos
Todos os Cursos
Todos os Cursos
Todos os Cursos
Não, o curso pode ser assistido a qualquer tempo sem limite de prazo.
Sim, ao final do curso você receberá um certificado baseado na carga horária pra concluir o curso
Sim, temos um time de suporte pronto pra tirar as dúvidas relativas ao conteúdo do curso.
Sim