Introdução ao Vue.js 2

Transcript

1. INTRODUÇÃO AO VUE.JS
2. Olá! Eu sou Ramon Schmidt Organizo o Meetup de Vue.js Porto Alegre E estou aqui porque amo compartilhar conhecimento e experiências! Tu me encontra com: @ramon-src ou @ramon_src
3. ENTÃO, POR QUE VUE.JS? ◉ ACESSÍVEL ◉ ESCALÁVEL ◉ PERFORMÁTICO
4. COMPONENTIZAÇÃO 1
5. “ Componentização de Software é quando você quebra seu sistema em partes menores e cada parte possui suas responsabilidades assim como interfaces, também, bem definidas.
6. ENTÃO COMPONENTIZAÇÃO NOS AJUDA... ◉ Melhorar a legibilidade do código ◉ Aumentando a confiabilidade ◉ Reusabilidade ◉ Flexibilidade ◉ E pode diminuir a complexidade
7. Single File Component
8. ◉ Melhorar a legibilidade do código ◉ Aumentando a confiabilidade ◉ Reusabilidade ◉ Flexibilidade ◉ E pode diminuir a complexidade Formulário / Dashboard Seções DESIGN ATÔMICO! Views: Páginas Organismos Átomos Moléculas Header Imagens, Links, Labels, Botões... Cards, Barras de pesquisa... http://bradfrost.com/blog/post/atomic-web-design/
9. COMPARANDO TEMPLATE VUE COM HTML5 1
11. DIRETIVAS E ATRIBUTOS DENTRO DE UM TEMPLATE 2
12. Conexão do atributo HTML “class” com uma propriedade Vue.js Uma diretiva (norma) para executar uma ação / condição no componente Introdução de algum dado computado ou texto dinâmico no HTML Aciona um método a partir de um evento Conexão do atributo HTML disabled reativo ao resultado de item active vindo da diretiva v-for
13. MANIPULAÇÃO DE DADOS E REATIVIDADE 3
17. MÉTODOS 4
18. BOTÃO DENTRO DO TEMPLATE MÉTODO DENTRO DO SCRIPT PROPRIEDADE DENTRO DO SCRIPT
19. OBSERVADORES 5
21. STYLE CSS + COMPUTED 6
23. ESTRUTURA 7
25. EXTRAINDO COMPONENTE SEM ESTADO 8
27. COMPONDO COM COMPONENTES 9
28. Referência da Prop item do botão
29. COMPARANDO
30. CICLO DE VIDA 10
31. LINK
32. DIRETIVAS E ATALHOS 11
33. DIRETIVAS ◉ V-IF, V-ELSE, V-ELSE-IF, V-SHOW ◉ V-FOR, V-BIND, V-ON ATALHOS ◉ Ao invés de usar V-ON pode-se usar @ => @click=”método” ◉ Ao invés de usar V-BIND pode-se usar : => :class=”classe”
34. OBRIGADO! Alguma pergunta? Feedbacks são bem vindos! @ramon-src/ ramonroc@gmail.com