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 にしはら
速くて安いWebサイトを作る
nishiharatsubasa
17
16k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
740
2023 CSS
nishiharatsubasa
7
4.7k
vue_component_from_composable
nishiharatsubasa
2
650
エルデンリングに学ぶ道に迷わない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
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Thoughts on Productivity
jonyablonski
70
4.9k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Side Projects
sachag
455
43k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
A designer walks into a library…
pauljervisheath
209
24k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
BBQ
matthewcrist
89
9.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/