Conteúdo

Se você acha que é preciso muito tempo e códigos HTML, CSS e JavaScript embolados para conseguir construir um layout moderno e interativo, com um curto tempo de carregamento e funcionamento em qualquer plataforma, com certeza não conhece o Vue.js. Ele é um framework feito em JavaScript, que tem como principal objetivo o reaproveitamento de código e uma curva de aprendizagem pequena.

Neste livro, Leonardo Vilarinho traz um guia de consulta com exercícios práticos ao final de cada capítulo. Você verá uma documentação mais compacta da versão 3 do Vue.js, para conhecer esse framework sem complicações. Você aprenderá a inserir, exibir e manipular dados, usar e reutilizar componentes, criar rotas, diretivas e plugins personalizados, gerenciar estados e fazer testes automatizados. Na segunda parte do livro, por meio de um projeto orientado, você construirá uma aplicação usando o que foi visto, uma API feita com o Laravel e o runner de testes AVA.

Edição atualizada em 08/2021.

Saiba o que você vai aprender

Sumário

Parte 1 — Guia de consulta

• 1 Vue, por que usá-lo?
• 1.1 O que este livro abrange?
• 1.2 Suporte aos leitores e leitoras

• 2 Preparando e iniciando o ambiente
• 2.1 Lapidando o Sublime Text
• 2.2 Instalando o Node.js
• 2.3 Extensão para o navegador
• 2.4 Primeiro projeto com Vue CLI

• 3 Entendendo o funcionamento do Vue
• 3.1 O arquivo inicial
• 3.2 Componentes, como peças de Lego
• 3.3 Reatividade, vendo tudo o que se altera

• 4 Criando e exibindo dados
• 4.1 O atributo data
• 4.2 Exibindo dados com diretivas
• 4.3 Teste seu avanço

• 5 Manipulando dados
• 5.1 Methods — Blocos de ações
• 5.2 Computed properties — Modificando dados para exibi-los
• 5.3 Watchers — Dados que podem esperar
• 5.4 Teste seu avanço

• 6 Componentes juntos são mais fortes
• 6.1 Teste seu avanço

• 7 Reutilizando componentes
• 7.1 Props — Recebendo atributos externos
• 7.2 Slot — Recebendo um bloco de código
• 7.3 Mixins — Estendendo um componente
• 7.4 Emit — Comunicação entre componentes
• 7.5 Teste seu avanço

• 8 Cada um segue seu caminho, com rotas!
• 8.1 Criando um cenário de exemplo
• 8.2 Configurando o Vue-router
• 8.3 Criando rotas
• 8.4 Trocando de página
• 8.5 Hash não é URL amigável
• 8.6 Criando sub-rotas
• 8.7 Enviando parâmetros
• 8.8 Teste seu avanço

• 9 Gerenciamento de estado com Vuex
• 9.1 Store — Criando nossa loja de dados
• 9.2 States — Declarando dados
• 9.3 Mutations — Alterando dados
• 9.4 Getters — Pegando dados
• 9.5 Actions — Executando mutações indiretamente
• 9.6 Modules — Organizando informações
• 9.7 Mapeando estado em componentes
• 9.8 Teste seu avanço

• 10 Criando e dividindo serviços
• 10.1 Recolhimento de dados com Axios
• 10.2 Teste seu avanço

• 11 Acrescentando funcionalidades
• 11.1 Criando diretivas customizadas
• 11.2 Criando seus próprios plugins
• 11.3 Publicando pacotes NPM
• 11.4 Teste seu avanço

• 12 Introdução a testes
• 12.1 Testes automatizados com Vue Test Utils
• 12.2 Teste seu avanço

• 13 Alguns recursos escondidos
• 13.1 Manipulando teclas de atalho
• 13.2 Ciclo de vida dos componentes
• 13.3 Estendendo componentes com extends
• 13.4 Trabalhando com referências
• 13.5 Variável cifrão
• 13.6 Atualizando um componente
• 13.7 Diretiva v-pre
• 13.8 Acessando um índice no v-for
• 13.9 Modo history em produção

• 14 Estruturando componentes com o setup

Parte 2 - Projeto orientado

• 15 Registro de usuários

• 16 Autenticando um usuário

• 17 Criando uma anotação

• 18 Listando as notas criadas

• 19 Apagando uma anotação

• 20 Concluindo