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
38
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
37
VocÊ conhece sua ferramenta?
manoelfreitasce
0
24
How far english take me in developer's world?
manoelfreitasce
1
15
Other Decks in Programming
See All in Programming
JavaScript Closure
asoluka
0
1.1k
From Spring Boot 2 to Spring Boot 3 with Java 21 and Jakarta EE
ivargrimstad
0
830
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.9k
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
Next.js App Router
quramy
12
2k
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
VS Code をプロダクトにどう取り込むか
onomax
1
780
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
310
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
190
Hanami and htmx
bkuhlmann
0
230
ペパボOpenTelemetry革命
pyama86
1
150
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
570
Featured
See All Featured
Statistics for Hackers
jakevdp
790
220k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Designing the Hi-DPI Web
ddemaree
276
33k
Building Applications with DynamoDB
mza
88
5.6k
How STYLIGHT went responsive
nonsquared
92
4.8k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
We Have a Design System, Now What?
morganepeng
43
6.8k
Infographics Made Easy
chrislema
238
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Web Components: a chance to create the future
zenorocha
306
41k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
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