Vue JS - Guia Completo (Vue CLI, Vue Router, Vuex e GraphQL)

Name: Vue JS - Guia Completo (Vue CLI, Vue Router, Vuex e GraphQL)
Rating: 4.6 (1397 reviews)

Além do essencial, aprenda Animações, Rotas, Gerenciamento de Estado, Requisições REST, Vuetify, Vuelidate, ChartJS, etc

Created byPlínio Naves

Last updated 10/2019

Portuguese

What you'll learn

Criar aplicações Web incríveis de pequeno a grande porte com VueJS
Entender a teoria por trás de como o VueJS funciona e aplicar isto em seus projetos
Criar Animações com o sistema de transições do Vue
Conectar sua aplicação Front End com VueJS a um servidor via AJAX (REST API)
Usar VueJS de forma profissional por meio de ferramentas especialistas
Implementar Components extremamente reutilizáveis
Adicionar e proteger rotas com o Vue Router
Fazer um Gerenciamente de Estado Centralizado utilizando Vuex
Desenvolver um Gerenciador de Finanças Pessoais
Utilizar o Vuetify para Components de Interface (UI)
Utilizar o Vuelidate para validar formulários
Utilizar Chart JS para exibir Gráficos elegantes
Integrar o Vue à uma API GraphQL por meio do Apollo Client
Criar uma API GraphQL com Prisma Server, Prisma Client e Prisma Binding
Implementar Autenticação JWT com GraphQL

Course content

16 sections • 548 lectures • 50h 56m total length

Introdução ao curso0:39
Criando primeira aplicação VueJS4:38
Evoluindo a aplicação5:55
Setup local5:49
Fique por dentro das novidades0:08
Codigo fonte da seção0:01

Sobre a seção0:55
O que é o VueJS?5:32
Entendendo os templates do Vue3:17
Como a instância Vue se conecta ao template3:07
Acessando dados da instância Vue internamente2:46
Data Binding em atributos2:54
Usando diretivas3:40
Desabilitando novas renderizações com v-once3:09
Exibindo HTML puro3:24
Manipulando eventos3:14
Entendendo o objeto Event5:25
Passando seus próprios argumentos junto com o evento3:05
Usando modificadores de eventos7:51
Trabalhando com eventos do teclado e modificadores de tecla8:42
Modificando eventos do mouse5:08
Atalhos para property e event binding2:59
Trabalhando com Computed Properties7:15
Computed Properties vs Methods8:15
Computed Properties vs Watchers6:33
Quando usar Watchers5:44
Computed Properties: getter e setter4:54
Two-way data binding com v-model3:51
Estilização dinâmica com CSS5:24
Estilização dinâmica com classes CSS usando nomes4:39
Estilização dinâmica com classes CSS usando objetos4:40
Estilização dinâmica com classes CSS usando arrays4:52
Estilizando propriedades CSS dinamicamente com style9:59
Código fonte da seção0:01
Conclusão da seção0:49

Sobre a seção0:29
Renderização condicional com v-if e v-else3:50
Trabalhando com v-else-if3:04
Renderizando grupos de elementos condicionalmente2:49
Controlando reutilização de elementos com key5:59
Ocultando elementos com v-show2:40
Diferenças entre v-if e v-show4:26
Renderizando listas com v-for5:37
Acessando o índice do item iterado no v-for1:43
Iterando objetos com v-for3:47
Iterando intervalos numéricos2:03
Rastreando identidade dos elementos no v-for com key8:00
Agrupando elementos com template2:07
v-for junto com v-if e filtragem de arrays9:04
Detectando mudanças em arrays13:44
Detectando mudanças em objetos7:48
Código fonte da seção0:01
Conclusão da seção0:30

Sobre a seção0:47
Conceitos básicos sobre a instância Vue4:26
Trabalhando com múltiplas instâncias4:11
Acessando propriedades de outras instâncias4:40
Como o Vue gerencia os dados e métodos9:44
Vue é simplesmente JavaScript6:10
Usando $refs7:14
Montando templates6:49
Usando components6:17
Limitações em templates5:01
VueJS e Virtual DOM5:20
Lifecycle Hooks: Ciclo de Vida de uma Instância Vue5:06
Lifecycle Hooks na prática7:39
Código fonte da seção0:01
Conclusão da seção1:05

Sobre a seção2:04
Ferramentas necessárias9:07
Instalando Vue CLI com NPM2:04
Criando novo projeto com "vue create"5:43
Entendendo a estrutura do projeto7:37
Entendendo os Single File Components8:42
Usando plugins8:37
Trabalhando com pré-processadores CSS7:18
Variáveis de ambiente e modos11:00
Como gerar um build de producao9:00
Usando o linter para correções no código3:00
Prototipagem Instantânea (Instant Prototyping)5:22
Customizando o Webpack2:46
Build targets11:51
Interface Gráfica do Vue CLI12:05
Vue Devtools2:44
Como usar o comando "vue init" do Vue CLI 23:31
Código fonte da seção0:01
Conclusão da seção0:56

Sobre a seção0:29
Criando novo projeto com Vue CLI1:56
Introdução aos Components no Vue8:49
Use a propriedade "data" como uma função7:02
Registrando components globalmente e localmente4:10
Criando novos components7:19
Boas práticas para nomes de components11:03
Estrutura de diretórios para components3:49
Contendo estilos CSS do Component com "scoped" e "module"10:23
Código fonte da seção0:01
Conclusão da seção0:51

Sobre a seção0:27
Criando novo projeto com Vue CLI1:36
Criando components necessários4:10
Como tornar os components reutilizáveis2:06
Props: passando dados do component pai para o filho4:03
Passando dados para "props" dinamicamente3:53
Usando "props" dentro da instância do Component2:34
Nome das "props" e case insensitive do DOM4:45
Removendo código desnecessário1:40
Tipagem em props4:33
Validando props6:06
Atalho para passar objeto inteiro como "props"5:13
Atributos Non-prop10:04
Solução melhor ao trabalhar com objetos2:46
Custom Events: passando dados do component filho para o pai5:55
Bônus: ativando item ao ser selecionado4:12
Como funciona o Fluxo de Dados Unidirecional6:48
Comunicação entre components irmãos4:44
Centralizando comunicação com Event Bus8:03
Reaproveitando código e dados com Event Bus2:15
Bônus: enviando item para edição8:29
Bônus: reativando item selecionado2:52
Bônus: evite causar mutações em "props"3:13
Truque: atualizando "props" sem causar mutações9:45
Bônus: atualizando item usando Event Bus6:50
Bônus: detalhes finais3:26
Melhor forma de reagir a alterações em props0:23
Comunicando via $parent e $root0:20
Codigo fonte da seção0:01
Conclusão da seção0:51

Sobre a seção0:23
Criando novo projeto com Vue CLI2:51
Criando Post Component1:42
Passando dados para o component3:39
Customizando o template com slots2:17
Trabalhando com multiplos slots (nomeados)6:35
Slots default e conteúdo default em slots4:22
Escopo de estilização e compilação dos slots4:16
Usando slots com escopo14:15
Atribuição via desestruturação no slot-scope1:43
Update: Unificação de slots com "v-slot"0:47
Alternando vários Components com Components Dinâmicos6:18
Usando "props" em Components Dinâmicos4:06
Entendendo como funcionam os Components Dinâmicos3:48
Mantendo mesma instância com keep-alive3:32
Ciclo de vida de Components Dinâmicos1:40
Customizando keep-alive com include, exclude e max5:05
Otimizando o start da aplicação com Components Assíncronos9:15
Manipulando estado de carregamento de Components Assíncronos5:16
Bônus: propriedade "name" nos Components7:09
Conclusão da seção0:51

Sobre a seção0:40
Criando novo projeto com Vue CLI2:04
Usando v-model para ligação de dados em inputs3:37
Agrupando dados e setando valor inicial nos inputs4:28
Modificando entrada de dados com modificadores4:23
Manipulando textarea4:47
Manipulando radio buttons5:18
Manipulando inputs do tipo checkbox3:05
Usando checkbox com valores para true ou false3:44
Armazenando valores de checkboxes em arrays4:44
Trabalhando com "select" e "option"9:13
Submetendo formulário5:38
Resetando formulário6:33
Como a diretiva v-model trabalha3:41
Criando nosso próprio campo de formulário16:22
Bônus: customizando v-model em Components3:02
Código fonte da seção0:01
Bônus: Resetando Range Component0:45
Conclusão da seção0:34

Sobre a seção1:15
Entendendo transições no Vue8:35
Criando novo projeto1:28
Usando v-if ou v-show para mostrar/ocultar elementos2:07
Preparando código para usar <transition>2:48
Animando um único elemento com <transition>2:57
Nomeando animações1:55
Abreviando uso das classes3:11
Criando animação de "zoom" com CSS Transitions4:03
Criando animação de "slide" com CSS Animations7:43
Mesclando "transition" e "animation" CSS3:59
Indicando "tipo" de regra principal3:13
Configurando tempo de duração das transições manualmente2:21
Bônus: alterando curva de animação com "timing functions"3:46
Usando classes CSS personalizadas5:22
Ouvindo eventos de transição com Gatilhos JavaScript (JavaScript Hooks)3:29
Gatilhos JavaScript na prática7:27
Desativando CSS das animações1:48
Usando JavaScript para criar animações10:47
Animando na renderização inicial1:31
Usando classes CSS personalizadas na renderização inicial2:59
Gatilhos JavaScript na renderização inicial3:42
Atributos e transições dinâmicas2:58
Transitando entre múltiplos elementos4:11
Ajustando animações com modos de transição3:00
Usando atributo key para alternar múltiplos elementos6:47
Transitando Components Dinâmicos3:21
Como animar múltiplos itens com <transition-group>3:04
Estrutura inicial para usar <transition-group>9:24
Usando <transition-group> para animar uma lista de itens2:45
Animando reposicionamento na adição/entrada de novos itens2:52
Animando reposicionamento na remoção/saída de itens existentes4:34
Bônus: embaralhando itens da lista4:03
Dica: animações reutilizáveis0:11
Introdução a animação de estados0:42
Preparando código para animar números2:39
Animando troca de valores em números com Green Sock5:35
Mais sobre animações de estado0:10
Código fonte da seção0:01
Conclusão da seção1:01

Requirements

Conhecimento básico de JavaScript
Conhecimento básico de HTML e CSS

Description

VueJS é um Framework JavaScript Progressivo (adotado incrementalmente) para a construção de interfaces do usuário.

Se tornou extremamente popular pela sua habilidade de mesclar simplicidade e performance!

Com uma curva de aprendizado muito baixa, Vue entrega ao desenvolvedor as ferramentas essenciais a qualquer projeto, seja ele de pequeno até grande porte a nível empresarial, e tudo o que você precisa saber é JavaScript, nada mais!

Vagas de emprego que demandam conhecimento em Frameworks como o VueJS estão em alta e entre as mais bem pagas do mercado, e este é o momento perfeito para você conhecê-lo e em detalhes!

Venha comigo e vamos fazer uma incrível viagem ao mundo do VueJS!

Who this course is for:

Todos os desenvolvedores que desejam aprender a utilizar o VueJS para criar seus projetos
Todos os desenvolvedores que desejam aprender um Framework JavaScript nativo com uma curva de aprendizado muito baixa
Procura por simplicidade e performance? Vue entrega isto com maestria!
Acha os outros frameworks difíceis? Vue é perfeito é pra você!

Vue JS - Guia Completo (Vue CLI, Vue Router, Vuex e GraphQL)

What you'll learn

Explore related topics

Course content

Introdução e boas-vindas6 lectures • 17min

Dominando os princípios29 lectures • 2hr 12min

Trabalhando com listas e condicionais18 lectures • 1hr 18min

Por trás da instância Vue15 lectures • 1hr 15min

Trabalhando com Vue CLI19 lectures • 1hr 53min

Introdução aos Components11 lectures • 56min

Props e Events: comunicação entre Components30 lectures • 2hr 2min

Slots, Components Dinâmicos e Components Assíncronos21 lectures • 1hr 30min

Trabalhando com formulários19 lectures • 1hr 23min

Animando Elementos e Components40 lectures • 2hr 24min

Requirements

Description

Who this course is for: