Gabriel Colombo

Hello.vue
Introdução ao framework que vai mudar a sua vida
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

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

» Introdução ao Vue.js » Reatividade » E-mail client

» Por que utilizá-lo » A Vue instance
» Comparativo com » Data-binding
outros frameworks » Diretivas
» Event Handling
» Lidando com I/O
» Componentes
Vue.js
The Progressive
Javascript Framework
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
Hello.vue → Situação atual do framework

89% 80 14º
Dos desenvolvedores estão Estrelas acumuladas Projeto mais favoritado de
satisfeitos com o framework diariamente no GitHub todos os tempos no GitHub
Hello.vue → Situação atual do framework
Hello.vue → Versões

1 Versão 0.11+
(V-angular) 2 Versão 1.0+
(Stable) 3 Versão 2.0+

» Introdução dos » Mixins » Novos hooks na Vue

conceitos base: » Class bindings Instance
(Models, directives, » Plugins » Server-side rendering
computed properties, » Aprofundamento na » Vuex oficializado
watchers, components, documentação » Suporte à Typescript
etc). » Testes unitários
» Melhorias nas
funcionalidades
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
Hello.vue → Quem está usando?
Hello.vue → Ex #1 — Hello World

Hello World
“Recordar é viver”

¯\_(ツ)_/¯
Hello.vue → Ex #1 — Alguém tá lendo isso aqui?

HTML JS

<div id=”app”> new Vue({

<h1>
{{ greeting }} el: ‘#app’,
</h1>
</div> data: {
greeting: ‘Hello World!’
}

});

Veja o resultado ⤵

https://goo.gl/m92TKR
Hello.vue → A Vue Instance

O que é Opções de Configuração

» Objeto contendo vários métodos que Base Hooks

é atrelado à um elemento no DOM ao » el » beforeCreate
ser inicializado » data » created
» methods » beforeMount
» Recebe como parâmetro um objeto » watch » mounted
de configuração com algumas » computed » beforeUpdate
propriedades » mixins » updated
» components » beforeDestroy
Mais detalhes ⤵ » destroyed

https://goo.gl/VsxBWt
Hello.vue → Directives — v-for

HTML
A diretiva v-for pode ser utilizada
para renderizar uma lista baseada <tr v-for=”user in users”>
nos itens de um array. <td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
Exemplo

» Renderizar rows de uma tabela JSON

com dados vindo de uma api.
[
{name: ‘..’, email: ‘..’},
Veja o resultado ⤵ {name: ‘..’, email: ‘..’}
]
https://goo.gl/qfAuBZ
Hello.vue → Directives — v-if / v-else / v-else-if

HTML
As diretivas v-if / v-else / v-else-if
podem ser utilizadas para renderizar <div v-if=”users.length > 0”>
condicionalmente um elemento na Resultados
</div>
tela.
<div v-else>Sem resultados</div>
Exemplo

» Esconder campos de um form,

linhas de uma tabela, entre outros. JS

{
Veja o resultado ⤵
users: []
}
https://goo.gl/1K1aEG
Hello.vue → Directives — v-show

HTML
As diretiva v-show é utilizada para
esconder elementos na tela <button
(visualmente). v-show=”orders.length > 0”
>
Exemplo Confirmar pedido
</button>
» Esconder botões e somente
mostrar em certas ocasiões.
JS

{
Veja o resultado ⤵
orders: []
}
https://goo.gl/27lkKN
Hello.vue → Directives — v-bind (:)
JS

A diretiva v-bind é utilizada para

data: {
linkar propriedades à atributos
através de um array ou objeto. inputStates: {
active: true,
Exemplo
'text-danger': false
» Alternar classes de validação em }
um formulário baseado em uma }
computed property.

Veja o resultado ⤵ HTML

https://goo.gl/L1cnVF <input :class="inputStates">

Hello.vue → Directives — v-on(@)
JS

A diretiva v-on é utilizada para

methods: {
atribuir um event handler à um
elemento.. confirmDeletion() {
confirm('Deseja excluir?');
Exemplo
}
» Cliques, eventos de teclado, }
eventos em inputs, entre outros.
HTML

Veja o resultado ⤵ <button @click=”confirmDeletion()>

Excluir
https://goo.gl/kMT7sc </button>
Hello.vue → Methods

JS
Methods é um objeto que contém
todas as funções disponíveis para a Methods: {
instância. getUserInfo(user) {
return user.name;
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
HTML
Veja o resultado ⤵
<div>{{ getUserName(user) }}</div>
https://goo.gl/EcelE4
Hello.vue → Watchers

HTML
Watchers são usados para realizar
tarefas complexas quando uma watch: {
propriedade é atualizada. paymentComplete(status) {
if(status === true) {
Exemplo this.requestEvaluation();
}
}
» Buscar informações em uma api, }
disparar funções associadas à
outros models, entre outros.

Veja o resultado ⤵

https://goo.gl/AI3X2d
Hello.vue → Computed Properties

JS
Propriedades computadas são
geralmente utilizadas para evitar
excesso de lógica nas views. {
computed: {
buzzLightyear: function() {
Exemplo return ‘Ao infinito, e além!’
}
}
» Criação de conteúdo dinâmico,
como URLs, valores, entre outros.

HTML
Veja o resultado ⤵
<h1>{{ buzzLightyear }}</h1>
https://goo.gl/4Shqeg
Hello.vue → Filters
JS

O intuito principal dos filtros é

manipulação de texto. Podem ser filters: {
capitalize: function (value) {
encadeados e receber parâmetros. return value
.toString()
.charAt(0)
Exemplo .toUpperCase()
+ value.slice(1);
» Transformar a primeira letra de }
uma palavra em maiúscula. }

Veja o resultado ⤵ HTML

https://goo.gl/kUlL6e <div>{{ message | capitalize }}</div>

Hello.vue → Ex #2 — Calculadora de Impostos

07:36 07:37

De: Gerente (mandachuva@empresa.com) De: Gerente (mandachuva@empresa.com)

Para: Dev (novodev@empresa.com) Para: Dev (novodev@empresa.com)
Assunto: Precisamos conversar. Assunto: Só mais um detalhe.

Caro desenvolvedor, PS: Você tem 30 minutos.

Nosso último dev foi demitido por Att,

justa causa devido ao compartilhamento
interno de memes do bolsonaro. Gerente.

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 Veja o resultado ⤵

liberado ao público.
https://goo.gl/ivKou8
Hello.vue → Ex #2 — Calculadora de Impostos

Sem Vue.js Com Vue.js

Hello.vue → Custom Directives

JS
Além das diretivas padrões, é
possível criar diretivas customizadas, Vue.directive('focus', {
tanto globais como específicas à um inserted: function (el) {
componente. el.focus();
Exemplo }
});
» Criar uma diretiva que coloca um
input em foco automaticamente.

HTML
Veja o resultado ⤵

https://goo.gl/HVswkw <input v-focus>

Hello.vue → Mixins
utils.js

Mixins é a maneira na qual podemos

trabalhar com injeção de var utils = {
data: { … },
dependência. methods: { … }
}
Só criar um objeto normal, com as
mesmas opções da Vue Instance, e
colocar o nome da variável no array main.js
de mixins.
New Vue({
…
Veja o resultado ⤵ mixins: [utils],
…
https://goo.gl/lx08Nj });
Hello.vue → Components

JS
Componentes são estruturas que
permitem criar elementos
Vue.component('title', {
customizados para encapsular
código reutilizável. props: ['message']
template: '<h1>{{message}}</h1>'
Componentes podem contém });
subcomponentes, e serem
declarados de maneira global ou
local à uma instância.
HTML
Veja o resultado ⤵
<title message="Bem-vindo(a)!">
https://goo.gl/rkQXGx
Hello.vue → Projeto — MailBox 2k

MailBox 2k
“O melhor e-mail client dos anos 2000”
Hello.vue → Q&A

Perguntas?
(~_^)?
Hello.vue → Foi bom enquanto durou :D

Obrigado!
Hello.vue → Foi bom enquanto durou :D