curso de

Vue.js parte 1: construindo Single Page Applications

Resumo do curso

  • Construa do zero uma Single Page Application
  • Crie seus próprios componentes
  • Domine o data binding, diretivas, rotas e views
  • Aplique boas práticas do início ao fim
  • Integre com o backend NodeJS como exemplo

Público alvo

Programadores front-end que já dominam JavaScript e que procuram maior produtividade na criação de Single Page Applications

Conteúdo relacionado

Cursos de Frameworks MVC em Front-end

Leia nossos artigos de Front-end

Última atualização

15/01/2020

Já é aluno?

Comece o curso agora

16h

p/ conclusão

75

Atividades

198

Minutos de video

11463

Alunos nesse curso

9.3

Nota deste curso

Certificado de participação

Formação com esse curso

Instrutores

  • Flávio é desenvolvedor e instrutor, focado no desenvolvimento com Angular e procurando conciliar o frontend com o backend. Palestrou em conferências como QCON e MobileConf. É autor do best-seller "Cangaceiro JavaScript". Além da sua graduação e MBA em TI, também é graduado em Psicologia, aplicando os aprendizados desta área no desenvolvimento de software e de aplicações web.

Conteúdo Detalhado

  1. Bem começado, metade feito

    • Conhecendo um pouco da nossa aplicação
    • Apresentando Vue.js
    • Gerando o projeto
    • Automatizando a construção do projeto com Vue CLI
    • Instalando o CLI do Vue
    • Novo projeto a partir de um template
    • Levantando um servidor e acessando a aplicação
    • Entendendo a estrutura: Babel, Webpack e geração do bundle
    • Componentes declarados em Single File Templates
    • Global View Object e View Instance
    • Renderizando um template
    • Interpolação e data binding
    • Livereloading
    • Revisão
  2. Adequando o template gerado

    • Template e view root
    • Data binding unidirecional através de interpolação
    • A diretiva v-bind
    • O poder das diretivas
    • Revisão
  3. Integração com a API de terceiros

    • Um pouco sobre a separação do cliente e sua API
    • O módulo VueResource: instalação e registro
    • Lifecycle Hooks: em que momento acessaremos nossa API?
    • $http e promises
    • Revisão
  4. Criando componentes e encapsulamento de view

    • Estilizando um componente
    • Modificações na estrutura e mais estilos
    • Isolando marcação e estilos em um novo componente
    • Importando e comunicando-se com o componente
    • Trabalhando com slots
    • Estilos e escopo
    • Revisão
  5. Melhorando a UX com animações

    • Que tal filtrarmos nossa lista? Precisamos de dados!
    • A diretiva v-on e mais um tipo de data binding
    • Filtrando efetivamente a lista
    • Adicionando comportamento ao nosso componente
    • A diretiva v-show
    • Pegadinha do v-show e slots
    • Bind de eventos, mais uma vez
    • Atalho para v-on
    • Deixando tudo mais alegre com efeitos
    • Que tal mais um componente?
    • Revisão
  6. Single Page Application e criação de rotas

    • O componente Cadastro
    • Single Page Application
    • Ajustando a aplicação para SPA
    • O módulo VueRouter: instalação e registro
    • Configurando rotas
    • O menu da aplicação
    • Animando transições de página
    • Transformando o menu em componente
    • Revisão
  7. Um pouco mais sobre componentes

    • Nosso botão de 1001 utilidades!
    • Chamada de métodos
    • Disparando eventos nativos
    • Eventos customizados
    • Lapidando nosso componente
    • Validando propriedades
    • Considerações do primeiro módulo

Ainda não estuda com a gente?

Invista na transformação da sua carreira!

Comece agora

Experiências de quem já estudou com a gente

FRANCISCO IRATUÃ NOBRE JÚNIOR

em 07/03/2019

Excelente curso introdutório. Sugiro um curso que ensine a utilizar o Vue dentro do Laravel.

Vue.js parte 1: construindo Single Page Applications

Adinan Batista Alves

em 05/04/2019

Os vídeos são mais curtos o que ajuda bastante no aprendizado e na memorização do conteúdo, e o fascínio do instrutor por calopsitas foi engraçado!

Vue.js parte 1: construindo Single Page Applications

Maison Galvão

em 21/03/2019

Acredito que o segundo curso de Javascript seria pré requisito desse curso, aprendi bastante com o projeto simples, alguns exercícios estão sem explicação adicional, da justificativa das respostas.

Vue.js parte 1: construindo Single Page Applications

Aprenda Frameworks MVC com esse e outros cursos, comece agora!

  • 1270 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1270 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1270 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1270 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas