One Night Vue.js

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

Transcript

1. One Night Vue.js ສ༿ڀָ෦
2. profile גࣜձࣾສ༿ / @Kyuden_
3. Vue.js ࣄྫ঺հ ͜Μͳײ͡ͷ௨஌ػೳ͕20෼Ґ˞Ͱ࡞Ε·ͨ͠ɻͦΕ͘Β͍ѻ͍΍͍͢Ͱ͢ɻ ※σβΠϯͷ࣌ؒ͸আ͘
4. Vue.js͞ΘͬͯΈ·͠ΐ͏
5. https://github.com/Kyuden/one-night-vue ؀ڥߏங Cloneͯ͠README.mdΛಡΜͰͶ
6. Stage 1 ૒ํ޲όΠϯσΟϯάΛମݧ
7. 2 staps 1. ϒϥ΢βͰදࣔ • www/demo1.html
 2. ίʔυ͔ΒॲཧΛਪଌ • coffee/demo1.coffee • haml/demo1.haml

8. thinking time
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"
10. Vue VueΫϥεͷίϯετϥΫλͰViewModelΛ࡞੒ VueModelͰ͸ͳ͘ViewModel

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"
12. next
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"
14. el ViewModelʹඥ෇͚ΔDOMཁૉΛࢦఆ 1ͭͷViewModelʹ͸ҰͭͷDOM͔͠ඥ෇͚Δ͜ͱ͕ग़དྷͳ͍ͷͰIDͰࢦఆ
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Λඥͮ͘
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ͷ؅ཧ֎ͱͳΔͷͰಈ࡞͠ͳ͍
17. next
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"
19. data ViewModel͕อ࣋͢ΔσʔλΛఆٛ ViewModelͷϓϩύςΟʹΞΫηε͢ΔϓϩΩγͱݴͬͯ΋ྑ͍
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`)FMMP
    7VF``
    Λఆ͍ٛͯ͠Δ
21. next
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"
23. v-text DOMཁૉͷ಺ଆΛViewModelͷϓϩύςΟ஋ͰόΠϯσΟϯά͢Δ v-̋̋̋ΛDirectiveͱݺͿɻEX) v-textσΟϨΫςΟϒ
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ϓϩύςΟ஋)FMMP
    7VFz͕
 ɹQλά಺ʹόΠϯσΟϯά͞ΕΔ
25. next
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"
27. v-model %input΍%select΍%textareaͳͲฤूՄೳͳཁૉΛ࢖༻͠
 ViewͱViewModleؒͰ૒ํ޲σʔλόΠϯσΟϯάΛߦ͏ σʔλ͸ৗʹಉظ͞ΕΔ(ಉظͷλΠϛϯάΛࢦఆ͢ΔΦϓγϣϯ΋ଘࡏ͢Δ)
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ϓϩύςΟ஋͕ߋ৽͞ΕΔ
29. Stage 1 End
30. Stage 2 {{ }}
31. 2 staps 1. ϒϥ΢βͰදࣔ • www/demo2.html
 2. ίʔυ͔ΒॲཧΛਪଌ • coffee/demo2.coffee • haml/demo2.haml
 Ҏޙলུ(શStageಉ͡Ͱ͢)
32. thinking time
33. haml/demo2.haml ! #demo2
 %p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }} coffee/demo2.coffee ! new Vue el: "#demo2" data: user: firstName: "Masahiro" lastName: "kyuden"
34. {{ }} Mustache͸v-textͱͯ͠ίϯύΠϧ͞ΕΔ MustacheςΩετҎ֎ʹHTMLଐੑࢦఆͰ΋࢖༻͢Δ͜ͱ͕Ͱ͖Δ
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"}
36. Stage 2 End
37. Stage 3 ৭ʑͳDirectiveΛ࢖ͬͯΈΑ͏
38. thinking time
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' } ]
40. v-repeat ഑ྻΛࢦఆ͢ΔࣄͰࢠͷViewModelΛ࡞੒͢Δ
 (഑ྻͷཁૉͷ਺͚ͩ܁Γฦ࣮͠ߦ͞ΕΔ) Ҿ਺͕ͳ͍৔߹͸ViewModelͷDataΛ഑ྻͱͯ͠ѻ͏
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Λ༩͑Δͱཁૉ਺෼࡞੒͞ ΕΔɻ
42. next
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
44. {{ }} MustacheͷBinding͸HTMLଐੑࢦఆͰ΋༗ޮ ͨͩ͠%imgͷsrcࢦఆ͸v-attrΛ࢖༻͢Δ΂͖ɻ
 ϒϥ΢βධՁ࣌ʹMustacheܗࣜͷ··HTTPϦΫΤετΛൃߦ͠404͕ى͖ΔͨΊ
45. next
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' } ]
47. v-on ΠϕϯτϦεφʔΛཁૉʹొ࿥͢Δɻؔ਺͔ࣜΛҾ਺ͰධՁ͢Δɻ ΩʔλΠϓΠϕϯτͳͲ΋༻ҙ͞Ε͍ͯΔ
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͞Εͨ࣌ʹɹɹɹɹɹɹɹΛධՁ͢Δ EPOF
    
    EPOF
49. Stage 3 End
50. Stage 4 filterΛ࢖ͬͯΈΑ͏
51. thinking time
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' } ]
53. | ೚ҙͷϑΟϧλʔͰ஋Λॲཧ͢Δ͜ͱ͕Ͱ͖Δ σΟϨΫςΟϒ͝ͱʹϑΟϧλʔͷ࢖༻༻్͸ҟͳΔ
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ϑΟϧλʔΛ௨͠ όΠϯσΟϯάΛߦ͏
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' } ] ɹ෮਺ͷϑΟϧλʔΛֻ͚Δࣄ͕Ͱ͖Δ
56. Stage 4 End
57. Stage 5 methodΛ࢖ͬͯΈΑ͏
58. thinking time
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 = ""
60. methods methods഑ԼʹϝιουΛఆٛ͢Δ ఆٛ͞Εͨϝιου͸directive͔Β௚઀ݺͿ͜ͱ͕Ͱ͖Δ
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ΠϕϯτΛϑΟϧλʔͰ
 ɹ੍ޚ͢Δ͜ͱ͕Ͱ͖Δ
62. Stage 5 End
63. ʂ
64. TODOΞϓϦΛ࡞ͬͯΈΑ͏
65. TODOΞϓϦ࢓༷
66. ࣮૷ϑΝΠϧ • coffee/demo6-1.coffee • haml/demo6-1.haml
67. Answer • coffee/demo6-2.coffee • haml/demo6-2.haml

68. demo7΋༻ҙͯ͋͠ΔͷͰ Vueʹڵຯ͕༙͍ͨํ͸ಡΜͰΈ͍ͯͩ͘͞
69. গ͚ͩ͠Vue.jsͷงғؾΛ͔ͭΊͨͰ͠ΐ͏͔ʁ
70. ಛ௃
71. Simple • API͕simpleͰػೳ΋গͳֶ͘शίετ͕௿͍ • ViewModelΛΠϯελϯεԽ͢Δ͚ͩͰ࢖͍࢝ΊΔࣄ͕Ͱ͖Δ ެࣜguideΛಡΉͷ͕͓͢͢ΊɻҰ೔͋Ε͹े෼ʹಡΊΔ
72. Fast ! • TodoMVC projectͷϕϯνϚʔΫςετ(ඇެࣜ)Ͱ࠷΋ૣ͍ • IE8ҎԼʹରԠ͍ͯ͠ͳ͍ͨΊɺJSͷ৽ػೳͷԸܙΛಘΒΕΔઃܭͱ ͳ͍ͬͯΔͷ͕େ͖͍͔΋͠Εͳ͍
73. Flexible • ଞͷϥΠϒϥϦͱ߹Θͤͯ࢖༻͢Δࣄ͕Ͱ͖Δ • ଞͷϥΠϒϥϦʹґଘ͍ͯ͠ͳ͍ Lo-Dash.jsͳͲ׳Εͨ͠ΜͩϥΠϒϥϦͱ૊Έ߹Θͤͯ࢖͏͜ͱ͕Ͱ͖Δ
74. next step
75. Read guide IUUQWVFKTPSHHVJEF
76. https://github.com/Kyuden/one-night-vue Give me github star
77. ࢀߟจݙ • http://vuejs.org/guide/ • http://todomvc.com/examples/vue/