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
リッチエディターを安全に開発・運用するために
unachang113
1
360
Constant integer division faster than compiler-generated code
herumi
2
280
実践 Dev Containers × Claude Code
touyu
1
140
kiroでゲームを作ってみた
iriikeita
0
140
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
0
320
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
790
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
QA x AIエコシステム段階構築作戦
osu
0
240
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
170
Flutterと Vibe Coding で個人開発!
hyshu
1
230
What's new in Adaptive Android development
fornewid
0
130
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
560
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Fireside Chat
paigeccino
38
3.6k
4 Signs Your Business is Dying
shpigford
184
22k
The Language of Interfaces
destraynor
158
25k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
332
22k
Statistics for Hackers
jakevdp
799
220k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Git: the NoSQL Database
bkeepers
PRO
431
65k
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/