Tweet
Tweet

Slide 1

Slide 1 text

Vue.js超入門（ライブ） Ռ෺Ϧϯ@FruitRiin 2019/01/26 ʲୈ6ճʳϑϩϯτΤϯυ× ϏΞόογϡ ॳ৺ऀษڧձ in੢৽॓

Slide 2

Slide 2 text

#sakenight6

Slide 3

Slide 3 text

自己紹介 - 果物リン • Twitter/Github/Qiita@FruitRiin • ݄͔̎ΒגࣜձࣾΏΊΈͰϑϩϯτΤϯδχΞ • લ৬͸αʔόʔαΠυΤϯδχΞʢPHPʣ • Vue͸͍͍ͧʂ

Slide 4

Slide 4 text

私的HotNews Azusa Colors ͷ16:9ςʔϚ͕Ϛʔδ͞Ε·ͨ͠

Slide 5

Slide 5 text

લஔ͖͜͜·Ͱ

Slide 6

Slide 6 text

Vue.jsの良さをもっと広めたい！ • ͷͰϥΠϒίʔσΟϯά͠Α͏ʂˡΠϚίί • جຊͷςϯϓϨʔτߏจͷ঺հ • ஌ͬͯΔਓʹ͸৘ใྔօແ • νϡʔτϦΞϧ͘Β͍ • ฉ͖͍ͨਓ͓Δʁ

Slide 7

Slide 7 text

Vue.jsって？ • ̏େϑϩϯτΤϯυϑϨʔϜϫʔΫͷͻͱͭ • Viewʢݟͨ໨ʣͱModelʢσʔλʣΛ͍͍ײ͡ʹ • MVVMΞʔΩςΫνϟ • HTMLʹv-○○○ͬͯॻ͘ͱΑ͠ͳʹͯ͘͠ΕΔ • σΟϨΫςΟϒͬͯݺͿΑʂ

Slide 8

Slide 8 text

今回の環境 • HTMLϑΝΠϧ̍ຕͰσϞ͠·͢ʂ • ͓ࢼ͠ͳΒCLIͰ؀ڥߏங͢Δͷ͕Φεεϝ

Slide 9

Slide 9 text

{{}} ʢσʔλग़ྗʣ

Slide 10

Slide 10 text

v-model ʢσʔλόΠϯσΟϯάʣ

Slide 11

Slide 11 text

v-bind ʢϓϩύςΟόΠϯσΟϯάʣ

Slide 12

Slide 12 text

v-if ʢ৚݅෼ذʣ

Slide 13

Slide 13 text

v-on ʢೖྗ੍ޚʣ

Slide 14

Slide 14 text

v-for ʢ܁Γฦ͠ʣ

Slide 15

Slide 15 text

Extend • ϧʔςΟϯάɺঢ়ଶ؅ཧͳͲͷެࣜϥΠϒϥϦ • Vue CLIͰ؀ڥߏங • ୯ҰϑΝΠϧίϯϙʔωϯτɺ
 scoped cssɺHot Module ReplacementͳͲͷԸܙ͋Γ

Slide 16

Slide 16 text

Tips: 混ぜるな危険 • Vue.js͸Ծ૝DOMͱ͍͏࣮૷Λ͍ͯ͠Δ • ௚઀ͷDOMૢ࡞ͱ૬ੑ͕ѱ͍ • jQuery΍ੜJSͰॻ͖׵͑Δ΂͔Βͣ • ಈ࡞ൣғΛྑ͘ཧղ͍ͯ͠Ε͹
 ಉډͰ͖ͳ͘΋ͳ͍…ʁʢͰ΋΍ͬͺΓා͍ʣ

Slide 17

Slide 17 text

“Virtual DOMͷجຊΞϓϩʔν͸Ծ૝DOM -> ੜͷDOMม ׵Ͱ͋Γɺ͜ͷखଓʹґଘ͢ΔݶΓੜDOMΛ৮Δ͜ͱ͸ਪ ঑͞Ε·ͤΜɻpatchʹר͖ࠐ·ΕΔͱɺ஌Βͳ͍͏ͪʹΠ ϕϯτϋϯυϥ͝ͱਧ͖ඈͿՄೳੑ͕͋Γ·͢ɻ͔͠΋಺෦ ͷΞϧΰϦζϜʹґଘ͢ΔͷͰඇৗʹσόοάࠔ೉Ͱ͢ɻ” from ͳͥԾ૝DOMͱ͍͏֓೦͕ԶୡͷࠢΛ਒͑ͤ͞Δͷ͔ 
 - mizuchi

Slide 18

Slide 18 text

まとめ • VueͷςϯϓϨʔτߏจ͸
 γϯϓϧͰͱͬͯ΋ύϫϑϧ • ଞʹ΋ίϯϙʔωϯτԽ΍ϥΠϑαΠΫϧ
 ࢉग़ˍ؂ࢹϓϩύςΟͳͲଟ਺ͷػೳ͋Γ • ߴػೳͳը໘࡞੒ʹVue͸͍͔͕Ͱ͔͢ʁ

Slide 19

Slide 19 text

Appendix • Vue.js ϋϯζΦϯ!
 https://gitpitch.com/fruitriin/slideshows/ vueJsHandsOn#/ • ࠓ೔ͷ಺༰ΑΓͪΐͬͱཉுͬͨ಺༰ • ʮvue.js user:fruitriinʯͷݕࡧ݁Ռ - Qiita 
 https://qiita.com/search?q=vue.js+user%3Afruitriin • Vueʹ͍ͭͯͷهࣄΛԿຊ͔ʢॳ৺ऀ޲͚ଟ͍ʣ

Slide 20

Slide 20 text

Vue͸͍͍ͧ