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.4k
defineModelを使って気軽にコンポーネントのv-modelをやろう
Vue 3.4から正式版になったdefineModelを使ったコンポーネントv-modelについての紹介です
にしはら
March 06, 2024
Tweet
Share
More Decks by にしはら
See All by にしはら
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
速くて安いWebサイトを作る
nishiharatsubasa
17
17k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
750
2023 CSS
nishiharatsubasa
7
4.7k
vue_component_from_composable
nishiharatsubasa
2
660
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.4k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7.1k
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Into the Great Unknown - MozCon
thekraken
40
2.1k
BBQ
matthewcrist
89
9.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Embracing the Ebb and Flow
colly
88
4.9k
Navigating Team Friction
lara
190
15k
GitHub's CSS Performance
jonrohan
1032
470k
RailsConf 2023
tenderlove
30
1.3k
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/