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.6k
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.6k
365日24時間稼働必須サービスの 完全無停止DB移行
kyuden
23
10k
Why Rails 5.1
kyuden
1
640
Rails Authorization
kyuden
21
14k
Other Decks in Programming
See All in Programming
Google Sign-inの移行から始めるCredential Manager活用
clockvoid
0
310
Rubyのobject_id
qnighy
6
1.3k
The Sequel to a Dream of Ruby Parser's Grammar
ydah
1
220
RAGの回答精度評価用のQAデータセットを生成AIに作らせた話
kurahara
0
250
GoのIteratorに詳しくなってしまう
inatonix
1
200
エンジニア1年目で複雑なコードの改善に取り組んだ話
mtnmr
3
2k
watsonx.ai Dojo #2 生成AIを使ったアプリ開発入門編
oniak3ibm
PRO
0
180
Scala におけるコンパイラエラーとの付き合い方
chencmd
2
430
マイグレーションコード自作して File-Based Routing に自動移行!! ~250 ページの歴史的経緯を添えて~
cut0
1
260
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
What you can do with Ruby on WebAssembly
kateinoigakukun
0
170
Perl 5 OOP機構30年史 - Perl 5's OOP Mechanism over the past 30 years
moznion
0
250
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
Navigating Team Friction
lara
183
13k
Building Applications with DynamoDB
mza
90
6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.4k
In The Pink: A Labor of Love
frogandcode
139
22k
What's in a price? How to price your products and services
michaelherold
242
11k
A designer walks into a library…
pauljervisheath
201
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
38
9.2k
Docker and Python
trallard
39
3k
How to name files
jennybc
75
98k
Code Reviewing Like a Champion
maltzj
517
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/