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

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

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

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

FukuokaJS #6 のLT資料です。

B535c947f6a7fdd35fbf3f68fff533d0?s=128

SoichiroKatsuki

September 13, 2018
Tweet

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͕໾ʹཱͯ͹ ɹ͏Ε͍͠Ͱ͢