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

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

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

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

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

Avatar for にしはら

にしはら

March 06, 2024
Tweet

More Decks by にしはら

See All by にしはら
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
Avatar for にしはら nishiharatsubasa
3
6k
速くて安いWebサイトを作る
Avatar for にしはら nishiharatsubasa
21
18k
スーパーマリオRPGのリメイク版の変更点からみるUX
Avatar for にしはら nishiharatsubasa
1
980
2023 CSS
Avatar for にしはら nishiharatsubasa
7
4.8k
vue_component_from_composable
Avatar for にしはら nishiharatsubasa
2
710
エルデンリングに学ぶ道に迷わないUIと世界観
Avatar for にしはら nishiharatsubasa
0
1.5k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
Avatar for にしはら nishiharatsubasa
2
7.2k

Featured

See All Featured
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
SEO Brein meetup: CTRL+C is not how to scale international SEO
Avatar for Linda Hogenes lindahogenes
0
2.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
463
34k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
26k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
How to make the Groovebox
Avatar for あそなす asonas
2
2k
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
140
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
73

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/