Vue.js - Framwork Progressivo
- 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:
- 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/