Vue.js超入門（ライブ）/ Vue.js introduction(Live Coding)

意外と刺さるのでは？ということで #sakenight6 でVue.jsのライブコーディングをやってみました

Transcript

1. Vue.js超入門（ライブ） Ռ෺Ϧϯ@FruitRiin 2019/01/26 ʲୈ6ճʳϑϩϯτΤϯυ× ϏΞόογϡ ॳ৺ऀษڧձ in੢৽॓
2. #sakenight6
3. 自己紹介 - 果物リン • Twitter/Github/Qiita@FruitRiin • ݄͔̎ΒגࣜձࣾΏΊΈͰϑϩϯτΤϯδχΞ • લ৬͸αʔόʔαΠυΤϯδχΞʢPHPʣ • Vue͸͍͍ͧʂ
4. 私的HotNews Azusa Colors ͷ16:9ςʔϚ͕Ϛʔδ͞Ε·ͨ͠
5. લஔ͖͜͜·Ͱ
6. Vue.jsの良さをもっと広めたい！ • ͷͰϥΠϒίʔσΟϯά͠Α͏ʂˡΠϚίί • جຊͷςϯϓϨʔτߏจͷ঺հ • ஌ͬͯΔਓʹ͸৘ใྔօແ • νϡʔτϦΞϧ͘Β͍ • ฉ͖͍ͨਓ͓Δʁ
7. Vue.jsって？ • ̏େϑϩϯτΤϯυϑϨʔϜϫʔΫͷͻͱͭ • Viewʢݟͨ໨ʣͱModelʢσʔλʣΛ͍͍ײ͡ʹ • MVVMΞʔΩςΫνϟ • HTMLʹv-◦◦◦ͬͯॻ͘ͱΑ͠ͳʹͯ͘͠ΕΔ • σΟϨΫςΟϒͬͯݺͿΑʂ
8. 今回の環境 • HTMLϑΝΠϧ̍ຕͰσϞ͠·͢ʂ • ͓ࢼ͠ͳΒCLIͰ؀ڥߏங͢Δͷ͕Φεεϝ
9. {{}} ʢσʔλग़ྗʣ
10. v-model ʢσʔλόΠϯσΟϯάʣ
11. v-bind ʢϓϩύςΟόΠϯσΟϯάʣ
12. v-if ʢ৚݅෼ذʣ
13. v-on ʢೖྗ੍ޚʣ
14. v-for ʢ܁Γฦ͠ʣ
15. Extend • ϧʔςΟϯάɺঢ়ଶ؅ཧͳͲͷެࣜϥΠϒϥϦ • Vue CLIͰ؀ڥߏங • ୯ҰϑΝΠϧίϯϙʔωϯτɺ
 scoped cssɺHot Module ReplacementͳͲͷԸܙ͋Γ
16. Tips: 混ぜるな危険 • Vue.js͸Ծ૝DOMͱ͍͏࣮૷Λ͍ͯ͠Δ • ௚઀ͷDOMૢ࡞ͱ૬ੑ͕ѱ͍ • jQuery΍ੜJSͰॻ͖׵͑Δ΂͔Βͣ • ಈ࡞ൣғΛྑ͘ཧղ͍ͯ͠Ε͹
 ಉډͰ͖ͳ͘΋ͳ͍…ʁʢͰ΋΍ͬͺΓා͍ʣ
17. “Virtual DOMͷجຊΞϓϩʔν͸Ծ૝DOM -> ੜͷDOMม ׵Ͱ͋Γɺ͜ͷखଓʹґଘ͢ΔݶΓੜDOMΛ৮Δ͜ͱ͸ਪ ঑͞Ε·ͤΜɻpatchʹר͖ࠐ·ΕΔͱɺ஌Βͳ͍͏ͪʹΠ ϕϯτϋϯυϥ͝ͱਧ͖ඈͿՄೳੑ͕͋Γ·͢ɻ͔͠΋಺෦ ͷΞϧΰϦζϜʹґଘ͢ΔͷͰඇৗʹσόοάࠔ೉Ͱ͢ɻ” from ͳͥԾ૝DOMͱ͍͏֓೦͕ԶୡͷࠢΛ਒͑ͤ͞Δͷ͔ 
 - mizuchi
18. まとめ • VueͷςϯϓϨʔτߏจ͸
 γϯϓϧͰͱͬͯ΋ύϫϑϧ • ଞʹ΋ίϯϙʔωϯτԽ΍ϥΠϑαΠΫϧ
 ࢉग़ˍ؂ࢹϓϩύςΟͳͲଟ਺ͷػೳ͋Γ • ߴػೳͳը໘࡞੒ʹVue͸͍͔͕Ͱ͔͢ʁ
19. Appendix • Vue.js ϋϯζΦϯ!
 https://gitpitch.com/fruitriin/slideshows/ vueJsHandsOn#/ • ࠓ೔ͷ಺༰ΑΓͪΐͬͱཉுͬͨ಺༰ • ʮvue.js user:fruitriinʯͷݕࡧ݁Ռ - Qiita 
 https://qiita.com/search?q=vue.js+user%3Afruitriin • Vueʹ͍ͭͯͷهࣄΛԿຊ͔ʢॳ৺ऀ޲͚ଟ͍ʣ
20. Vue͸͍͍ͧ