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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
5.9k
速くて安いWebサイトを作る
Avatar for にしはら nishiharatsubasa
21
18k
スーパーマリオRPGのリメイク版の変更点からみるUX
Avatar for にしはら nishiharatsubasa
1
970
2023 CSS
Avatar for にしはら nishiharatsubasa
7
4.8k
vue_component_from_composable
Avatar for にしはら nishiharatsubasa
2
700
エルデンリングに学ぶ道に迷わないUIと世界観
Avatar for にしはら nishiharatsubasa
0
1.4k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
Avatar for にしはら nishiharatsubasa
2
7.2k

Featured

See All Featured
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
160
Side Projects
Avatar for Sacha Greif sachag
455
43k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
110
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
360
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
54
8k
Scaling GitHub
Avatar for Zach Holman holman
464
140k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
32
2k
Done Done
Avatar for chrislema chrislema
186
16k

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/