One Night Vue.js

Vue.js tutorial for biginer
https://github.com/Kyuden/one-night-vue

Transcript

1. One Night Vue.js
   ສ༿ڀָ෦
   

   View Slide

2. profile
   גࣜձࣾສ༿ / @Kyuden_
   

   View Slide

3. Vue.js ࣄྫ঺հ
   ͜Μͳײ͡ͷ௨஌ػೳ͕20෼Ґ˞Ͱ࡞Ε·ͨ͠ɻͦΕ͘Β͍ѻ͍΍͍͢Ͱ͢ɻ
   ※σβΠϯͷ࣌ؒ͸আ͘
   

   View Slide

4. Vue.js͞ΘͬͯΈ·͠ΐ͏
   

   View Slide

5. https://github.com/Kyuden/one-night-vue
   ؀ڥߏங
   Cloneͯ͠README.mdΛಡΜͰͶ
   

   View Slide

6. Stage 1
   ૒ํ޲όΠϯσΟϯάΛମݧ
   

   View Slide

7. 2 staps
   1. ϒϥ΢βͰදࣔ
   • www/demo1.html

   2. ίʔυ͔ΒॲཧΛਪଌ
   • coffee/demo1.coffee
   • haml/demo1.haml

   

   View Slide

8. thinking time
   

   View Slide

9. haml/demo1.haml
   !
   %body
   #demo1
   %p{"v-text" => "message"}
   %input{"v-model" => "message"}
   coffee/demo1.coffee
   !
   new Vue
   el: "#demo1"
   data:
   message: "Hello Vue"
   

   View Slide

10. Vue
    VueΫϥεͷίϯετϥΫλͰViewModelΛ࡞੒
    VueModelͰ͸ͳ͘ViewModel

    

    View Slide

11. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"
    ɹ

    ҎԼͷॳظ஋ΛVueΫϥεͷίϯετϥΫλʹ౉͠

    ViewModelΛ࡞੒͍ͯ͠Δɹ

    el: "#demo1"
    data:
    message: "Hello Vue"
    

    View Slide

12. next
    

    View Slide

13. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"
    

    View Slide

14. el
    ViewModelʹඥ෇͚ΔDOMཁૉΛࢦఆ
    1ͭͷViewModelʹ͸ҰͭͷDOM͔͠ඥ෇͚Δ͜ͱ͕ग़དྷͳ͍ͷͰIDͰࢦఆ
    

    View Slide

15. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"
    T ɹEFNPͷ%0.Λࢦఆ͍ͯ͠Δ
    EFNPͷ%0.͕7JFX.PEFMΛඥͮ͘
    

    View Slide

16. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo2"
    data:
    message: "Hello Vue"
    T
    ɹEFNPΛEFNPʹมߋ͢Δͱ

    ɹ7JFX.PEFMͷ؅ཧ֎ͱͳΔͷͰಈ࡞͠ͳ͍
    

    View Slide

17. next
    

    View Slide

18. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"
    

    View Slide

19. data
    ViewModel͕อ࣋͢ΔσʔλΛఆٛ
    ViewModelͷϓϩύςΟʹΞΫηε͢ΔϓϩΩγͱݴͬͯ΋ྑ͍
    

    View Slide

20. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"
    ɹEBUB഑ԼʹNFTTBHFϓϩύςΟͱͯ͠ɹ

    ɹॳظ஋b`)FMMP7VF``Λఆ͍ٛͯ͠Δ
    

    View Slide

21. next
    

    View Slide

22. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"
    

    View Slide

23. v-text
    DOMཁૉͷ಺ଆΛViewModelͷϓϩύςΟ஋ͰόΠϯσΟϯά͢Δ
    v-̋̋̋ΛDirectiveͱݺͿɻEX) v-textσΟϨΫςΟϒ
    

    View Slide

24. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffe/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"
    ɹNFTTBHFϓϩύςΟ஋)FMMP7VFz͕

    ɹQλά಺ʹόΠϯσΟϯά͞ΕΔ
    

    View Slide

25. next
    

    View Slide

26. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"
    

    View Slide

27. v-model
    %input΍%select΍%textareaͳͲฤूՄೳͳཁૉΛ࢖༻͠

    ViewͱViewModleؒͰ૒ํ޲σʔλόΠϯσΟϯάΛߦ͏
    σʔλ͸ৗʹಉظ͞ΕΔ(ಉظͷλΠϛϯάΛࢦఆ͢ΔΦϓγϣϯ΋ଘࡏ͢Δ)
    

    View Slide

28. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffe/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"
    ɹJOQVUཁૉ΁ͷೖྗ஋ʹԠͯ͡

    ɹNFTTBHFϓϩύςΟ஋Λಉظͤ͞Δ
    ɹJOQVUཁૉ΁ͷೖྗ஋ʹԠͯ͡

    ɹNFTTBHFϓϩύςΟ஋͕ߋ৽͞ΕΔ
    

    View Slide

29. Stage 1 End
    

    View Slide

30. Stage 2
    {{ }}
    

    View Slide

31. 2 staps
    1. ϒϥ΢βͰදࣔ
    • www/demo2.html

    2. ίʔυ͔ΒॲཧΛਪଌ
    • coffee/demo2.coffee
    • haml/demo2.haml

    Ҏޙলུ(શStageಉ͡Ͱ͢)
    

    View Slide

32. thinking time
    

    View Slide

33. haml/demo2.haml
    !
    #demo2

    %p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}
    coffee/demo2.coffee
    !
    new Vue
    el: "#demo2"
    data:
    user:
    firstName: "Masahiro"
    lastName: "kyuden"
    

    View Slide

34. {{ }}
    Mustache͸v-textͱͯ͠ίϯύΠϧ͞ΕΔ
    MustacheςΩετҎ֎ʹHTMLଐੑࢦఆͰ΋࢖༻͢Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

35. haml/demo2.haml
    !
    #demo2

    %p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}
    coffee/demo2.coffee
    !
    new Vue
    el: "#demo2"
    data:
    user:
    firstName: "Masahiro"
    lastName: "kyuden"
    %p{"v-text" => "'hello ' + user.firstName + ' ' + user.lastName"}
    

    View Slide

36. Stage 2 End
    

    View Slide

37. Stage 3
    ৭ʑͳDirectiveΛ࢖ͬͯΈΑ͏
    

    View Slide

38. thinking time
    

    View Slide

39. haml/demo3.haml
    !
    #demo3
    %ul
    /stepᶃ
    %li{"v-repeat" => "todos"}
    {{content}}
    coffee/demo3.coffee
    !
    new Vue
    el: '#demo3'
    data:
    todos: [
    {
    done: true
    content: 'Learn JS'
    }
    {
    done: false
    content: 'Learn vue.js'
    }
    {
    done: true
    content: 'Lean yourself'
    }
    ]
    

    View Slide

40. v-repeat
    ഑ྻΛࢦఆ͢ΔࣄͰࢠͷViewModelΛ࡞੒͢Δ

    (഑ྻͷཁૉͷ਺͚ͩ܁Γฦ࣮͠ߦ͞ΕΔ)
    Ҿ਺͕ͳ͍৔߹͸ViewModelͷDataΛ഑ྻͱͯ͠ѻ͏
    

    View Slide

41. haml/demo3.haml
    !
    #demo3
    %ul
    /stepᶃ
    %li{"v-repeat" => "todos"}
    {{content}}
    coffee/demo3.coffee
    !
    new Vue
    el: '#demo3'
    data:
    todos: [
    {
    done: true
    content: 'Learn JS'
    }
    {
    done: false
    content: 'Learn vue.js'
    }
    {
    done: true
    content: 'Lean yourself'
    }
    ]
    ഑ྻͰ͋ΔUPEPTΛ༩͑Δͱཁૉ਺෼࡞੒͞
    ΕΔɻ
    

    View Slide

42. next
    

    View Slide

43. haml/demo3.haml
    !
    #demo3
    %ul
    /stepᶄ
    %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos"}
    {{content}}
    coffee/demo3.coffee
    !
    new Vue
    el: '#demo3'
    data:
    todos: [
    {
    done: true
    content: 'Learn JS'
    }
    {
    done: false
    content: 'Learn vue.js'
    }
    {
    done: true
    content: 'Lean yourself'
    }
    ]
    sass/style.sass
    !
    li.done
    text-decoration: line-through
    

    View Slide

44. {{ }}
    MustacheͷBinding͸HTMLଐੑࢦఆͰ΋༗ޮ
    ͨͩ͠%imgͷsrcࢦఆ͸v-attrΛ࢖༻͢Δ΂͖ɻ

    ϒϥ΢βධՁ࣌ʹMustacheܗࣜͷ··HTTPϦΫΤετΛൃߦ͠404͕ى͖ΔͨΊ
    

    View Slide

45. next
    

    View Slide

46. haml/demo3.haml
    !
    #demo3
    %ul
    ɹɹ/stepᶅ
    %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}
    {{content}}
    coffee/demo3.coffee
    !
    new Vue
    el: '#demo3'
    data:
    todos: [
    {
    done: true
    content: 'Learn JS'
    }
    {
    done: false
    content: 'Learn vue.js'
    }
    {
    done: true
    content: 'Lean yourself'
    }
    ]
    

    View Slide

47. v-on
    ΠϕϯτϦεφʔΛཁૉʹొ࿥͢Δɻؔ਺͔ࣜΛҾ਺ͰධՁ͢Δɻ
    ΩʔλΠϓΠϕϯτͳͲ΋༻ҙ͞Ε͍ͯΔ
    

    View Slide

48. haml/demo3.haml
    !
    #demo3
    %ul
    ɹɹ/stepᶅ
    %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}
    {{content}}
    coffee/demo3.coffee
    !
    new Vue
    el: '#demo3'
    data:
    todos: [
    {
    done: true
    content: 'Learn JS'
    }
    {
    done: false
    content: 'Learn vue.js'
    }
    {
    done: true
    content: 'Lean yourself'
    }
    ]
    ɹDMJDL͞Εͨ࣌ʹɹɹɹɹɹɹɹΛධՁ͢Δ
    EPOFEPOF
    

    View Slide

49. Stage 3 End
    

    View Slide

50. Stage 4
    filterΛ࢖ͬͯΈΑ͏
    

    View Slide

51. thinking time
    

    View Slide

52. haml/demo4.haml
    !
    #demo4
    %ul
    %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}
    /stepᶃ
    {{content | uppercase}}
    coffee/demo4.coffee
    !
    new Vue
    el: '#demo4'
    data:
    todos: [
    {
    done: true
    content: 'Learn JS'
    }
    {
    done: false
    content: 'Learn vue.js'
    }
    {
    done: true
    content: 'Lean yourself'
    }
    ]
    

    View Slide

53. |
    ೚ҙͷϑΟϧλʔͰ஋Λॲཧ͢Δ͜ͱ͕Ͱ͖Δ
    σΟϨΫςΟϒ͝ͱʹϑΟϧλʔͷ࢖༻༻్͸ҟͳΔ
    

    View Slide

54. haml/demo4.haml
    !
    #demo4
    %ul
    %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}
    /stepᶃ
    {{content | uppercase}}
    coffee/demo4.coffee
    !
    new Vue
    el: '#demo4'
    data:
    todos: [
    {
    done: true
    content: 'Learn JS'
    }
    {
    done: false
    content: 'Learn vue.js'
    }
    {
    done: true
    content: 'Lean yourself'
    }
    ]
    $POUFOUʹର͠VQQFSDBTFϑΟϧλʔΛ௨͠
    όΠϯσΟϯάΛߦ͏
    

    View Slide

55. haml/demo4.haml
    !
    #demo4
    %ul
    %li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}
    /stepᶄ
    {{content | uppercase | lowercase}}
    coffee/demo4.coffee
    !
    new Vue
    el: '#demo4'
    data:
    todos: [
    {
    done: true
    content: 'Learn JS'
    }
    {
    done: false
    content: 'Learn vue.js'
    }
    {
    done: true
    content: 'Lean yourself'
    }
    ]
    ɹ෮਺ͷϑΟϧλʔΛֻ͚Δࣄ͕Ͱ͖Δ
    

    View Slide

56. Stage 4 End
    

    View Slide

57. Stage 5
    methodΛ࢖ͬͯΈΑ͏
    

    View Slide

58. thinking time
    

    View Slide

59. haml/demo5.haml
    !
    #demo5
    %p {{displayName}}
    %input{ "v-model" => "newName", "v-on" => "keyup:addName | key enter"}
    coffee/demo5.coffee

    !
    new Vue
    el: '#demo5'
    data:
    nameList: []
    displayName: ""
    newName: ""
    methods:
    addName: ->
    @displayName = @newName
    @newName = ""
    

    View Slide

60. methods
    methods഑ԼʹϝιουΛఆٛ͢Δ
    ఆٛ͞Εͨϝιου͸directive͔Β௚઀ݺͿ͜ͱ͕Ͱ͖Δ
    

    View Slide

61. haml/demo5.haml
    !
    #demo5
    %p {{displayName}}
    %input{ "v-model" => "newName", "v-on" => "keyup:addName | key enter"}
    coffee/demo5.coffee

    !
    new Vue
    el: '#demo5'
    data:
    nameList: []
    displayName: ""
    newName: ""
    methods:
    addName: ->
    @displayName = @newName
    @newName = ""
    ɹNFUIPEͷίϯςΩετ͸7JFX.PEFM

    ɹͷΠϯελϯεʹͳΔ
    ɹWPOͰ͸LFZΠϕϯτΛϑΟϧλʔͰ

    ɹ੍ޚ͢Δ͜ͱ͕Ͱ͖Δ
    

    View Slide

62. Stage 5 End
    

    View Slide

63. ʂ
    

    View Slide

64. TODOΞϓϦΛ࡞ͬͯΈΑ͏
    

    View Slide

65. TODOΞϓϦ࢓༷
    

    View Slide

66. ࣮૷ϑΝΠϧ
    • coffee/demo6-1.coffee
    • haml/demo6-1.haml
    

    View Slide

67. Answer
    • coffee/demo6-2.coffee
    • haml/demo6-2.haml

    

    View Slide

68. demo7΋༻ҙͯ͋͠ΔͷͰ
    Vueʹڵຯ͕༙͍ͨํ͸ಡΜͰΈ͍ͯͩ͘͞
    

    View Slide

69. গ͚ͩ͠Vue.jsͷงғؾΛ͔ͭΊͨͰ͠ΐ͏͔ʁ
    

    View Slide

70. ಛ௃
    

    View Slide

71. Simple
    • API͕simpleͰػೳ΋গͳֶ͘शίετ͕௿͍
    • ViewModelΛΠϯελϯεԽ͢Δ͚ͩͰ࢖͍࢝ΊΔࣄ͕Ͱ͖Δ
    ެࣜguideΛಡΉͷ͕͓͢͢ΊɻҰ೔͋Ε͹े෼ʹಡΊΔ
    

    View Slide

72. Fast
    !
    • TodoMVC projectͷϕϯνϚʔΫςετ(ඇެࣜ)Ͱ࠷΋ૣ͍
    • IE8ҎԼʹରԠ͍ͯ͠ͳ͍ͨΊɺJSͷ৽ػೳͷԸܙΛಘΒΕΔઃܭͱ
    ͳ͍ͬͯΔͷ͕େ͖͍͔΋͠Εͳ͍
    

    View Slide

73. Flexible
    • ଞͷϥΠϒϥϦͱ߹Θͤͯ࢖༻͢Δࣄ͕Ͱ͖Δ
    • ଞͷϥΠϒϥϦʹґଘ͍ͯ͠ͳ͍
    Lo-Dash.jsͳͲ׳Εͨ͠ΜͩϥΠϒϥϦͱ૊Έ߹Θͤͯ࢖͏͜ͱ͕Ͱ͖Δ
    

    View Slide

74. next step
    

    View Slide

75. Read guide
    IUUQWVFKTPSHHVJEF
    

    View Slide

76. https://github.com/Kyuden/one-night-vue
    Give me github star
    

    View Slide

77. ࢀߟจݙ
    • http://vuejs.org/guide/
    • http://todomvc.com/examples/vue/
    

    View Slide