Vue入門3日目くらいに知りたかったことたち

2019/07/12のVue.js Nightで発表した内容です。

Transcript

1. !IJTBEB@EFW ೖ໳೔໨͘Β͍ʹ
 ஌Γ͔ͨͬͨ͜ͱͨͪ ͻͩ͞
2. ࣗݾ঺հ wͻͩ͞
   w5XJUUFS
   !IJTBEB@EFW
   w๭ઐ໳ֶߍੜ !IJTBEB@EFW
3. ໨࣍ w7VFKT
   %FWUPPMT
   wσʔλͷྲྀΕ
   wWNPEFM
   w7VFTFU
   w7VFY
   w7VFY
   HFUUFS !IJTBEB@EFW
4. ໨࣍ w7VFKT
   %FWUPPMT
   wσʔλͷྲྀΕ
   wWNPEFM
   w7VFTFU
   w7VFY
   w7VFY
   HFUUFS !IJTBEB@EFW
5. w$ISPNF֦ு
   w։ൃʹศརͳػೳ 7VFKT
   %FWUPPMT !IJTBEB@EFW
6. 7VFKT
   %FWUPPMT w ίϯϙʔωϯτͷ֊૚ߏ଄
   w QSPQT
   DPNQVUFE
   EBUB
   FUDʜ
   w 7VFYͷTUBUF
   HFUUFST
   w DPNNJUཤྺͱͦͷϖΠϩʔυ
   w Πϕϯτൃੜཤྺ
   w 3PVUFSؔ࿈
   w ύϑΥʔϚϯε৘ใ !IJTBEB@EFW
7. ໨࣍ w7VFKT
   %FWUPPMT
   wσʔλͷྲྀΕ
   wWNPEFM
   w7VFTFU
   w7VFY
   w7VFY
   HFUUFS !IJTBEB@EFW
8. σʔλͷྲྀΕ w7VFKTͰ͸ࢠڙ͕͋ͳͨΛݟΔʂ
   w'PSNTͱ͔ !IJTBEB@EFW ਌ ࢠ ஋ͪΐ͏͍ͩ ͸͍
9. σʔλͷྲྀΕ w7VFKTͰ͸ࢠڙ͕͋ͳͨΛݟΔʂ
   w7VFKTͱ͔ !IJTBEB@EFW ਌ ࢠ ࢲͷ஋Λݟͳ͍͞ ͸͍
10. σʔλͷྲྀΕ wߋ৽͸ʁ
    w'PSNTͱ͔ !IJTBEB@EFW ਌ ࢠ Ͱ͸஋Λ௖͜͏ ߋ৽͞ΕͨΑ
11. σʔλͷྲྀΕ wߋ৽͸ʁ
    w7VFKTͱ͔ !IJTBEB@EFW ਌ ࢠ ྃղɺมߋޙͷ஋͸
    ࢲΛݟͳ͍͞ ͜ͷ஋Λ͜Εʹߋ৽ ͯ͠΄͍͠ͳ ΠϕϯτͰ
    ߋ৽ͯ͠΄͍͠஋Λ఻͑Δ
12. σʔλͷྲྀΕ wࢠ͕࣋ͭJOQVUͷ஋Λ਌ʹ౉͢ʹ͸
    wQSPQTͰ਌͔Β஋Λड͚औ͓ͬͯ͘
    wJOQVU͕ߋ৽͞ΕͨΒ
 ΠϕϯτͰ਌ʹߋ৽Λཁ੥͢Δ
    w਌͸ͦͷΠϕϯτΛݟͯ஋Λߋ৽ !IJTBEB@EFW
13. σʔλͷྲྀΕ wࢠ͕࣋ͭJOQVUͷ஋Λ਌ʹ౉͢ʹ͸
    wQSPQTͰ਌͔Β஋Λड͚औ͓ͬͯ͘
    wJOQVU͕ߋ৽͞ΕͨΒ
 ΠϕϯτͰ਌ʹߋ৽Λཁ੥͢Δ
    w਌͸ͦͷΠϕϯτΛݟͯ஋Λߋ৽ !IJTBEB@EFW ΊΜͲ͍
14. ໨࣍ w7VFKT
    %FWUPPMT
    wσʔλͷྲྀΕ
    wWNPEFM
    w7VFTFU
    w7VFY
    w7VFY
    HFUUFS !IJTBEB@EFW
15. WNPEFM wࠓͷྲྀΕΛ؆୯ʹॻ͚Δ
    wWNPEFM͸ҎԼͷ͜ͱΛ͢Δ
    wQSPQͷWBMVFʹࢦఆ͞Εͨ
 ஋Λ౉͢
    wJOQVUΠϕϯτ͕ग़ͨΒࢦఆ͞Εͨ ม਺ʹߋ৽ޙͷ஋ΛೖΕΔ !IJTBEB@EFW มߋՄ
16. WNPEFM wු͔Ϳٙ໰
    wଙཁૉʹೖͬͯΔJOQVU͕΄͍͠ʜ
    wWNPEFMͷWNPEFM͕͍ͨ͠ !IJTBEB@EFW
17. WNPEFM wࢠཁૉͷWNPEFMʹ౉͢஋Λ
 DPNQVUFEʹ͢Δ
    wHFUUFSͱTFUUFSΛఆٛ͠ɺ
 TFUUFSͰ͸ΠϕϯτΛൃੜͤ͞Δ !IJTBEB@EFW ਌ ࢠ ଙ ͜͜ͷ࿩
18. WNPEFM // propsʹvalue͕͋Γɺ // ͜ͷཁૉͷࢠͷv-modelʹcomputedValueΛࢦఆ͢Δ computed: { computedValue: { get() { return this.value }, set(value) { this.$emit(‘input’, value); } }
 } !IJTBEB@EFW
19. ໨࣍ w7VFKT
    %FWUPPMT
    wσʔλͷྲྀΕ
    wWNPEFM
    w7VFTFU
    w7VFY
    w7VFY
    HFUUFS !IJTBEB@EFW
20. 7VFTFU w഑ྻ΍ΦϒδΣΫτͷཁૉʹ௚઀
 ୅ೖ͢Δͱ7VFʹݕ஌͞Εͳ͍
    •array[0] = ‘hogehoge’ // NG •Vue.set(array, 0, ‘hogehoge’) // OK wΦϒδΣΫτ͸ୈೋҾ਺ʹจࣈྻ !IJTBEB@EFW
21. ໨࣍ w7VFKT
    %FWUPPMT
    wσʔλͷྲྀΕ
    wWNPEFM
    w7VFTFU
    w7VFY
    w7VFY
    HFUUFS !IJTBEB@EFW
22. 7VFY w7VFY͸ܰ཰ʹಋೖ͢Δ΂͖
    wWNPEFM͕͋Δͱ͸͍͑ɺ
 શ෦਌͔Β౉͢ͷ͸͖͍ͭ
    w"1*ΞΫηεΛBDUJPOͰ΍Δͱૉఢ !IJTBEB@EFW
23. ໨࣍ w7VFKT
    %FWUPPMT
    wσʔλͷྲྀΕ
    wWNPEFM
    w7VFTFU
    w7VFY
    w7VFY
    HFUUFS !IJTBEB@EFW
24. (FUUFS
    
    7VFY wʮ(FUUFSʜ
    Α͘Θ͔ΒΜޙͰʯ
    w݁ہޙͰॻ͖௚ͨ͠
    wศརͩͬͨέʔεΛ͝঺հ !IJTBEB@EFW
25. (FUUFS
    
    7VFY !IJTBEB@EFW IPHF GVHB GPP CBS IPHF GVHB GPP CBS IPHF GVHB GPP CBS IPHF GVHB GPP CBS IPHF GVHB GPP CBS ΞϓϦέʔγϣϯ͸
 ಺෦ʹσʔλΛ࣋ͪ ঢ়ଶʹΑͬͯ
 ͦͷҰ෦Λදࣔ͢Δ ಺෦ͷσʔλͱݱࡏදࣔ͢Δ৔ॴΛTUBUFͰ࣋ͭ ݱࡏͷσʔλΛऔಘ͢ΔHFUUFSΛఆٛ ৔ॴͷTUBUFΛߋ৽͢Δ͚ͩͰද͕ࣔมΘΔʂ
26. !IJTBEB@EFW ͓͠·͍