Vue.jsで直接DOM操作 したい時のTips
by
SoichiroKatsuki
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Vue.jsͰDOMૢ࡞ ͍ͨ࣌͠ͷTips FukuokaJS #6 2018/09/13 Ճ݄ फҰ
Slide 2
Slide 2 text
ࣗݾհ ʲ໊લʳ ɹՃ݄ फҰɹɹˏZuckey_ ʲॴଐʳ ɹגࣜձࣾJετϦʔϜ ʲ;ͩΜ͍ͬͯΔͷʳ ɹC# Azure ͳͲ ʲझຯʳ ɹϩʔυόΠΫɾےτϨ
Slide 3
Slide 3 text
Vue.js ͬͯ·͔͢ʁ
Slide 4
Slide 4 text
DOMΛҙࣝ͠ͳͯ͘ྑͯ͘ ͍͍͢Ͱ͢ΑͶʂ
Slide 5
Slide 5 text
Ͱͨ·ʹDOMΛૢ࡞ͤ͟Δ Λಘͳ͍ͱ͖ͳ͍Ͱ͔͢ʁ
Slide 6
Slide 6 text
͔ͤͬ͘Vue.jsͬͯΔͷʹDOMૢ࡞ʁ ɾDOMૢ࡞͢ΔλΠϓͷCSSϑϨʔϜϫʔΫ ɹ͕Ͳ͏͍͍ͯͨ͠ɹ ɹɹʢMaterialize, BootstrapͳͲʣ ɾ༻ͮ͠Β͍ϓϥάΠϯ͕ඞཁɹ ɹɹʢಈըϓϨΠϠʔͳͲʣ
Slide 7
Slide 7 text
ᶃ inputͷͷJS͔Βͷมߋʹҙ ɾVue.jsΛհͣ͞ʹ֎෦ͷJS͔ΒinputͷΛมߋ ɹͨ͠߹ɺVue.jsଆͰมߋ͕ݕ͞Εͳ͍ͷͰɺ ɹv-on:channgeͰϞσϧͷΛߋ৽͢Δ
Slide 8
Slide 8 text
ᶄ ΧελϜσΟϨΫςΟϒΛ͏ ɾDOM͕࣮֬ʹ͋Δ͜ͱΛલఏʹͨ͠ૢ࡞ ΧελϜσΟϨΫςΟϒͷinsertedͰߦ͏ ϑοΫؔͷछྨͳͲৄͪ͘͜͠Β https://jp.vuejs.org/v2/guide/custom-directive.html
Slide 9
Slide 9 text
ᶅ beforeDestroyΛ͏ ɾొ͍ͯͨ͠ΠϕϯτϦεφʔΛ ɹremoveEventListenerͰআ͢Δ ɾϓϥάΠϯͷDOMΠϯελϯεΛআ͢Δ ɹॲཧΛߦ͏
Slide 10
Slide 10 text
ᶆDOMΛݩʹ͍ͨ࣌͠v-ifͰ ɾ֎෦ͷJSͰߦͬͨ ɹDOMͷมߋΛ ɹϦηοτ͍ͨ͠ ɹͱ͖v-ifΛ͏
Slide 11
Slide 11 text
·ͱΊ ɾۃྗDOMΛૢ࡞͢Δͷ ɹ߇͑·͠ΐ͏ʂ ɾͲ͏ͯ͠ૢ࡞͠ͳ͍ͱ͍͚ͳ͍ ɹͱ͖ʹհͨ͠Tips͕ʹཱͯ ɹ͏Ε͍͠Ͱ͢