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
11k
Why Rails 5.1
kyuden
1
720
Rails Authorization
kyuden
21
14k
Other Decks in Programming
See All in Programming
令和最新版手のひらコンピュータ
koba789
14
8k
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.2k
RDoc meets YARD
okuramasafumi
3
140
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
880
兎に角、コードレビュー
mitohato14
0
150
Langfuseと歩む生成AI活用推進
licux
3
300
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
160
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
200
AHC051解法紹介
eijirou
0
630
パスタの技術
yusukebe
1
400
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
280
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Balancing Empowerment & Direction
lara
2
590
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
GitHub's CSS Performance
jonrohan
1031
460k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Gamification - CAS2011
davidbonilla
81
5.4k
Automating Front-end Workflow
addyosmani
1370
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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/