Hello vue

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
» 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

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%
Dos desenvolvedores estão
satisfeitos com o framework
80
Estrelas acumuladas
diariamente no GitHub
14º
Projeto mais favoritado de
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+
» 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

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 Ex #1 — Hello World
Hello World
“Recordar é viver”
¯_(ツ)_/¯

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

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

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>
https://goo.gl/qfAuBZ
JSON
[
{name: ‘..’, email: ‘..’},
{name: ‘..’, email: ‘..’}
]

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>
https://goo.gl/1K1aEG
JS
{
users: []
}

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>
https://goo.gl/27lkKN
JS
{
orders: []
}

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
}
}
https://goo.gl/L1cnVF
HTML
<input :class="inputStates">

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?');
}
}
https://goo.gl/kMT7sc
HTML
<button @click=”confirmDeletion()>
Excluir
</button>

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;
}
}
https://goo.gl/EcelE4
HTML
<div>{{ getUserName(user) }}</div>

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();
}
}
}
https://goo.gl/AI3X2d

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!’
}
}
https://goo.gl/4Shqeg
HTML
<h1>{{ buzzLightyear }}</h1>

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);
}
}
https://goo.gl/kUlL6e
HTML
<div>{{ message | capitalize }}</div>

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
https://goo.gl/ivKou8

Hello.vue Ex #2 — Calculadora de Impostos
Sem Vue.js Com Vue.js

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();
}
});
https://goo.gl/HVswkw
HTML
<input v-focus>

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: { … }
}
https://goo.gl/lx08Nj
main.js
New Vue({
…
mixins: [utils],
…
});

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>'
});
https://goo.gl/rkQXGx
HTML
<title message="Bem-vindo(a)!">

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

Hello vue

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a Hello vue

Semelhante a Hello vue (20)

Hello vue