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
700
Rails Authorization
kyuden
21
14k
Other Decks in Programming
See All in Programming
リストビュー画面UX改善の振り返り
splcywolf
0
120
AI Agents with JavaScript
slobodan
0
200
リアクティブシステムの変遷から理解するalien-signals / Learning alien-signals from the evolution of reactive systems
yamanoku
2
1.2k
Agentic Applications with Symfony
el_stoffel
2
240
Go1.24 go vetとtestsアナライザ
kuro_kurorrr
2
810
AHC045_解説
shun_pi
0
420
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
4
1k
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
590
Kamal 2 – Get Out of the Cloud
aleksandrov
1
160
アプリを起動せずにアプリを開発して品質と生産性を上げる
ishkawa
0
2.4k
リアルタイムレイトレーシング + ニューラルレンダリング簡単紹介 / Real-Time Ray Tracing & Neural Rendering: A Quick Introduction (2025)
shocker_0x15
1
280
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
170
Featured
See All Featured
Unsuck your backbone
ammeep
670
57k
A Tale of Four Properties
chriscoyier
158
23k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Optimizing for Happiness
mojombo
377
70k
Six Lessons from altMBA
skipperchong
27
3.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Become a Pro
speakerdeck
PRO
27
5.3k
Designing for Performance
lara
607
69k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Into the Great Unknown - MozCon
thekraken
36
1.7k
Code Reviewing Like a Champion
maltzj
522
39k
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/