Upgrade to Pro — share decks privately, control downloads, hide ads and more …

One Night Vue.js

One Night Vue.js

Vue.js tutorial for biginer
https://github.com/Kyuden/one-night-vue

Kyuden Masahiro

November 21, 2014
Tweet

More Decks by Kyuden Masahiro

Other Decks in Programming

Transcript

  1. haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

    coffee/demo1.coffee ! new Vue el: "#demo1" data: message: "Hello Vue"
  2. 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"
  3. haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

    coffee/demo1.coffee ! new Vue el: "#demo1" data: message: "Hello Vue"
  4. 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Λඥͮ͘
  5. 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ͷ؅ཧ֎ͱͳΔͷͰಈ࡞͠ͳ͍
  6. haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

    coffee/demo1.coffee ! new Vue el: "#demo1" data: message: "Hello Vue"
  7. 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``Λఆ͍ٛͯ͠Δ
  8. haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

    coffee/demo1.coffee ! new Vue el: "#demo1" data: message: "Hello Vue"
  9. 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λά಺ʹόΠϯσΟϯά͞ΕΔ
  10. haml/demo1.haml ! %body #demo1 %p{"v-text" => "message"} %input{"v-model" => "message"}

    coffee/demo1.coffee ! new Vue el: "#demo1" data: message: "Hello Vue"
  11. 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ϓϩύςΟ஋͕ߋ৽͞ΕΔ
  12. haml/demo2.haml ! #demo2
 %p {{ 'hello' + ' ' +

    user.firstName + ' ' + user.lastName }} coffee/demo2.coffee ! new Vue el: "#demo2" data: user: firstName: "Masahiro" lastName: "kyuden"
  13. 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"}
  14. 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' } ]
  15. 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Λ༩͑Δͱཁૉ਺෼࡞੒͞ ΕΔɻ
  16. 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
  17. 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' } ]
  18. 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
  19. 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' } ]
  20. 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ϑΟϧλʔΛ௨͠ όΠϯσΟϯάΛߦ͏
  21. 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' } ] ɹ෮਺ͷϑΟϧλʔΛֻ͚Δࣄ͕Ͱ͖Δ
  22. 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 = ""
  23. 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ΠϕϯτΛϑΟϧλʔͰ
 ɹ੍ޚ͢Δ͜ͱ͕Ͱ͖Δ
  24. ʂ