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
13
14k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
580
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
Producing Creativity
orderedlist
PRO
344
39k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Side Projects
sachag
452
42k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Code Review Best Practice
trishagee
67
18k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
33
2.8k
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/