Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vuejs
Search
Thulio Philipe
March 18, 2017
Programming
5
1k
Vuejs
Talk realizada no Front in Maceió 2017 sobre o Vuejs.
Thulio Philipe
March 18, 2017
Tweet
Share
More Decks by Thulio Philipe
See All by Thulio Philipe
CUI & Feature Flags
thulioph
0
67
+97% of Time Reduction to Onboarding New Metrics
thulioph
0
110
Cache, além do CTRL + F5
thulioph
0
96
CSS na era dos Componentes
thulioph
0
370
Recompose
thulioph
1
560
Styled Components
thulioph
0
390
Redux 101
thulioph
0
250
Cache
thulioph
2
260
Segurança de Aplicações Web - 101
thulioph
0
140
Other Decks in Programming
See All in Programming
漸進。
ssssota
0
1.7k
Devinで実践する!AIエージェントと協働する開発組織の作り方
masahiro_nishimi
6
2.9k
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
kazumura
1
150
生成AIで日々のエラー調査を進めたい
yuyaabo
0
390
少数精鋭エンジニアがフルスタック力を磨く理由 -そしてAI時代へ-
rebase_engineering
0
150
Step up the performance game with Spring Boot and Project Leyden
mhalbritter
0
170
Passkeys for Java Developers
ynojima
2
800
プロダクト改善のために新しいことを始める -useContextからの卒業、Zustandへ-
rebase_engineering
1
110
Effect の双対、Coeffect
yukikurage
4
1.2k
UPDATEがシステムを複雑にする? イミュータブルデータモデルのすすめ
shimomura
0
510
実践ArchUnit ~実例による検証パターンの紹介~
ogiwarat
2
230
技術懸念に立ち向かい 法改正を穏便に乗り切った話
pop_cashew
0
1.2k
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Speed Design
sergeychernyshev
30
980
Side Projects
sachag
454
42k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
How to Ace a Technical Interview
jacobian
276
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
Scaling GitHub
holman
459
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A Tale of Four Properties
chriscoyier
159
23k
Rails Girls Zürich Keynote
gr2m
94
13k
How STYLIGHT went responsive
nonsquared
100
5.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
Vue.js Thulio Philipe @thulioph Web Developer
Viu-Djêi-Éss (vuejs)
Thulio Philipe @thulioph Web Developer @labcodes Web Apps @unibratec Team
@devbeers " ⚙
Thulio Philipe @thulioph_ Web Developer @labcodes Web Apps @unibratec Team
@devbeers " ⚙
Atenção!
• O slides serão disponibilizados. Atenção!
• O slides serão disponibilizados. • Não se preocupe com
links, todos estão nos slides. Atenção!
• O slides serão disponibilizados. • Não se preocupe com
links, todos estão nos slides. • Tome nota de alguns termos, pode ser útil para uma pesquisa futura. Atenção!
• O slides serão disponibilizados. • Não se preocupe com
links, todos estão nos slides. • Tome nota de alguns termos, pode ser útil para uma pesquisa futura. • Esta palestra pode conter imagens de gatos. Atenção!
Conceitos
goo.gl/cgbP0l Components
components
components
Stateful goo.gl/knaTae
const hour = 1; const increment = () => hour
+ 1; increment(); // 2
goo.gl/knaTae Stateless
const hour = 1; const increment = (a) => a
+ 1; increment(hour);
Web components webcomponents.org
Uma coleção de web apis que permitem você criar novas
tags HTML reusaveis e totalmente customizadas.
Uma coleção de web apis que permitem você criar novas
tags HTML reusaveis e totalmente customizadas
1. Custom Elements 2. HTML imports 3. HTML Template 4.
Shadow DOM
1. Custom Elements 2. HTML imports 3. HTML Template 4.
Shadow DOM
Especificação que permite utilizar novos tipos de elementos DOM custom
elements
Define como você encapsula estilo e marcação no componente shadow
DOM
Webpack webpack.js.org
import bar from './bar'; bar(); app.js
export default function bar() { console.log('Hi, bar'); } bar.js
module.exports = { entry: './app.js', output: { filename: 'bundle.js' }
} webpack.config.js
<html> <head> ... </head> <body> ... <script src="bundle.js"></script> </body> </html>
index.html
Você sabia?
None
None
U$ 65.4 bilhões de dólares
None
• Huguinho • O líder
• Huguinho • O líder
• Zezinho • O mais esperto
• Zezinho • O mais esperto
• Luizinho • O mais criativo
• Luizinho • O mais criativo
Vuejs github.com/vuejs
Evan You @yyx990803 github.com/open-source/stories/yyx990803
github.com/vuejs/vue/pulse 46,148 5,938 194
Hello World
CDN vuejs.org/v2/guide
<html> <head> ... </head> <body> <div id="app"> {{ message }}
</div> <script src="https://unpkg.com/vue"></script> <script src="app.js"></script> </body> </html> index.html
new Vue({ el: '#app', data: { message: 'Hello Vue!' }
}); app.js
<html> <head> ... </head> <body> <div id="app"> Hello Vue! </div>
<script src="https://unpkg.com/vue"></script> <script src="app.js"></script> </body> </html> index.html
Vue-CLI github.com/vuejs/vue-cli
$ npm install -g vue-cli $ vue init webpack my-project
$ npm install -g vue-cli $ vue init webpack my-project
template nome do projeto
• ES2015+ • Webpack + vue-loader (.vue) • Testes •
e2e • Nightwatch • Unitários • Karma • Mocha + Chai + Sinon • Vue router • ESLint • PostCSS
Components
vuejs.org/v2/guide Estrutura [componentes globais]
Vue.component(tagName, options);
Vue.component('my-component', { template: '<h1>Hello World!</h1>' //options }); new Vue({ el:
'#app' });
<div id="app"> <my-component></my-component> </div>
<div id="app"> <h1>Hello World!</h1> </div>
vuejs.org/v2/guide Estrutura [single-file component]
<template> // marcação </template> <script> // comportamento </script> <style> //
estilo </style>
<template> <h1>{{ message }}</h1> </template> <script> export default { name:
'app', data() { return { message: 'Hello World' } } }; </script> <style></style>
Data vuejs.org/v2/guide
<template> <h1> {{ title }} </h1> </template>
export default { name: 'Título', data() { return { title:'Título
Aqui' } } }
<template> <h1> Título Aqui </h1> </template>
vuejs.org/v2/guide Lifecycle [hooks]
lifecycle
lifecycle
lifecycle
export default { name: 'Meu Componente', created() { console.warn('Created'); },
mounted() { console.warn('Mounted'); }, updated() { console.warn('Updated'); }, destroyed() { console.warn('Destroyed'); } }
Props vuejs.org/v2/guide
<my-contact :address="Rua deserto do Atacama"> </my-contact>
export default { name: 'Contato', props: ['address'] }
<p>{{ address }}</p>
<p>Rua deserto do Atacama</p>
Methods vuejs.org/v2/guide
<template> <button @click="toggle"> Mudar Status </button> <p>{{ active }}</p> </template>
export default { name: 'Toggle botão', methods: { toggle() {
this.active = !this.active; } }, data() { return { active: false } } }
Diretivas vuejs.org/v2/guide
• v-model • v-on • v-on:click="doSomething" • @click="doSomething" • v-bind
• :href="url", :class="myClass" • v-for • v-show • v-if
vuejs.org/v2/guide Modifiers
<form @submit.prevent="onSubmit"> </form>
Rotas
vue-router router.vuejs.org
$ npm install vue-router --save
index.html <body> ... <router-view></router-view> <script src="https://unpkg.com/ vue-router"> </script> </body>
import Foo from './components/Foo.vue' import Bar from './components/Bar.vue' export default
= [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] routes.js
import Vue from 'vue' import VueRouter from 'vue-router' import routes
from './routes' Vue.use(VueRouter); const router = new VueRouter({ routes }); export default router; index.js
import Vue from 'vue' import router from './index' new Vue({
el:'#app', router }); main.js
Gerenciando estados
vuex vuex.vuejs.org
$ npm install vuex --save
<body> ... <script src="https://unpkg.com/vuex"> </script> </body> index.html
vuex
Testes
vuejs.org/v2/guide Teste unitário
None
MyComponent .vue
<template> <span>{{ message }}</span> </template>
export default { data () { return { message: 'Hello!'
} }, created () { this.message = 'Bye!' } }
MyComponent .test.js
import Vue from 'vue' import MyComponent from 'path/to/ MyComponent.vue'
describe('MyComponent Spec', () => { it('Sets the correct default data',
() => { const defaultData = MyComponent.data(); expect(defaultData.message).toBe('Hello!'); }); });
github.com/vuejs-templates Teste e2e
None
MyComponent .vue
<template> <div id="app"> <h1>{{message}}</h1> </div> </template> <script> export default {
name: 'meu app', data() { return { message: 'Olá mundo!', }; } }; </script>
MyComponent .test.js
const devServer = browser.globals.devServerURL; browser .url(devServer) .waitForElementVisible('#app', 5000) .assert.containsText('h1', 'Olá
mundo!') .end();
Mobile e Desktop
Framework 7 framework7.io
github.com/nolimits4web/framework7 9,107 1,981 58
Onsen UI onsen.io
github.com/OnsenUI/OnsenUI 4,406 575 92
VOnic github.com/wangdahoo/vonic
github.com/wangdahoo/vonic 1,542 214 8
Comunidade
i18n
Debug github.com/vuejs/vue-devtools
Github github.com/vuejs/awesome-vue
Slack slack.vuejs-brasil.com.br
E-mail vuejsfeed.com
Fórum forum.vuejs.org
Artigos vuejs-brasil.com.br
Demo
• Vuejs • @2.0 • Travis • Karma + Jasmine
• Leaflet • Mapa • Firebase • database • auth • Bulma • Heroku
goo.gl/dgqlZ1
None
Thulio Philipe @thulioph Web Developer goo.gl/idCGmm Obrigado!