Upgrade to Pro — share decks privately, control downloads, hide ads and more …

defineModelを使って気軽にコンポーネントのv-modelをやろう

Avatar for にしはら にしはら
March 06, 2024
3
1.4k

 defineModelを使って気軽にコンポーネントのv-modelをやろう

Vue 3.4から正式版になったdefineModelを使ったコンポーネントv-modelについての紹介です

Avatar for にしはら

にしはら

March 06, 2024
Tweet

More Decks by にしはら

See All by にしはら
速くて安いWebサイトを作る
Avatar for にしはら nishiharatsubasa
17
16k
スーパーマリオRPGのリメイク版の変更点からみるUX
Avatar for にしはら nishiharatsubasa
1
700
2023 CSS
Avatar for にしはら nishiharatsubasa
7
4.7k
vue_component_from_composable
Avatar for にしはら nishiharatsubasa
2
630
エルデンリングに学ぶ道に迷わないUIと世界観
Avatar for にしはら nishiharatsubasa
0
1.3k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
Avatar for にしはら nishiharatsubasa
2
7k

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.8k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
Avatar for Stéphanie Walter stephaniewalter
283
13k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.6k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
301
21k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
351
21k
Faster Mobile Websites
Avatar for Dean Hume deanohume
308
31k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
332
22k

Transcript

  1. defineModelΛ࢖ͬͯ ؾܰʹίϯϙʔωϯτͷ v-modelΛ΍Ζ͏

  2. ੢ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social

  3. ICS MEDIA ͰهࣄΛॻ͍͍ͯ·͢ HTML ʹͪΐ͍଍͠ͰͰ͖Δʂ Vue.js ͰαΫοͱಈ͖Λ͚ͭΔํ๏ ҙ֎ͱԞਂ͍CSSͷfont-weightͷ࿩ https://ics.media/entry/230830/ https://ics.media/entry/210908/

    NEW !

  4. ݸਓ։ൃͷҰ؀ͰσδλϧிσβΠϯγεςϜͷ Vue ࣮૷ΛΦʔϓϯιʔεͰਐΊ͍ͯͨΓ΋͠·͢

  5. ศརͳv-model

  6. v-modelͰ૒ํ޲όΠϯσΟϯά v-model Λ࢖͏ͱ inputλάͷೖྗ஋ͷ औಘͱૠೖ͕؆୯ʹͰ͖·͢

  7. v-model͸ίϯϙʔωϯτͰ΋࢖͑Δ v-model͸HTMLλά ͚ͩͰͳ͘ίϯϙʔωϯτʹ΋ ར༻Ͱ͖Δ

  8. ͔͠͠ίϯϙʔωϯτͰv-modelΛར༻͢Δͷ͸ গ͠هड़͕໘౗ͩͬͨ

  9. ͦ͜Ͱ defineModel

  10. defineModelΛ࢖ͬͨهड़ defineModel()Λ࢖͑͹ ؆୯ʹv-modelԽͰ͖Δ ໘౗ͳprops ΍emitͷఆٛͳ͠ʂ

  11. defineModelͷಛ௃ defineModel Ͱ ఆٛͨ͠ม਺͸ refͱͯ͠ѻ͑Δ

  12. defineModelͰίϯϙʔωϯτΛ v-modelԽ͢ΔϝϦοτ ɾίϯϙʔωϯτ੍࡞ऀ͸؆୯ʹίϯϙʔωϯτΛv-modelԽ ɾdefineModel Ͱఆٛͨ͠΋ͷ͸ refͱಉ͡ͳͷͰѻָ͍͕ ɾίϯϙʔωϯτͷར༻ऀ͸಺෦࣮૷Λؾʹͤͣ v-modelͰ஋Λ࿈ܞͰ͖Δ

  13. defineModelΛ࢖ͬͯ ίϯϙʔωϯτΛͲΜͲΜv-modelԽ͠Αͥ ·ͱΊ

  14. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS Ͱ͸ϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/