Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
defineModelを使って気軽にコンポーネントのv-modelをやろう
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
にしはら
March 06, 2024
3
1.5k
defineModelを使って気軽にコンポーネントのv-modelをやろう
Vue 3.4から正式版になったdefineModelを使ったコンポーネントv-modelについての紹介です
にしはら
March 06, 2024
Tweet
Share
More Decks by にしはら
See All by にしはら
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.9k
速くて安いWebサイトを作る
nishiharatsubasa
21
18k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
970
2023 CSS
nishiharatsubasa
7
4.8k
vue_component_from_composable
nishiharatsubasa
2
700
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.4k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7.2k
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
135
9.7k
Believing is Seeing
oripsolob
1
48
The Language of Interfaces
destraynor
162
26k
AI Search: Where Are We & What Can We Do About It?
aleyda
0
6.9k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.2k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
170
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
130
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
uxyall
0
250
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
210
New Earth Scene 8
popppiees
1
1.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Transcript
defineModelΛͬͯ ؾܰʹίϯϙʔωϯτͷ v-modelΛΖ͏
ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social
ICS MEDIA ͰهࣄΛॻ͍͍ͯ·͢ HTML ʹͪΐ͍͠ͰͰ͖Δʂ Vue.js ͰαΫοͱಈ͖Λ͚ͭΔํ๏ ҙ֎ͱԞਂ͍CSSͷfont-weightͷ https://ics.media/entry/230830/ https://ics.media/entry/210908/
NEW !
ݸਓ։ൃͷҰͰσδλϧிσβΠϯγεςϜͷ Vue ࣮ΛΦʔϓϯιʔεͰਐΊ͍ͯͨΓ͠·͢
ศརͳv-model
v-modelͰํόΠϯσΟϯά v-model Λ͏ͱ inputλάͷೖྗͷ औಘͱૠೖ͕؆୯ʹͰ͖·͢
v-modelίϯϙʔωϯτͰ͑Δ v-modelHTMLλά ͚ͩͰͳ͘ίϯϙʔωϯτʹ ར༻Ͱ͖Δ
͔͠͠ίϯϙʔωϯτͰv-modelΛར༻͢Δͷ গ͠هड़͕໘ͩͬͨ
ͦ͜Ͱ defineModel
defineModelΛͬͨهड़ defineModel()Λ͑ ؆୯ʹv-modelԽͰ͖Δ ໘ͳprops emitͷఆٛͳ͠ʂ
defineModelͷಛ defineModel Ͱ ఆٛͨ͠ม refͱͯ͠ѻ͑Δ
defineModelͰίϯϙʔωϯτΛ v-modelԽ͢ΔϝϦοτ ɾίϯϙʔωϯτ੍࡞ऀ؆୯ʹίϯϙʔωϯτΛv-modelԽ ɾdefineModel Ͱఆٛͨ͠ͷ refͱಉ͡ͳͷͰѻָ͍͕ ɾίϯϙʔωϯτͷར༻ऀ෦࣮Λؾʹͤͣ v-modelͰΛ࿈ܞͰ͖Δ
defineModelΛͬͯ ίϯϙʔωϯτΛͲΜͲΜv-modelԽ͠Αͥ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS ͰϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/