Próximas Turmas

Nenhuma turma disponível no momento

Entre em contato para informar seu interesse

O que você vai aprender nesse curso

O curso de Front-end com Vue JS tem como objetivo apresentar a tecnologia Vue JS como solução de criação para a camada de comunicação com o usuário da aplicação (FRONTEND). 

O foco principal do curso é interagir e operar todo o ecossistema do Vue JS de forma que o aluno possa no futuro criar suas próprias aplicações Vue JS. 

O curso conta com: introdução a estrutura de projeto em Vue JS, Vue CLI, Lifecycle hooks, Vuex, Requisições HTTP com Axios, Acesso APIs e outros componentes de tela para exibição de listas. 

Ao Final do curso o aluno estará apto a criar suas aplicações Frontend com Vue JS e consumir dados a partir de APIs.

Pré-requisito: Formação Front-End ou conhecimentos em HTML/CSS/Javascript

Conteúdo do curso

Introdução e instalação do ambiente 

  • Entendendo a documentação do Vue JS
  • Download Vue JS 3.0
  • Instalação do Visual Studio Code
  • Configuração do Vue Dev Tools
  • Entendo o projeto
  • Configuração a estrutura de pastas 

Introdução ao Vue JS 

  • Criação do projeto
  • Pastas
  • Diretivas
  • Loops
  • Eventos
  • Input Two-way Data binding 

Componentes 

  • Single File Componente ou Single File Template
  • Criando componentes
  • Definindo nomes
  • Seletores (tags)
  • Adicionando Bootstrap
  • Escopo de componente
  • Usando alias
  • Ciclo de vida dos componentes
  • Comunicação entre componentes
  • Validação de componentes
  • LocalStorage 

Entrada via formulários 

  • Criando o projeto
  • Two-way data binding
  • Agrupando dados do formulário
  • V-model
  • Modificadores
  • Inputs
  • Checkbox
  • Radio
  • Select
  • Máscaras
  • Inputs date
  • Inputs do tipo color, range e file
  • Textarea
  • Personalizando componentes 

Vuex e Vue Routers (Acesso externo)

  • Configuração Vue Router
  • Obtendo dados via APIs
  • Http Axios
  • Actions e mutations
  • POST
  • GET
  • PUT
  • DELETE 

Composition API

  • Introdução
  • Criação do projeto
  • manipulação
  • Options API
  • Data
  • Métodos
  • Two-way data binding
  • Reactive
  • Non-Reactive
  • Computed properties
  • Event handler e emit 

Criação do projeto

  • E-Commerce