Vue.js tutorial for biginer https://github.com/Kyuden/one-night-vue
One Night Vue.jsສ༿ڀָ෦
View Slide
profileגࣜձࣾສ༿ / @Kyuden_
Vue.js ࣄྫհ͜Μͳײ͡ͷ௨ػೳ͕20Ґ˞Ͱ࡞Ε·ͨ͠ɻͦΕ͘Β͍ѻ͍͍͢Ͱ͢ɻ※σβΠϯͷ࣌ؒআ͘
Vue.js͞ΘͬͯΈ·͠ΐ͏
https://github.com/Kyuden/one-night-vueڥߏஙCloneͯ͠README.mdΛಡΜͰͶ
Stage 1ํόΠϯσΟϯάΛମݧ
2 staps1. ϒϥβͰදࣔ• www/demo1.html 2. ίʔυ͔ΒॲཧΛਪଌ• coffee/demo1.coffee• haml/demo1.haml
thinking time
haml/demo1.haml!%body#demo1%p{"v-text" => "message"}%input{"v-model" => "message"}coffee/demo1.coffee!new Vueel: "#demo1"data:message: "Hello Vue"
VueVueΫϥεͷίϯετϥΫλͰViewModelΛ࡞VueModelͰͳ͘ViewModel
haml/demo1.haml!%body#demo1%p{"v-text" => "message"}%input{"v-model" => "message"}coffee/demo1.coffee!new Vueel: "#demo1"data:message: "Hello Vue"ɹ ҎԼͷॳظΛVueΫϥεͷίϯετϥΫλʹ͠ ViewModelΛ࡞͍ͯ͠Δɹ el: "#demo1"data:message: "Hello Vue"
next
elViewModelʹඥ͚ΔDOMཁૉΛࢦఆ1ͭͷViewModelʹҰͭͷDOM͔͠ඥ͚Δ͜ͱ͕ग़དྷͳ͍ͷͰIDͰࢦఆ
haml/demo1.haml!%body#demo1%p{"v-text" => "message"}%input{"v-model" => "message"}coffee/demo1.coffee!new Vueel: "#demo1"data:message: "Hello Vue"T ɹEFNPͷ%0.Λࢦఆ͍ͯ͠ΔEFNPͷ%0.͕7JFX.PEFMΛඥͮ͘
haml/demo1.haml!%body#demo1%p{"v-text" => "message"}%input{"v-model" => "message"}coffee/demo1.coffee!new Vueel: "#demo2"data:message: "Hello Vue"TɹEFNPΛEFNPʹมߋ͢Δͱ ɹ7JFX.PEFMͷཧ֎ͱͳΔͷͰಈ࡞͠ͳ͍
dataViewModel͕อ࣋͢ΔσʔλΛఆٛViewModelͷϓϩύςΟʹΞΫηε͢ΔϓϩΩγͱݴͬͯྑ͍
haml/demo1.haml!%body#demo1%p{"v-text" => "message"}%input{"v-model" => "message"}coffee/demo1.coffee!new Vueel: "#demo1"data:message: "Hello Vue"ɹEBUBԼʹNFTTBHFϓϩύςΟͱͯ͠ɹ ɹॳظb`)FMMP7VF``Λఆ͍ٛͯ͠Δ
v-textDOMཁૉͷଆΛViewModelͷϓϩύςΟͰόΠϯσΟϯά͢Δv-̋̋̋ΛDirectiveͱݺͿɻEX) v-textσΟϨΫςΟϒ
haml/demo1.haml!%body#demo1%p{"v-text" => "message"}%input{"v-model" => "message"}coffe/demo1.coffee!new Vueel: "#demo1"data:message: "Hello Vue"ɹNFTTBHFϓϩύςΟ)FMMP7VFz͕ ɹQλάʹόΠϯσΟϯά͞ΕΔ
v-model%input%select%textareaͳͲฤूՄೳͳཁૉΛ༻͠ ViewͱViewModleؒͰํσʔλόΠϯσΟϯάΛߦ͏σʔλৗʹಉظ͞ΕΔ(ಉظͷλΠϛϯάΛࢦఆ͢ΔΦϓγϣϯଘࡏ͢Δ)
haml/demo1.haml!%body#demo1%p{"v-text" => "message"}%input{"v-model" => "message"}coffe/demo1.coffee!new Vueel: "#demo1"data:message: "Hello Vue"ɹJOQVUཁૉͷೖྗʹԠͯ͡ ɹNFTTBHFϓϩύςΟΛಉظͤ͞ΔɹJOQVUཁૉͷೖྗʹԠͯ͡ ɹNFTTBHFϓϩύςΟ͕ߋ৽͞ΕΔ
Stage 1 End
Stage 2{{ }}
2 staps1. ϒϥβͰදࣔ• www/demo2.html 2. ίʔυ͔ΒॲཧΛਪଌ• coffee/demo2.coffee• haml/demo2.haml Ҏޙলུ(શStageಉ͡Ͱ͢)
haml/demo2.haml!#demo2 %p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}coffee/demo2.coffee!new Vueel: "#demo2"data:user:firstName: "Masahiro"lastName: "kyuden"
{{ }}Mustachev-textͱͯ͠ίϯύΠϧ͞ΕΔMustacheςΩετҎ֎ʹHTMLଐੑࢦఆͰ༻͢Δ͜ͱ͕Ͱ͖Δ
haml/demo2.haml!#demo2 %p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}coffee/demo2.coffee!new Vueel: "#demo2"data:user:firstName: "Masahiro"lastName: "kyuden"%p{"v-text" => "'hello ' + user.firstName + ' ' + user.lastName"}
Stage 2 End
Stage 3৭ʑͳDirectiveΛͬͯΈΑ͏
haml/demo3.haml!#demo3%ul/stepᶃ%li{"v-repeat" => "todos"}{{content}}coffee/demo3.coffee!new Vueel: '#demo3'data:todos: [{done: truecontent: 'Learn JS'}{done: falsecontent: 'Learn vue.js'}{done: truecontent: 'Lean yourself'}]
v-repeatྻΛࢦఆ͢ΔࣄͰࢠͷViewModelΛ࡞͢Δ (ྻͷཁૉͷ͚ͩ܁Γฦ࣮͠ߦ͞ΕΔ)Ҿ͕ͳ͍߹ViewModelͷDataΛྻͱͯ͠ѻ͏
haml/demo3.haml!#demo3%ul/stepᶃ%li{"v-repeat" => "todos"}{{content}}coffee/demo3.coffee!new Vueel: '#demo3'data:todos: [{done: truecontent: 'Learn JS'}{done: falsecontent: 'Learn vue.js'}{done: truecontent: 'Lean yourself'}]ྻͰ͋ΔUPEPTΛ༩͑Δͱཁૉ࡞͞ΕΔɻ
haml/demo3.haml!#demo3%ul/stepᶄ%li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos"}{{content}}coffee/demo3.coffee!new Vueel: '#demo3'data:todos: [{done: truecontent: 'Learn JS'}{done: falsecontent: 'Learn vue.js'}{done: truecontent: 'Lean yourself'}]sass/style.sass!li.donetext-decoration: line-through
{{ }}MustacheͷBindingHTMLଐੑࢦఆͰ༗ޮͨͩ͠%imgͷsrcࢦఆv-attrΛ༻͢Δ͖ɻ ϒϥβධՁ࣌ʹMustacheܗࣜͷ··HTTPϦΫΤετΛൃߦ͠404͕ى͖ΔͨΊ
haml/demo3.haml!#demo3%ulɹɹ/stepᶅ%li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}{{content}}coffee/demo3.coffee!new Vueel: '#demo3'data:todos: [{done: truecontent: 'Learn JS'}{done: falsecontent: 'Learn vue.js'}{done: truecontent: 'Lean yourself'}]
v-onΠϕϯτϦεφʔΛཁૉʹొ͢Δɻ͔ؔࣜΛҾͰධՁ͢ΔɻΩʔλΠϓΠϕϯτͳͲ༻ҙ͞Ε͍ͯΔ
haml/demo3.haml!#demo3%ulɹɹ/stepᶅ%li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}{{content}}coffee/demo3.coffee!new Vueel: '#demo3'data:todos: [{done: truecontent: 'Learn JS'}{done: falsecontent: 'Learn vue.js'}{done: truecontent: 'Lean yourself'}]ɹDMJDL͞Εͨ࣌ʹɹɹɹɹɹɹɹΛධՁ͢ΔEPOFEPOF
Stage 3 End
Stage 4filterΛͬͯΈΑ͏
haml/demo4.haml!#demo4%ul%li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}/stepᶃ{{content | uppercase}}coffee/demo4.coffee!new Vueel: '#demo4'data:todos: [{done: truecontent: 'Learn JS'}{done: falsecontent: 'Learn vue.js'}{done: truecontent: 'Lean yourself'}]
|ҙͷϑΟϧλʔͰΛॲཧ͢Δ͜ͱ͕Ͱ͖ΔσΟϨΫςΟϒ͝ͱʹϑΟϧλʔͷ༻༻్ҟͳΔ
haml/demo4.haml!#demo4%ul%li{class: "{{done ? 'done' : ''}}", "v-repeat" => "todos", "v-on" => "click: done = !done"}/stepᶃ{{content | uppercase}}coffee/demo4.coffee!new Vueel: '#demo4'data:todos: [{done: truecontent: 'Learn JS'}{done: falsecontent: 'Learn vue.js'}{done: truecontent: 'Lean yourself'}]$POUFOUʹର͠VQQFSDBTFϑΟϧλʔΛ௨͠όΠϯσΟϯάΛߦ͏
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 Vueel: '#demo4'data:todos: [{done: truecontent: 'Learn JS'}{done: falsecontent: 'Learn vue.js'}{done: truecontent: 'Lean yourself'}]ɹ෮ͷϑΟϧλʔΛֻ͚Δࣄ͕Ͱ͖Δ
Stage 4 End
Stage 5methodΛͬͯΈΑ͏
haml/demo5.haml!#demo5%p {{displayName}}%input{ "v-model" => "newName", "v-on" => "keyup:addName | key enter"}coffee/demo5.coffee !new Vueel: '#demo5'data:nameList: []displayName: ""newName: ""methods:addName: ->@displayName = @newName@newName = ""
methodsmethodsԼʹϝιουΛఆٛ͢Δఆٛ͞Εͨϝιουdirective͔ΒݺͿ͜ͱ͕Ͱ͖Δ
haml/demo5.haml!#demo5%p {{displayName}}%input{ "v-model" => "newName", "v-on" => "keyup:addName | key enter"}coffee/demo5.coffee !new Vueel: '#demo5'data:nameList: []displayName: ""newName: ""methods:addName: ->@displayName = @newName@newName = ""ɹNFUIPEͷίϯςΩετ7JFX.PEFM ɹͷΠϯελϯεʹͳΔɹWPOͰLFZΠϕϯτΛϑΟϧλʔͰ ɹ੍ޚ͢Δ͜ͱ͕Ͱ͖Δ
Stage 5 End
ʂ
TODOΞϓϦΛ࡞ͬͯΈΑ͏
TODOΞϓϦ༷
࣮ϑΝΠϧ• coffee/demo6-1.coffee• haml/demo6-1.haml
Answer• coffee/demo6-2.coffee• haml/demo6-2.haml
demo7༻ҙͯ͋͠ΔͷͰVueʹڵຯ͕༙͍ͨํಡΜͰΈ͍ͯͩ͘͞
গ͚ͩ͠Vue.jsͷงғؾΛ͔ͭΊͨͰ͠ΐ͏͔ʁ
ಛ
Simple• API͕simpleͰػೳগͳֶ͘शίετ͕͍• ViewModelΛΠϯελϯεԽ͢Δ͚ͩͰ͍࢝ΊΔࣄ͕Ͱ͖ΔެࣜguideΛಡΉͷ͕͓͢͢ΊɻҰ͋ΕेʹಡΊΔ
Fast!• TodoMVC projectͷϕϯνϚʔΫςετ(ඇެࣜ)Ͱ࠷ૣ͍• IE8ҎԼʹରԠ͍ͯ͠ͳ͍ͨΊɺJSͷ৽ػೳͷԸܙΛಘΒΕΔઃܭͱͳ͍ͬͯΔͷ͕େ͖͍͔͠Εͳ͍
Flexible• ଞͷϥΠϒϥϦͱ߹Θͤͯ༻͢Δࣄ͕Ͱ͖Δ• ଞͷϥΠϒϥϦʹґଘ͍ͯ͠ͳ͍Lo-Dash.jsͳͲ׳Εͨ͠ΜͩϥΠϒϥϦͱΈ߹Θͤͯ͏͜ͱ͕Ͱ͖Δ
next step
Read guideIUUQWVFKTPSHHVJEF
https://github.com/Kyuden/one-night-vueGive me github star
ࢀߟจݙ• http://vuejs.org/guide/• http://todomvc.com/examples/vue/