O documento descreve as principais funcionalidades do framework Vue.js, incluindo o uso do Vue CLI para criar projetos, a instância Vue, componentes, diretivas, propriedades, Server Side Rendering e integração com Vuex.

1. Vue.js
framework progressivo para a construção de interfaces de usuário

2. O que veremos?
 Vue com vue-cli
 A Instância Vue
 Componentes Vue
 Diretivas e Propriedades
 Vue com Vuex

3. Vue com vue-cli
Vue utiliza uma Interface de Linha de Comando(CLI) para startar projetos mais rapidamente.

4. Vue com vue-cli
Para criar um novo projeto basta utilizar:

5. A Instância Vue
Toda aplicação Vue é iniciada com a criação de uma nova instância Vue com a função Vue

6. Componentes Vue
Os componentes são um dos recursos mais poderosos do Vue. Eles ajudam a estender os
elementos HTML para encapsular código de forma reusável. Em um alto nível, componentes são
elementos personalizados que o Vue compila e anexa à sua instância.

7. Componentes Vue
Em muitos projetos Vue, componentes globais serão definidos com Vue.component, seguidos
por new Vue({ el: '#container '}) para atingir um container no corpo de cada página.
Isto pode funcionar bem em projetos pequenos e médios, onde o JavaScript só é utilizado para
incrementar certas interfaces. No entanto, em projetos mais complexos ou quando o frontend é
totalmente dirigido pelo JavaScript, tais desvantagens se tornam aparentes:
• Definições globais forçam nomes únicos para cada componente
• Templates com Strings não têm syntax highlighting e são difíceis de ler em múltiplas linhas
• Sem suporte ao CSS, enquanto HTML e JavaScript são modularizados em componentes,
CSS é notavelmente deixado de fora
• Sem processamento no build, ou seja, nos restringindo a HTML e JavaScript ES5, em vez de
• preprocessadores como Pug (anteriormente Jade) e Babel

8. Componentes Vue
Tudo isso é resolvido através dos Componentes Single-
File com a extensão .vue, possibilitados graças a
ferramentas de build como Webpack ou Browserify.

9. Diretivas e Propriedades
Diretivas são atributos especiais com o prefixo v-
• Espera-se que os valores atribuídos às diretivas sejam uma simples expressão Javascript
• O trabalho de uma diretiva é aplicar reativamente efeitos colaterais ao DOM, ou seja, realizar
algum efeito quando o valor da expressão é modificado

10. Diretivas e Propriedades
Exemplo com v-for

11. Diretivas e Propriedades
 Toda instância de componente tem seu próprio escopo isolado. Isso significa que você não pode
(e não deveria) referenciar diretamente dados do pai no template de um componente filho.
Dados podem ser passados para componentes filhos usando propriedades.
 Uma propriedade é um atributo personalizado para passar informação a partir do pai. Um filho
deve declarar explicitamente o que ele espera receber usando a opção props:

12. Diretivas e Propriedades

13. Diretivas e Propriedades

14. Vue com Server Side Rendering
 https://nuxtjs.org/guide/

15. Vue com Vuex
 É a implementação feita pela equipe Vue.js para o Flux
 A integração com o sistema reativo do Vue é transparente e requer apenas algumas
configurações bem simples, ficando imediatamente pronto para uso.

16. Vue com Vuex

17. Vue com Vuex

18. Fontes
 https://vuejs.org/
 http://www.vuejs-brasil.com.br/tag/diretivas/
 https://nuxtjs.org/examples/vuex-store
 https://nuxtjs.org/
 http://www.vuejs-brasil.com.br/vuex/