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
Introdução ao Vue
Search
Manoel Freitas
March 15, 2019
Programming
0
41
Introdução ao Vue
Uma pequena introdução ao vuejs para um workshop feito na Accenture
Manoel Freitas
March 15, 2019
Tweet
Share
More Decks by Manoel Freitas
See All by Manoel Freitas
Atomic Design
manoelfreitasce
0
44
VocÊ conhece sua ferramenta?
manoelfreitasce
0
26
How far english take me in developer's world?
manoelfreitasce
1
19
Other Decks in Programming
See All in Programming
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
340
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Navigating Dependency Injection with Metro
zacsweers
3
2.5k
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
チームのテスト力を鍛える
goyoki
3
720
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
1.8k
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
🔨 小さなビルドシステムを作る
momeemt
4
690
はじめてのMaterial3 Expressive
ym223
2
880
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
BBQ
matthewcrist
89
9.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Bash Introduction
62gerente
615
210k
Done Done
chrislema
185
16k
The Cult of Friendly URLs
andyhume
79
6.6k
For a Future-Friendly Web
brad_frost
180
9.9k
Transcript
INTRODUÇÃO AO VUE
INTRODUÇÃO AO VUE
OI EU SOU O ... MANOEL! • Cearence • Há
um ano na Accenture • E em São Paulo • Front End! @manoeljosefneto
O QUE VAMOS VER HOJE? • O que é vue?
• Attribute Binding • Conditional Rendering • List Rendering • Event Handling • Class & Style Binding • Computed Properties • Components
O QUE É VUE ? new Vue({options}) <div id="app"> Vue
age aqui dentro <div> Uma Lib Um framework Um Feiticeiro Ele é demais
EXPRESSÕES E REATIVIDADE {{'OI'}} {{1+ 1}} {{2% 2 === 0?
'par': 'impar'}} {{variavel}}
ATRIBUTE BINDING E DATA BINDING v-bind:atributo="data" O atalho é :
<img :src="image" :alt="altText">
CONDITIONAL RENDERING v-if="expressão" v-else v-else-if="expressão" <div id="app"> <p v-if="correct">Acertou mizeravi!</p>
<p v-else>Errou!!</p> </div> new Vue({ data: { correct: true } })
CONDITIONAL RENDERING v-show="condição" <div id="app"> <p v-show="hide"> Hide and Seek
</p> </div> new Vue({ data: { hide: false } })
CONDITIONAL RENDERING RESUMO • v-if • v-else-if • v-else Remove
completamente o html v-show Adiciona o estilo: display: none no html Ambos avaliam se o html deve ou não ser renderizado
LIST RENDERING v-for=“item in array” :key=“id” <ul v-for=“item in list”
:key=“item.id” > <li>{{item.name}}</li> </ul>
LIST RENDERING v-for=“(item, index) array” :key=“index” <ul v-for=“(item, index) in
list” :key=“index” > <li>{{item}}</li> </ul>
EVENT HANDLING v-on:evento="metodo" O atalho é: @ new Vue({ methods:
{ onMouseOver() { console.log('Over') } } }) <p @mouseover="onMouseOver"> Sobre o mouse </p>
EVENT HANDLING Você pode acessar o evento com a variável
especial $event new Vue({ methods: { onMouseOver($event) { console.log($event) } } }) <p @mouseover="expressão ou método"> Sobre o mouse </p>
CLASS E STYLE BINDING :style="{atributo: valor}" :class="{className: condicional}" <button :class="{
disabledButton: !enabled }"> Botão maroto </button> :class="array de classes " :style="array de atributos" <div class="box" :style="{ backgroundColor: variantColor }"> </div> new Vue({ data: { enabled: true, variantColor: '#acc' } })
COMPUTED PROPERTIES <div id="app"> {{ message.split('').reverse().join('') }} </div> new Vue({
data: { message: 'accenture' } })
COMPUTED PROPERTIES <div id="app"> {{ reversedMessage }} </div> new Vue({
data: { message: 'accenture' }, computed: { reversedMessage() { return this.message.split('').reverser().join('') } } })
COMPONENTS Vue.component('component-name',{options})
OBRIGADO! @manoeljosefneto