Curso de Vue.js parte 1: construindo Single Page Applications

Faça esse curso de Frameworks MVC e:

• 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

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