Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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
1.7k
3

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

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

Avatar for にしはら

にしはら

March 06, 2024

More Decks by にしはら

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

Featured

See All Featured
<Decoding/> the Language of Devs - We Love SEO 2024
Avatar for Nikki Halliwell nikkihalliwell
1
380
BBQ
Avatar for Matthew Crist matthewcrist
90
10k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
24k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
2
1.9k
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
Avatar for Ines Montani inesmontani
PRO
3
2.5k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
470
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
630
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
247
13k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
6
55k
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
3.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.4k

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/