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
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
Design Foundational Data Engineering Observability
sucitw
3
200
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
180
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.2k
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
160
AIでLINEスタンプを作ってみた
eycjur
1
230
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
400
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Making Projects Easy
brettharned
117
6.4k
Producing Creativity
orderedlist
PRO
347
40k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Facilitating Awesome Meetings
lara
55
6.5k
Context Engineering - Making Every Token Count
addyosmani
3
56
GitHub's CSS Performance
jonrohan
1032
460k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
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