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

Vue.jsで直接DOM操作 したい時のTips

B535c947f6a7fdd35fbf3f68fff533d0?s=47 SoichiroKatsuki
September 13, 2018
1
4k

Vue.jsで直接DOM操作 したい時のTips

FukuokaJS #6 のLT資料です。

B535c947f6a7fdd35fbf3f68fff533d0?s=128

SoichiroKatsuki

September 13, 2018
Tweet

More Decks by SoichiroKatsuki

See All by SoichiroKatsuki
FukuokaJS #11 今さら聞けないWebP対応
B535c947f6a7fdd35fbf3f68fff533d0?s=48 soichirokatsuki
0
37
画像の遅延 ローディングの話
B535c947f6a7fdd35fbf3f68fff533d0?s=48 soichirokatsuki
1
250
VueのUIフレームワークを試してみた
B535c947f6a7fdd35fbf3f68fff533d0?s=48 soichirokatsuki
1
510
Azureでお手軽動画配信
B535c947f6a7fdd35fbf3f68fff533d0?s=48 soichirokatsuki
1
210

Featured

See All Featured
Testing 201, or: Great Expectations
A9704266587836f7e784235e5073b93e?s=48 jmmastey
21
5.5k
How GitHub Uses GitHub to Build GitHub
78b475797a14c84799063c7cd073962f?s=48 holman
465
280k
How to Ace a Technical Interview
2f5463832ccb768ccb4a1ca3607c27ef?s=48 jacobian
266
21k
Why Our Code Smells
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
324
55k
Optimizing for Happiness
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
365
63k
Creatively Recalculating Your Daily Design Routine
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
207
10k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
173
8.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
107
16k
Practical Orchestrator
168ccec72eee0530b818d44f3fedaacf?s=48 shlominoach
178
8.7k
The World Runs on Bad Software
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
57
5.4k
Intergalactic Javascript Robots from Outer Space
6804f1775cb4babfcc3851298566fbce?s=48 tanoku
260
25k
Mobile First: as difficult as doing things right
0fe2973fa8d27d96547e43322341183a?s=48 swwweet
213
7.5k

Transcript

  1. Vue.jsͰ௚઀DOMૢ࡞ ͍ͨ࣌͠ͷTips FukuokaJS #6 2018/09/13 Ճ݄ फҰ࿠

  2. ࣗݾ঺հ ʲ໊લʳ ɹՃ݄ फҰ࿠ɹɹˏZuckey_ ʲॴଐʳ ɹגࣜձࣾJετϦʔϜ ʲ;ͩΜ࢖͍ͬͯΔ΋ͷʳ ɹC# Azure ͳͲ

    ʲझຯʳ ɹϩʔυόΠΫɾےτϨ

  3. Vue.js ࢖ͬͯ·͔͢ʁ

  4. DOMΛҙࣝ͠ͳͯ͘ྑͯ͘ ࢖͍΍͍͢Ͱ͢ΑͶʂ

  5. Ͱ΋ͨ·ʹ௚઀DOMΛૢ࡞ͤ͟Δ Λಘͳ͍ͱ͖ͳ͍Ͱ͔͢ʁ

  6. ͔ͤͬ͘Vue.js࢖ͬͯΔͷʹ௚઀DOMૢ࡞ʁ ɾ௚઀DOMૢ࡞͢ΔλΠϓͷCSSϑϨʔϜϫʔΫ ɹ͕Ͳ͏ͯ͠΋࢖͍͍ͨɹ ɹɹʢMaterialize, BootstrapͳͲʣ ɾ୅༻ͮ͠Β͍ϓϥάΠϯ͕ඞཁɹ ɹɹʢಈըϓϨΠϠʔͳͲʣ

  7. ᶃ inputͷ஋ͷJS͔Βͷมߋʹ஫ҙ ɾVue.jsΛհͣ͞ʹ֎෦ͷJS͔Βinputͷ஋Λมߋ ɹͨ͠৔߹ɺVue.jsଆͰมߋ͕ݕ஌͞Εͳ͍ͷͰɺ ɹv-on:channgeͰϞσϧͷ஋Λߋ৽͢Δ

  8. ᶄ ΧελϜσΟϨΫςΟϒΛ࢖͏ ɾDOM͕࣮֬ʹ͋Δ͜ͱΛલఏʹͨ͠ૢ࡞ ͸ΧελϜσΟϨΫςΟϒͷinsertedͰߦ͏ ϑοΫؔ਺ͷछྨͳͲৄ͘͠͸ͪ͜Β https://jp.vuejs.org/v2/guide/custom-directive.html

  9. ᶅ beforeDestroyΛ࢖͏ ɾొ࿥͍ͯͨ͠ΠϕϯτϦεφʔΛ ɹremoveEventListenerͰ࡟আ͢Δ ɾϓϥάΠϯͷDOM΍ΠϯελϯεΛ࡟আ͢Δ ɹॲཧΛߦ͏

  10. ᶆDOMΛݩʹ໭͍ͨ࣌͠͸v-ifͰ ɾ֎෦ͷJSͰߦͬͨ ɹDOMͷมߋΛ ɹϦηοτ͍ͨ͠ ɹͱ͖͸v-ifΛ࢖͏

  11. ·ͱΊ ɾۃྗDOMΛ௚઀ૢ࡞͢Δͷ͸ ɹ߇͑·͠ΐ͏ʂ ɾͲ͏ͯ͠΋ૢ࡞͠ͳ͍ͱ͍͚ͳ͍ ɹͱ͖ʹ঺հͨ͠Tips͕໾ʹཱͯ͹ ɹ͏Ε͍͠Ͱ͢