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 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”>
<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>
Veja o resultado ⤵
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>
Veja o resultado ⤵
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>
Veja o resultado ⤵
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
}
}
Veja o resultado ⤵
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?');
}
}
Veja o resultado ⤵
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;
}
}
Veja o resultado ⤵
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();
}
}
}
Veja o resultado ⤵
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!’
}
}
Veja o resultado ⤵
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);
}
}
Veja o resultado ⤵
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
Veja o resultado ⤵
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();
}
});
Veja o resultado ⤵
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: { … }
}
Veja o resultado ⤵
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>'
});
Veja o resultado ⤵
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

  • 1.
    Gabriel Colombo Hello.vue Introdução aoframework que vai mudar a sua vida
  • 2.
    Hello.vue Sobre mim GabrielColombo 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 doworkshop 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.
  • 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 atualdo 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.
  • 8.
    Hello.vue Versões 1 Versão0.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 queusar 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.
  • 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 VueInstance 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ãousados 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 Propriedadescomputadas 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 intuitoprincipal 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émdas 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ãoestruturas 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.
  • 30.
    Hello.vue Foi bomenquanto durou :D Obrigado!
  • 31.
    Hello.vue Foi bomenquanto durou :D