Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue.jsで直接DOM操作 したい時のTips
SoichiroKatsuki
September 13, 2018
1
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
37
画像の遅延 ローディングの話
soichirokatsuki
1
250
VueのUIフレームワークを試してみた
soichirokatsuki
1
510
Azureでお手軽動画配信
soichirokatsuki
1
210
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
21
5.5k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
How to Ace a Technical Interview
jacobian
266
21k
Why Our Code Smells
bkeepers
PRO
324
55k
Optimizing for Happiness
mojombo
365
63k
Creatively Recalculating Your Daily Design Routine
revolveconf
207
10k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
107
16k
Practical Orchestrator
shlominoach
178
8.7k
The World Runs on Bad Software
bkeepers
PRO
57
5.4k
Intergalactic Javascript Robots from Outer Space
tanoku
260
25k
Mobile First: as difficult as doing things right
swwweet
213
7.5k
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͕ʹཱͯ ɹ͏Ε͍͠Ͱ͢