Vue.js入門勉強会の資料です
全サンプルソースコードはこちら GitHub : https://github.com/po3rin/Introduction-Vue.js
7VFKTೖʂ7VF$-*͔Β41"ϑϩϯτΤϯυ։ൃΛֶͿOFX7VF \FMbBQQ SPVUFS UFNQMBUFb"QQ DPNQPOFOUT\"QQ^^7VFKT$0634& 7&34*0/
View Slide
!QPSJO'SPOUFOE%FWFMPQNFOU#BDLFOE%FWFMPQNFOU%BUBTJFODF+BWB4DSJQU1ZUIPO(PMBOH7VFKT$PVSTF 77VFKT$0634& 7&34*0/
\8IZ7VFKT7VFKT$PVSTF 77VFKT$0634& 7&34*0/
8IBU41"7VFKT$PVSTF 77VFKT$0634& 7&34*0/ैདྷͷ8FCϖʔδͰભҠ࣌ʹຖճ)551ϦΫΤετͰ)5.-Λॴಘ͢Δ͕ɺ41"Ͱ+BWB4DSJQUΛ༻͍ͯϖʔδͷ)5.-ͷҰ෦Λࠩ͠ସ͑ͯίϯςϯπΛΓସ͑ͯɺϢʔβʔମݧʢ69ʣΛେ্͖ͤ͘͞Δ͜ͱ͕Ͱ͖Δ3FRVFTU41"ʢ࣍ճҎ߱αʔόʔʹΞΫηεͤͣʹϖʔδભҠͰ͖Δʣ
1SPCMFNPGNBLJOH41"7VFKT$PVSTF 77VFKT$0634& 7&34*0/ੜͷ+BWB4DSJQUK2VFSZͰཁૉΛΓସ͍͑ͯ͘ͱɺεύήοςΟίʔυʹͳΓɺ୯७ʹਏ͍
8IZ7VFKT7VFKT$PVSTF 77VFKT$0634& 7&34*0/ͦ͜Ͱ+BWB4DSJQUϑϨʔϜϫʔΫͷҰͭͰ͋Δ 7VFKT ͷग़൪ɻ41"Λ࡞Δࡍʹศརͳػೳ͕ἧ͍ͬͯΔɻඇৗʹܰྔͳϑϨʔϜϫʔΫͰ͋Δҝɺֶशίετ͍ɻ
8IZWVFDMJ7VFKT$PVSTF 77VFKT$0634& 7&34*0/7VFKT ͷ։ൃڥߏஙͰ࣌ؒͷ͔͔ΔXFCQBDL -JOU ςετͷηοτΞοϓΛίϚϯυҰͭͰ४උͰ͖ΔศརͳίϚϯυ
\4FUVQ7VFKT7VFKT$PVSTF 77VFKT$0634& 7&34*0/
7VFKT$PVSTF 7*OTUBMMWVFDMJ/PEFKTͱOBN͕Πϯετʔϧ ͞ Εͯ ͍ Δ ͜ ͱ Λ ֬ ೝ͠ɺWVFDMJΛΠϯετʔϧ͠·͢ɻ
.BLFTUBUJPOFSZ7VFKT$PVSTF 77VFKT ΞϓϦέʔγϣϯͷܗΛͭ͘Γ·͢ɻWVFDMJ7VFKTͷ։ൃڥͷߏஙΛ؆୯ʹߦ͑·͢ɻ
4FUVQ7VFKT7VFKT$PVSTF 77VFKT$0634& 7&34*0/7VFKTͰͭ͘Δ41"JOEFYIUNMҰຕͰग़དྷ͍ͯ·͢ɻͦ͜ʹ+BWBTDSJQUͰ)5.-Λࠩ͠ସ͑·͢ɻجຊతʹɺදࣔͷࠩ͠ସ͑WVFSPVUFS ͱ͍͏ެࣜͷϞδϡʔϧΛ͍·͢ɻJOEFYIUNMNBJOKT "QQWVF)FMMP8PSMEWVFpath: /vue-roter
-FBSOUIFCBTJDTPG7VFKTGSPNUPHHMFDSFBUJPO7VFKT$PVSTF 77VFKT$0634& 7&34*0/\
DSFBUFUPHHMF7VFKT$PVSTF 77VFKT$0634& 7&34*0/EBUBϝιουWTIPXσΟϨΫςΟϒ͖݅ϨϯμϦϯά7VFKTͰσʔλͱ%0.ؔ࿈͚ΒΕɺͦͯ͠શ͕ͯϦΞΫςΟϒʹͳΓ·͢ɻཁૉͷදࣔ PS ඇදࣔΛΓସ͑Δ͜ͱ؆୯ʹʹͰ͖·͢
EBUBNFUIPE7VFKT$PVSTF 7)FMMPX8PSMEWVFΛฤू͠·͠ΐ͏ɻ7VFKT ͷڧྗͳػೳͰ͋ΔσʔλόΠϯσΟϯάʹΑΓςϯϓϨʔτʹσʔλΛόΠϯ υ Ͱ ͖ Δ ɻ E B U B Λ+BWB4DSJQU͔Βॻ͖͑Δ͚ͩͰςϯϓϨʔτʹө͞ΕΔɻ
WTIPXEJSFDUJWF7VFKT$PVSTF 7WTIPXΛએݴ͠ɺΠίʔϧͰࢦ͕͢ USVF ͳΒදࣔɺGBMTF ͳΒඇදࣔʹ͢ΔɻTIPX5FYU͕ॻ͖มΘΕࣗಈͰද͕ࣔมΘΔɻ
DSFBUFUPHHMF7VFKT$PVSTF 77VFKT$0634& 7&34*0/WPOσΟϨΫςΟϒNFUIPETΦϒδΣΫτΠϕϯτϋϯυϦϯάWPO σΟϨΫςΟϒΛ͏͜ͱͰ ɺ Π ϕ ϯ τ ͷ ൃ Ր ࣌ ʹ+BWB4DSJQUͷ࣮ߦ͕ՄೳʹͳΓ·͢ɻ
\1MBZXJUIDPNQPOFOUT7VFKT$PVSTF 77VFKT$0634& 7&34*0/
6TFDPNQPOFOUT7VFKT$PVSTF 77VFKT$0634& 7&34*0/ΞϓϦέʔγϣϯΛωετ͞ΕͨίϯϙʔωϯτͷπϦʔʹฤ͢Δͷ͕ҰൠతͰ͢ɻ࠶ར༻Մೳͳ7VFΠϯελϯεͷ࡞͕ՄೳͰ͢ɻ"QQWVF)FMMP8PSMEWVFpath: /vue-roter$IJMESFOWVF
7VFKT$PVSTF 77VFKT$0634& 7&34*0/QSPQT ΦϓγϣϯʹΑΓίϯϙʔωϯτؒͷσʔλͷड͚͕͠ՄೳͰ͢ɻQSPQT ͷσʔλͷड͚͠ৗʹ͔ΒࢠͷҰํͰ͢ɻ)FMMP8PSMEWVFpath: /vue-roter$IJMESFOWVF6TFDPNQPOFOUTQSPQTʹΑΔσʔλͷड͚͠
VTFDPNQPOFOU7VFKT$PVSTF 7T S D D P N Q P O F O U T $IJMESFOWVFͱ͍͏WVFϑΝΠϧΛ࡞ΓɺͦΕΛࢠίϯϙʔωϯτͱ͠·͢
7VFKT$PVSTF 7ࢠ ί ϯ ϙ ʔ ω ϯ τ Λ)FMMP8PSMEWVFʹΠϯϙʔτ͠ɺςϯϓϨʔτʹຒΊࠐΉɻ͜ΕʹͱΓίϯϙʔωϯτ͕ػೳ͕ͱʹׂͰ͖ɺ͍ճͤΔɻVTFDPNQPOFOU
7VFKT$PVSTF 7QSPQT ΦϓγϣϯͰɺίϯϙʔωϯτ͔ΒࢠίϯϙʔωϯτσʔλΛड͠ՄೳɻVTFQSPQT
7VFKT$PVSTF 7ࢠίϯϙʔωϯτͰQSPQTͰ͖ͬͯͨσʔλΛςϯϓϨʔτʹඳࣸVTFQSPQT
\4UBUJDBOE%ZOBNJD3PVUJOH7VFKT$PVSTF 77VFKT$0634& 7&34*0/
6TFSPVUFS7VFKT$PVSTF 77VFKT$0634& 7&34*0/WVFSPVUFS ͷػೳʹΑΓϖʔδͷΓସ͑Λ؆୯ʹߦ͑·͢ɻϖʔδʹಈతͳཁૉΛ͍ͨ͠߹ಈతͳϧʔςΟϯάՄೳͰ͢ɻ"QQWVF)FMMP8PSMEWVFpath: /vue-roter1BHFTWVFpath: / pages1BHFTWVFpath: / pages/:id
7VFKT$PVSTF 7ΞΫηε͢ΔύεͰදࣔ͢ΔίϯϙʔωϯτΛΓସ͑ΔɻJEಈతͳύϥϝʔλͰ͋ΓɺίϯϙʔωϯτʹύϥϝʔλΛͤΔVTFWVFSPVUFS
7VFKT$PVSTF 71BHFTWVFͰSPVUFQBSBNT͔ΒύεͷJEͰࢦఆ͞ΕͨύϥϝʔλΛड͚औΕΔVTFWVFSPVUFS
\"DDFTT"1*WJBBYJT7VFKT$PVSTF 77VFKT$0634& 7&34*0/
"DDFTT"1*WJBBYJPTNPEVMF7VFKT$PVSTF 77VFKT$0634& 7&34*0/αʔόʔͱ௨৴Λߦ͏ҝʹศརͳ )551ΫϥΠΞϯτͰ͋Δ BYJPT Ϟδϡʔϧ͕͏ͱ؆୯ʹ"1*ʹඇಉظʹΞΫηε͕Ͱ͖·͢ɻ3FRVFTU3FTQPOTF
7VFKT$PVSTF 7BYJPTͳͲͷϞδϡʔϧOQN JOTUBMM ίϚϯυͰΠϯετʔϧͰ͖Δɻ͋ͱ͜ΕΛ+BWB4DSJQUଆͰಡΈ͜Ή͚ͩͰ͑Δ*OTUBMMBYJPT
7VFKT$PVSTF 7BYJPTͰ"1*ʹΞΫηε͠ɺؼͬͯདྷͨ+40/σʔλΛςϯϓϨʔτʹόΠϯσΟϯάVTFBYJPT
7VFKT$PVSTF 7OPEFKTͰ࡞ͬͨ"1*αʔόʔΛ্ཱͪ͛ΔMJTUFO"1*TFSWFS
\8IBUUPMFBSOOFYU7VFKT$PVSTF 77VFKT$0634& 7&34*0/
8IBUUPMFBSOOFYU7VFKT$PVSTF 77VFKT$0634& 7&34*0/7VFͷ༷ʑͳػೳʹ;ΕͯΈΔࠓճͬͨػೳҎ֎ʹศརͳσΟϨΫςΟϒΦϒδΣΫτ͕͋Δɻ7VFKTͷຊޠυΩϡϝϯτ͔ͳΓॆ࣮͍ͯ͠Δҝɺͬ͟ͱΛ௨͢ͱྑ͍ɻWGPS WNPEFM WJG ͋ͨΓ࠷ݶ͍͑ͨ
8IBUUPMFBSOOFYU7VFKT$PVSTF 77VFKT$0634& 7&34*0/7VFY7VFKT ʹ͓͚Δঢ়ଶཧύλʔϯϥΠϒϥϦͰ͢ɻ͜Εσʔλʹର͢ΔϧʔϧΛอূ͠ɺݟ௨͠ͷྑ͍σʔλͷѻ͍ΛՄೳʹ͠·͢ɻ
8IBUUPMFBSOOFYU7VFKT$PVSTF 77VFKT$0634& 7&34*0//VYU7VFKT ʹ͓͚Δ։ൃʹ͓͍ͯɺίʔυΛߋʹॻ͖͘͢͢ΔڥαʔόʔαΠυϨϯμϦϯά͕؆୯ʹߦ͑Δɻ੩తαΠτ18"։ൃʹಋೖ͞Ε͍ͯΔɻ