Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
One Night Vue.js
Search
Kyuden Masahiro
November 21, 2014
Programming
14
3.7k
One Night Vue.js
Vue.js tutorial for biginer
https://github.com/Kyuden/one-night-vue
Kyuden Masahiro
November 21, 2014
Tweet
Share
More Decks by Kyuden Masahiro
See All by Kyuden Masahiro
Red-Black Tree for Ruby
kyuden
1
1.8k
365日24時間稼働必須サービスの 完全無停止DB移行
kyuden
23
10k
Why Rails 5.1
kyuden
1
710
Rails Authorization
kyuden
21
14k
Other Decks in Programming
See All in Programming
flutter_kaigi_mini_4.pdf
nobu74658
0
160
カウシェで Four Keys の改善を試みた理由
ike002jp
1
140
Browser and UI #2 HTML/ARIA
ken7253
2
190
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
tomohisa
0
260
私のRubyKaigi 2025 Kaigi Effect / My RubyKaigi 2025 Kaigi Effect
chobishiba
1
180
AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era
dachi023
0
160
JAWS DAYS 2025 re_Cheers: WEB
komakichi
0
130
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @jax2025 in Mainz, Germany
manfredsteyer
PRO
0
110
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
160
リアーキテクチャの現場で向き合う 既存サービスの読み解きと設計判断
ymiyamu
0
150
UMAPをざっくりと理解 / Overview of UMAP
kaityo256
PRO
3
1.6k
AI Coding Agents Enablement in TypeScript
yukukotani
9
1.7k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Thoughts on Productivity
jonyablonski
69
4.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Making Projects Easy
brettharned
116
6.2k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.7k
Facilitating Awesome Meetings
lara
54
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
GitHub's CSS Performance
jonrohan
1031
460k
Transcript
One Night Vue.js ສ༿ڀָ෦
profile גࣜձࣾສ༿ / @Kyuden_
Vue.js ࣄྫհ ͜Μͳײ͡ͷ௨ػೳ͕20Ґ˞Ͱ࡞Ε·ͨ͠ɻͦΕ͘Β͍ѻ͍͍͢Ͱ͢ɻ ※σβΠϯͷ࣌ؒআ͘
Vue.js͞ΘͬͯΈ·͠ΐ͏
https://github.com/Kyuden/one-night-vue ڥߏங Cloneͯ͠README.mdΛಡΜͰͶ
Stage 1 ํόΠϯσΟϯάΛମݧ
2 staps 1. ϒϥβͰදࣔ • 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 Vue el: "#demo1" data: message: "Hello Vue"
Vue VueΫϥεͷίϯετϥΫλͰViewModelΛ࡞ VueModelͰͳ͘ViewModel
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"
next
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee ! new Vue el: "#demo1" data: message: "Hello Vue"
el ViewModelʹඥ͚ΔDOMཁૉΛࢦఆ 1ͭͷViewModelʹҰͭͷDOM͔͠ඥ͚Δ͜ͱ͕ग़དྷͳ͍ͷͰIDͰࢦఆ
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Λඥͮ͘
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ͷཧ֎ͱͳΔͷͰಈ࡞͠ͳ͍
next
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee ! new Vue el: "#demo1" data: message: "Hello Vue"
data ViewModel͕อ࣋͢ΔσʔλΛఆٛ ViewModelͷϓϩύςΟʹΞΫηε͢ΔϓϩΩγͱݴͬͯྑ͍
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``Λఆ͍ٛͯ͠Δ
next
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee ! new Vue el: "#demo1" data: message: "Hello Vue"
v-text DOMཁૉͷଆΛViewModelͷϓϩύςΟͰόΠϯσΟϯά͢Δ v-̋̋̋ΛDirectiveͱݺͿɻEX) v-textσΟϨΫςΟϒ
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λάʹόΠϯσΟϯά͞ΕΔ
next
haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}
coffee/demo1.coffee ! new Vue el: "#demo1" data: message: "Hello Vue"
v-model %input%select%textareaͳͲฤूՄೳͳཁૉΛ༻͠ ViewͱViewModleؒͰํσʔλόΠϯσΟϯάΛߦ͏ σʔλৗʹಉظ͞ΕΔ(ಉظͷλΠϛϯάΛࢦఆ͢ΔΦϓγϣϯଘࡏ͢Δ)
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ϓϩύςΟ͕ߋ৽͞ΕΔ
Stage 1 End
Stage 2 {{ }}
2 staps 1. ϒϥβͰදࣔ • www/demo2.html 2. ίʔυ͔ΒॲཧΛਪଌ • coffee/demo2.coffee
• haml/demo2.haml Ҏޙলུ(શStageಉ͡Ͱ͢)
thinking time
haml/demo2.haml ! #demo2 %p {{ 'hello' + ' ' +
user.firstName + ' ' + user.lastName }} coffee/demo2.coffee ! new Vue el: "#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 Vue el: "#demo2" data: user: firstName: "Masahiro" lastName: "kyuden" %p{"v-text" => "'hello ' + user.firstName + ' ' + user.lastName"}
Stage 2 End
Stage 3 ৭ʑͳDirectiveΛͬͯΈΑ͏
thinking time
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' } ]
v-repeat ྻΛࢦఆ͢ΔࣄͰࢠͷViewModelΛ࡞͢Δ (ྻͷཁૉͷ͚ͩ܁Γฦ࣮͠ߦ͞ΕΔ) Ҿ͕ͳ͍߹ViewModelͷDataΛྻͱͯ͠ѻ͏
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Λ༩͑Δͱཁૉ࡞͞ ΕΔɻ
next
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
{{ }} MustacheͷBindingHTMLଐੑࢦఆͰ༗ޮ ͨͩ͠%imgͷsrcࢦఆv-attrΛ༻͢Δ͖ɻ ϒϥβධՁ࣌ʹMustacheܗࣜͷ··HTTPϦΫΤετΛൃߦ͠404͕ى͖ΔͨΊ
next
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' } ]
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 Vue el: '#demo3' data: todos: [ { done: true content: 'Learn JS' } { done: false content: 'Learn vue.js' } { done: true content: 'Lean yourself' } ] ɹDMJDL͞Εͨ࣌ʹɹɹɹɹɹɹɹΛධՁ͢Δ EPOFEPOF
Stage 3 End
Stage 4 filterΛͬͯΈΑ͏
thinking time
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' } ]
| ҙͷϑΟϧλʔͰΛॲཧ͢Δ͜ͱ͕Ͱ͖Δ σΟϨΫςΟϒ͝ͱʹϑΟϧλʔͷ༻༻్ҟͳΔ
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ϑΟϧλʔΛ௨͠ όΠϯσΟϯάΛߦ͏
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' } ] ɹ෮ͷϑΟϧλʔΛֻ͚Δࣄ͕Ͱ͖Δ
Stage 4 End
Stage 5 methodΛͬͯΈΑ͏
thinking time
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 = ""
methods methodsԼʹϝιουΛఆٛ͢Δ ఆٛ͞Εͨϝιουdirective͔ΒݺͿ͜ͱ͕Ͱ͖Δ
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ΠϕϯτΛϑΟϧλʔͰ ɹ੍ޚ͢Δ͜ͱ͕Ͱ͖Δ
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 guide IUUQWVFKTPSHHVJEF
https://github.com/Kyuden/one-night-vue Give me github star
ࢀߟจݙ • http://vuejs.org/guide/ • http://todomvc.com/examples/vue/