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
Vue.jsで直接DOM操作 したい時のTips
Search
SoichiroKatsuki
September 13, 2018
1
4.4k
Vue.jsで直接DOM操作 したい時のTips
FukuokaJS #6 のLT資料です。
SoichiroKatsuki
September 13, 2018
Tweet
Share
More Decks by SoichiroKatsuki
See All by SoichiroKatsuki
FukuokaJS #11 今さら聞けないWebP対応
soichirokatsuki
0
91
画像の遅延 ローディングの話
soichirokatsuki
1
430
VueのUIフレームワークを試してみた
soichirokatsuki
1
680
Azureでお手軽動画配信
soichirokatsuki
1
390
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
A Modern Web Designer's Workflow
chriscoyier
694
190k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Done Done
chrislema
184
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Building Applications with DynamoDB
mza
95
6.5k
What's in a price? How to price your products and services
michaelherold
246
12k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Transcript
Vue.jsͰDOMૢ࡞ ͍ͨ࣌͠ͷTips FukuokaJS #6 2018/09/13 Ճ݄ फҰ
ࣗݾհ ʲ໊લʳ ɹՃ݄ फҰɹɹˏZuckey_ ʲॴଐʳ ɹגࣜձࣾJετϦʔϜ ʲ;ͩΜ͍ͬͯΔͷʳ ɹC# Azure ͳͲ
ʲझຯʳ ɹϩʔυόΠΫɾےτϨ
Vue.js ͬͯ·͔͢ʁ
DOMΛҙࣝ͠ͳͯ͘ྑͯ͘ ͍͍͢Ͱ͢ΑͶʂ
Ͱͨ·ʹDOMΛૢ࡞ͤ͟Δ Λಘͳ͍ͱ͖ͳ͍Ͱ͔͢ʁ
͔ͤͬ͘Vue.jsͬͯΔͷʹDOMૢ࡞ʁ ɾDOMૢ࡞͢ΔλΠϓͷCSSϑϨʔϜϫʔΫ ɹ͕Ͳ͏͍͍ͯͨ͠ɹ ɹɹʢMaterialize, BootstrapͳͲʣ ɾ༻ͮ͠Β͍ϓϥάΠϯ͕ඞཁɹ ɹɹʢಈըϓϨΠϠʔͳͲʣ
ᶃ inputͷͷJS͔Βͷมߋʹҙ ɾVue.jsΛհͣ͞ʹ֎෦ͷJS͔ΒinputͷΛมߋ ɹͨ͠߹ɺVue.jsଆͰมߋ͕ݕ͞Εͳ͍ͷͰɺ ɹv-on:channgeͰϞσϧͷΛߋ৽͢Δ
ᶄ ΧελϜσΟϨΫςΟϒΛ͏ ɾDOM͕࣮֬ʹ͋Δ͜ͱΛલఏʹͨ͠ૢ࡞ ΧελϜσΟϨΫςΟϒͷinsertedͰߦ͏ ϑοΫؔͷछྨͳͲৄͪ͘͜͠Β https://jp.vuejs.org/v2/guide/custom-directive.html
ᶅ beforeDestroyΛ͏ ɾొ͍ͯͨ͠ΠϕϯτϦεφʔΛ ɹremoveEventListenerͰআ͢Δ ɾϓϥάΠϯͷDOMΠϯελϯεΛআ͢Δ ɹॲཧΛߦ͏
ᶆDOMΛݩʹ͍ͨ࣌͠v-ifͰ ɾ֎෦ͷJSͰߦͬͨ ɹDOMͷมߋΛ ɹϦηοτ͍ͨ͠ ɹͱ͖v-ifΛ͏
·ͱΊ ɾۃྗDOMΛૢ࡞͢Δͷ ɹ߇͑·͠ΐ͏ʂ ɾͲ͏ͯ͠ૢ࡞͠ͳ͍ͱ͍͚ͳ͍ ɹͱ͖ʹհͨ͠Tips͕ʹཱͯ ɹ͏Ε͍͠Ͱ͢