Hello Vue

Workshop que foi ministrado pelo Gabriel Colombo (https://www.linkedin.com/in/gabrielcolombo/) abordando sobre essa biblioteca fantástica Vue.js.

Transcript

1. Gabriel Colombo Hello.vue Introdução ao framework que vai mudar a sua vida
2. Hello.vue → Sobre mim Gabriel Colombo 23 anos — 11 anos de música Designer & Front-end Dev Tecnólogo em Sistemas para Internet, Intercambista em Web & Multimídia 3 anos de experiência 2 anos utilizando Vue.js diariamente Escrevo pro Medium, Prototypr.IO e Marvel blog Twitter @gcolombo_ — LinkedIn gabrielcolombo
3. Hello.vue → Conteúdo do workshop 1 Os motivos de estarmos aqui 2 A mágica por trás do framework 3 Projetão interessante » Reatividade » A Vue instance » Data-binding » Diretivas » Event Handling » Lidando com I/O » Componentes » Introdução ao Vue.js » Por que utilizá-lo » Comparativo com outros frameworks » E-mail client
4. Vue.js The Progressive Javascript Framework
5. Hello.vue → O que é, de onde veio, o que come? Como seria se eu conseguisse extrair as partes que gosto do Angular.js e criar um framework menos burocrático? “ Evan You — Criador do Vue.js
6. Hello.vue → Situação atual do framework 89% Dos desenvolvedores estão satisfeitos com o framework 80 Estrelas acumuladas diariamente no GitHub 14º Projeto mais favoritado de todos os tempos no GitHub
7. Hello.vue → Situação atual do framework
8. Hello.vue → Versões 1 Versão 0.11+ (V-angular) 2 Versão 1.0+ (Stable) 3 Versão 2.0+ » Mixins » Class bindings » Plugins » Aprofundamento na documentação » Introdução dos conceitos base: (Models, directives, computed properties, watchers, components, etc). » Novos hooks na Vue Instance » Server-side rendering » Vuex oficializado » Suporte à Typescript » Testes unitários » Melhorias nas funcionalidades
9. Hello.vue → Por que usar Vue? 1 Produtividade 2 Fácil aprendizado 3 Evolução constante 4 Fácil integração com outras bibliotecas 5 Comunidade proativa 6 Alta performance
10. Hello.vue → Quem está usando?
11. Hello.vue → Ex #1 — Hello World Hello World “Recordar é viver” ¯\_(ツ)_/¯
12. Hello.vue → Ex #1 — Alguém tá lendo isso aqui? HTML JS <div id=”app”> <h1> {{ greeting }} </h1> </div> new Vue({ el: ‘#app’, data: { greeting: ‘Hello World!’ } }); Veja o resultado ⤵ https://goo.gl/m92TKR
13. Hello.vue → A Vue Instance O que é » Objeto contendo vários métodos que é atrelado à um elemento no DOM ao ser inicializado » Recebe como parâmetro um objeto de configuração com algumas propriedades Opções de Configuração » el » data » methods » watch » computed » mixins » components » beforeCreate » created » beforeMount » mounted » beforeUpdate » updated » beforeDestroy » destroyed Base Hooks Mais detalhes ⤵ https://goo.gl/VsxBWt
14. Hello.vue → Directives — v-for A diretiva v-for pode ser utilizada para renderizar uma lista baseada nos itens de um array. Exemplo » Renderizar rows de uma tabela com dados vindo de uma api. HTML <tr v-for=”user in users”> <td>{{ user.name }}</td> <td>{{ user.email }}</td> </tr> Veja o resultado ⤵ https://goo.gl/qfAuBZ JSON [ {name: ‘..’, email: ‘..’}, {name: ‘..’, email: ‘..’} ]
15. Hello.vue → Directives — v-if / v-else / v-else-if As diretivas v-if / v-else / v-else-if podem ser utilizadas para renderizar condicionalmente um elemento na tela. Exemplo » Esconder campos de um form, linhas de uma tabela, entre outros. HTML <div v-if=”users.length > 0”> Resultados </div> <div v-else>Sem resultados</div> Veja o resultado ⤵ https://goo.gl/1K1aEG JS { users: [] }
16. Hello.vue → Directives — v-show As diretiva v-show é utilizada para esconder elementos na tela (visualmente). Exemplo » Esconder botões e somente mostrar em certas ocasiões. HTML <button v-show=”orders.length > 0” > Confirmar pedido </button> Veja o resultado ⤵ https://goo.gl/27lkKN JS { orders: [] }
17. Hello.vue → Directives — v-bind (:) A diretiva v-bind é utilizada para linkar propriedades à atributos através de um array ou objeto. Exemplo » Alternar classes de validação em um formulário baseado em uma computed property. JS data: { inputStates: { active: true, 'text-danger': false } } Veja o resultado ⤵ https://goo.gl/L1cnVF HTML <input :class="inputStates">
18. Hello.vue → Directives — v-on(@) A diretiva v-on é utilizada para atribuir um event handler à um elemento.. Exemplo » Cliques, eventos de teclado, eventos em inputs, entre outros. JS methods: { confirmDeletion() { confirm('Deseja excluir?'); } } Veja o resultado ⤵ https://goo.gl/kMT7sc HTML <button @click=”confirmDeletion()> Excluir </button>
19. Hello.vue → Methods Methods é um objeto que contém todas as funções disponíveis para a instância. Tais funções podem ser acessadas pelo html através das {{ chaves }}, ou dentro da instância usando this ou a variável que contém a instância, dependendo do scope atual JS Methods: { getUserInfo(user) { return user.name; } } Veja o resultado ⤵ https://goo.gl/EcelE4 HTML <div>{{ getUserName(user) }}</div>
20. Hello.vue → Watchers Watchers são usados para realizar tarefas complexas quando uma propriedade é atualizada. Exemplo » Buscar informações em uma api, disparar funções associadas à outros models, entre outros. HTML watch: { paymentComplete(status) { if(status === true) { this.requestEvaluation(); } } } Veja o resultado ⤵ https://goo.gl/AI3X2d
21. Hello.vue → Computed Properties Propriedades computadas são geralmente utilizadas para evitar excesso de lógica nas views. Exemplo » Criação de conteúdo dinâmico, como URLs, valores, entre outros. JS { computed: { buzzLightyear: function() { return ‘Ao infinito, e além!’ } } Veja o resultado ⤵ https://goo.gl/4Shqeg HTML <h1>{{ buzzLightyear }}</h1>
22. Hello.vue → Filters O intuito principal dos filtros é manipulação de texto. Podem ser encadeados e receber parâmetros. Exemplo » Transformar a primeira letra de uma palavra em maiúscula. JS filters: { capitalize: function (value) { return value .toString() .charAt(0) .toUpperCase() + value.slice(1); } } Veja o resultado ⤵ https://goo.gl/kUlL6e HTML <div>{{ message | capitalize }}</div>
23. Hello.vue → Ex #2 — Calculadora de Impostos 07:36 De: Gerente (mandachuva@empresa.com) Para: Dev (novodev@empresa.com) Assunto: Precisamos conversar. Caro desenvolvedor, Nosso último dev foi demitido por justa causa devido ao compartilhamento interno de memes do bolsonaro. Porém o governo aumentou os impostos da galera e ele era o encarregado de atualizar os cálculos do sistema. Preciso que isso seja atualizado e liberado ao público. De: Gerente (mandachuva@empresa.com) Para: Dev (novodev@empresa.com) Assunto: Só mais um detalhe. PS: Você tem 30 minutos. Att, Gerente. ̿̿ ̿̿ ̿̿ ̿'̿'\̵͇̿̿\з=( ▀ ͜͞ʖ▀)=ε/̵͇̿̿/’̿’̿ ̿ ̿̿ ̿̿ ̿̿ 07:37 Veja o resultado ⤵ https://goo.gl/ivKou8
24. Hello.vue → Ex #2 — Calculadora de Impostos Sem Vue.js Com Vue.js
25. Hello.vue → Custom Directives Além das diretivas padrões, é possível criar diretivas customizadas, tanto globais como específicas à um componente. Exemplo » Criar uma diretiva que coloca um input em foco automaticamente. JS Vue.directive('focus', { inserted: function (el) { el.focus(); } }); Veja o resultado ⤵ https://goo.gl/HVswkw HTML <input v-focus>
26. Hello.vue → Mixins Mixins é a maneira na qual podemos trabalhar com injeção de dependência. Só criar um objeto normal, com as mesmas opções da Vue Instance, e colocar o nome da variável no array de mixins. utils.js var utils = { data: { … }, methods: { … } } Veja o resultado ⤵ https://goo.gl/lx08Nj main.js New Vue({ … mixins: [utils], … });
27. Hello.vue → Components Componentes são estruturas que permitem criar elementos customizados para encapsular código reutilizável. Componentes podem contém subcomponentes, e serem declarados de maneira global ou local à uma instância. JS Vue.component('title', { props: ['message'] template: '<h1>{{message}}</h1>' }); Veja o resultado ⤵ https://goo.gl/rkQXGx HTML <title message="Bem-vindo(a)!">
28. Hello.vue → Projeto — MailBox 2k MailBox 2k “O melhor e-mail client dos anos 2000”
29. Hello.vue → Q&A Perguntas ? (~_^)?
30. Hello.vue → Foi bom enquanto durou :D Obrigado!
31. Hello.vue → Foi bom enquanto durou :D