Library

Course: Vue JS - Guia Completo (+ Vue CLI)

Vue JS - Guia Completo (+ Vue CLI)

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
About this Course

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 is the target audience?

  • 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ê!
Basic knowledge
  • Conhecimento básico de JavaScript
  • Conhecimento básico de HTML e CSS
What you will 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
Curriculum
Number of Lectures: 155
Total Duration: 12:44:03
Introdução e boas-vindas
  • Introdução ao curso  
  • Criando primeira aplicação VueJS  
  • Evoluindo a aplicação  
  • Setup local  
Dominando os princípios
  • Dominando os princípios - Sobre a seção  
  • O que é o VueJS?  
  • Entendendo os templates do Vue  
  • Como a instância Vue se conecta ao template  
  • Acessando dados da instância Vue internamente  
  • Data Binding em atributos  
  • Usando diretivas  
  • Desabilitando novas renderizações com v-once  
  • Exibindo HTML puro  
  • Manipulando eventos  
  • Entendendo o objeto Event  
  • Passando seus próprios argumentos junto com o evento  
  • Usando modificadores de eventos  
  • Trabalhando com eventos do teclado e modificadores de tecla  
  • Modificando eventos do mouse  
  • Atalhos para property e event binding  
  • Trabalhando com Computed Properties  
  • Computed Properties vs Methods  
  • Computed Properties vs Watchers  
  • Quando usar Watchers  
  • Computed Properties: getter e setter  
  • Two-way data binding com v-model  
  • Estilização dinâmica com CSS  
  • Estilização dinâmica com classes CSS usando nomes  
  • Estilização dinâmica com classes CSS usando objetos  
  • Estilização dinâmica com classes CSS usando arrays  
  • Estilizando propriedades CSS dinamicamente com style  
  • Conclusão da seção  
Trabalhando com listas e condicionais
  • Trabalhando com listas e condicionais - Sobre a seção  
  • Renderização condicional com v-if e v-else  
  • Trabalhando com v-else-if  
  • Renderizando grupos de elementos condicionalmente  
  • Controlando reutilização de elementos com key  
  • Ocultando elementos com v-show  
  • Diferenças entre v-if e v-show  
  • Renderizando listas com v-for  
  • Acessando o índice do item iterado no v-for  
  • Iterando objetos com v-for  
  • Iterando intervalos numéricos  
  • Rastreando identidade dos elementos no v-for com key  
  • Agrupando elementos com template  
  • v-for junto com v-if e filtragem de arrays  
  • Detectando mudanças em arrays  
  • Detectando mudanças em objetos  
  • Trabalhando com listas e condicionais - Conclusão da seção  
Por trás da instância Vue
  • Por trás da instância Vue - Sobre a seção  
  • Conceitos básicos sobre a instância Vue  
  • Trabalhando com múltiplas instâncias  
  • Acessando propriedades de outras instâncias  
  • Como o Vue gerencia os dados e métodos  
  • Vue é simplesmente JavaScript  
  • Usando $refs  
  • Montando templates  
  • Usando components  
  • Limitações em templates  
  • VueJS e Virtual DOM  
  • Lifecycle Hooks: Ciclo de Vida de uma Instância Vue  
  • Lifecycle Hooks na prática  
  • Por trás da instância Vue - Conclusão da seção  
Trabalhando com Vue CLI
  • Trabalhando com Vue CLI - Sobre a seção  
  • Ferramentas necessárias  
  • Instalando Vue CLI com NPM  
  • Criando novo projeto com "vue create"  
  • Entendendo a estrutura do projeto  
  • Entendendo os Single File Components  
  • Usando plugins  
  • Trabalhando com pré-processadores CSS  
  • Variáveis de ambiente e modos  
  • Como gerar um build de producao  
  • Usando o linter para correções no código  
  • Prototipagem Instantânea (Instant Prototyping)  
  • Customizando o Webpack  
  • Build targets  
  • Interface Gráfica do Vue CLI  
  • Vue Devtools  
  • Como usar o comando "vue init" do Vue CLI 2  
  • Trabalhando com Vue CLI - Conclusão da seção  
Introdução aos Components
  • Introdução aos Components - Sobre a seção  
  • Criando novo projeto com Vue CLI  
  • Introdução aos Components no Vue  
  • Use a propriedade "data" como uma função  
  • Registrando components globalmente e localmente  
  • Criando novos components  
  • Boas práticas para nomes de components  
  • Estrutura de diretórios para components  
  • Contendo estilos CSS do Component com "scoped" e "module"  
  • Introdução aos Components - Conclusão da seção  
Props e Events: comunicação entre Components
  • Props e Events: comunicação entre Components - Sobre a seção  
  • Props e Events - Criando novo projeto com Vue CLI  
  • Criando components necessários  
  • Como tornar os components reutilizáveis  
  • Props: passando dados do component pai para o filho  
  • Passando dados para "props" dinamicamente  
  • Usando "props" dentro da instância do Component  
  • Nome das "props" e case insensitive do DOM  
  • Removendo código desnecessário  
  • Tipagem em props  
  • Validando props  
  • Atalho para passar objeto inteiro como "props"  
  • Atributos Non-prop  
  • Solução melhor ao trabalhar com objetos  
  • Custom Events: passando dados do component filho para o pai  
  • Bônus: ativando item ao ser selecionado  
  • Como funciona o Fluxo de Dados Unidirecional  
  • Comunicação entre components irmãos  
  • Centralizando comunicação com Event Bus  
  • Reaproveitando código e dados com Event Bus  
  • Bônus: enviando item para edição  
  • Bônus: reativando item selecionado  
  • Bônus: evite causar mutações em "props"  
  • Truque: atualizando "props" sem causar mutações  
  • Bônus: atualizando item usando Event Bus  
  • Bônus: detalhes finais  
  • Props e Events: comunicação entre Components - Conclusão da seção  
Slots, Components Dinâmicos e Components Assíncronos
  • Slots, Components Dinâmicos e Components Assíncronos - Sobre a seção  
  • Slots,Components Dinâmicos e Components Assíncronos-Criando novo projeto com Vue  
  • Criando Post Component  
  • Passando dados para o component  
  • Customizando o template com slots  
  • Trabalhando com multiplos slots (nomeados)  
  • Slots default e conteúdo default em slots  
  • Escopo de estilização e compilação dos slots  
  • Usando slots com escopo  
  • Atribuição via desestruturação no slot-scope  
  • Alternando vários Components com Components Dinâmicos  
  • Usando "props" em Components Dinâmicos  
  • Entendendo como funcionam os Components Dinâmicos  
  • Mantendo mesma instância com keep-alive  
  • Ciclo de vida de Components Dinâmicos  
  • Customizando keep-alive com include, exclude e max  
  • Otimizando o start da aplicação com Components Assíncronos  
  • Manipulando estado de carregamento de Components Assíncronos  
  • Bônus: propriedade "name" nos Components  
  • Slots, Components Dinâmicos e Components Assíncronos - Conclusão da seção  
Trabalhando com formulários
  • Trabalhando com formulários - Sobre a seção  
  • Trabalhando com formulários - Criando novo projeto com Vue CLI  
  • Usando v-model para ligação de dados em inputs  
  • Agrupando dados e setando valor inicial nos inputs  
  • Modificando entrada de dados com modificadores  
  • Manipulando textarea  
  • Manipulando Radio Buttons  
  • Manipulando inputs do tipo checkbox  
  • Usando checkbox com valores para true ou false  
  • Armazenando valores de checkboxes em arrays  
  • Trabalhando com select e option  
  • Submetendo formulario  
  • Resetando formulario  
  • Como a diretiva v model trabalha  
  • Criando nosso proprio campo de formulario  
  • Bonus Customizando v model em components  
  • Trabalhando com formulários - Conclusao da secao  
Reviews (0)