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

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

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

 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
660
2023 CSS
Avatar for にしはら nishiharatsubasa
7
4.6k
vue_component_from_composable
Avatar for にしはら nishiharatsubasa
2
610
エルデンリングに学ぶ道に迷わない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
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
55
5.6k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
21k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
42
7.5k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
172
14k
Agile that works and the tools we love
Avatar for Rasmus Luckow-Nielsen rasmusluckow
329
21k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
329
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
5
620
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
6
650
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
180
53k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
3.9k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k

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/