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
defineModelを使って気軽にコンポーネントのv-modelをやろう
Search
にしはら
March 06, 2024
3
1.2k
defineModelを使って気軽にコンポーネントのv-modelをやろう
Vue 3.4から正式版になったdefineModelを使ったコンポーネントv-modelについての紹介です
にしはら
March 06, 2024
Tweet
Share
More Decks by にしはら
See All by にしはら
速くて安いWebサイトを作る
nishiharatsubasa
10
12k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
520
2023 CSS
nishiharatsubasa
7
4.6k
vue_component_from_composable
nishiharatsubasa
2
580
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.2k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
6.9k
Featured
See All Featured
A better future with KSS
kneath
238
17k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Practical Orchestrator
shlominoach
186
10k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Designing for Performance
lara
604
68k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Into the Great Unknown - MozCon
thekraken
35
1.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Being A Developer After 40
akosma
89
590k
GraphQLとの向き合い方2022年版
quramy
44
13k
Transcript
defineModelΛͬͯ ؾܰʹίϯϙʔωϯτͷ v-modelΛΖ͏
ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social
ICS MEDIA ͰهࣄΛॻ͍͍ͯ·͢ HTML ʹͪΐ͍͠ͰͰ͖Δʂ Vue.js ͰαΫοͱಈ͖Λ͚ͭΔํ๏ ҙ֎ͱԞਂ͍CSSͷfont-weightͷ https://ics.media/entry/230830/ https://ics.media/entry/210908/
NEW !
ݸਓ։ൃͷҰͰσδλϧிσβΠϯγεςϜͷ Vue ࣮ΛΦʔϓϯιʔεͰਐΊ͍ͯͨΓ͠·͢
ศརͳv-model
v-modelͰํόΠϯσΟϯά v-model Λ͏ͱ inputλάͷೖྗͷ औಘͱૠೖ͕؆୯ʹͰ͖·͢
v-modelίϯϙʔωϯτͰ͑Δ v-modelHTMLλά ͚ͩͰͳ͘ίϯϙʔωϯτʹ ར༻Ͱ͖Δ
͔͠͠ίϯϙʔωϯτͰv-modelΛར༻͢Δͷ গ͠هड़͕໘ͩͬͨ
ͦ͜Ͱ defineModel
defineModelΛͬͨهड़ defineModel()Λ͑ ؆୯ʹv-modelԽͰ͖Δ ໘ͳprops emitͷఆٛͳ͠ʂ
defineModelͷಛ defineModel Ͱ ఆٛͨ͠ม refͱͯ͠ѻ͑Δ
defineModelͰίϯϙʔωϯτΛ v-modelԽ͢ΔϝϦοτ ɾίϯϙʔωϯτ੍࡞ऀ؆୯ʹίϯϙʔωϯτΛv-modelԽ ɾdefineModel Ͱఆٛͨ͠ͷ refͱಉ͡ͳͷͰѻָ͍͕ ɾίϯϙʔωϯτͷར༻ऀ෦࣮Λؾʹͤͣ v-modelͰΛ࿈ܞͰ͖Δ
defineModelΛͬͯ ίϯϙʔωϯτΛͲΜͲΜv-modelԽ͠Αͥ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS ͰϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/