$30 off During Our Annual Pro Sale. View Details »

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. One Night Vue.js
    ສ༿ڀָ෦

    View Slide

  2. profile
    גࣜձࣾສ༿ / @Kyuden_

    View Slide

  3. Vue.js ࣄྫ঺հ
    ͜Μͳײ͡ͷ௨஌ػೳ͕20෼Ґ˞Ͱ࡞Ε·ͨ͠ɻͦΕ͘Β͍ѻ͍΍͍͢Ͱ͢ɻ
    ※σβΠϯͷ࣌ؒ͸আ͘

    View Slide

  4. Vue.js͞ΘͬͯΈ·͠ΐ͏

    View Slide

  5. https://github.com/Kyuden/one-night-vue
    ؀ڥߏங
    Cloneͯ͠README.mdΛಡΜͰͶ

    View Slide

  6. Stage 1
    ૒ํ޲όΠϯσΟϯάΛମݧ

    View Slide

  7. 2 staps
    1. ϒϥ΢βͰදࣔ
    • www/demo1.html

    2. ίʔυ͔ΒॲཧΛਪଌ
    • coffee/demo1.coffee
    • haml/demo1.haml


    View Slide

  8. thinking time

    View Slide

  9. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"

    View Slide

  10. Vue
    VueΫϥεͷίϯετϥΫλͰViewModelΛ࡞੒
    VueModelͰ͸ͳ͘ViewModel


    View Slide

  11. 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"

    View Slide

  12. next

    View Slide

  13. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"

    View Slide

  14. el
    ViewModelʹඥ෇͚ΔDOMཁૉΛࢦఆ
    1ͭͷViewModelʹ͸ҰͭͷDOM͔͠ඥ෇͚Δ͜ͱ͕ग़དྷͳ͍ͷͰIDͰࢦఆ

    View Slide

  15. 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Λඥͮ͘

    View Slide

  16. 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ͷ؅ཧ֎ͱͳΔͷͰಈ࡞͠ͳ͍

    View Slide

  17. next

    View Slide

  18. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"

    View Slide

  19. data
    ViewModel͕อ࣋͢ΔσʔλΛఆٛ
    ViewModelͷϓϩύςΟʹΞΫηε͢ΔϓϩΩγͱݴͬͯ΋ྑ͍

    View Slide

  20. 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``Λఆ͍ٛͯ͠Δ

    View Slide

  21. next

    View Slide

  22. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"

    View Slide

  23. v-text
    DOMཁૉͷ಺ଆΛViewModelͷϓϩύςΟ஋ͰόΠϯσΟϯά͢Δ
    v-̋̋̋ΛDirectiveͱݺͿɻEX) v-textσΟϨΫςΟϒ

    View Slide

  24. 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λά಺ʹόΠϯσΟϯά͞ΕΔ

    View Slide

  25. next

    View Slide

  26. haml/demo1.haml
    !
    %body
    #demo1
    %p{"v-text" => "message"}
    %input{"v-model" => "message"}
    coffee/demo1.coffee
    !
    new Vue
    el: "#demo1"
    data:
    message: "Hello Vue"

    View Slide

  27. v-model
    %input΍%select΍%textareaͳͲฤूՄೳͳཁૉΛ࢖༻͠

    ViewͱViewModleؒͰ૒ํ޲σʔλόΠϯσΟϯάΛߦ͏
    σʔλ͸ৗʹಉظ͞ΕΔ(ಉظͷλΠϛϯάΛࢦఆ͢ΔΦϓγϣϯ΋ଘࡏ͢Δ)

    View Slide

  28. 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ϓϩύςΟ஋͕ߋ৽͞ΕΔ

    View Slide

  29. Stage 1 End

    View Slide

  30. Stage 2
    {{ }}

    View Slide

  31. 2 staps
    1. ϒϥ΢βͰදࣔ
    • www/demo2.html

    2. ίʔυ͔ΒॲཧΛਪଌ
    • coffee/demo2.coffee
    • haml/demo2.haml

    Ҏޙলུ(શStageಉ͡Ͱ͢)

    View Slide

  32. thinking time

    View Slide

  33. haml/demo2.haml
    !
    #demo2

    %p {{ 'hello' + ' ' + user.firstName + ' ' + user.lastName }}
    coffee/demo2.coffee
    !
    new Vue
    el: "#demo2"
    data:
    user:
    firstName: "Masahiro"
    lastName: "kyuden"

    View Slide

  34. {{ }}
    Mustache͸v-textͱͯ͠ίϯύΠϧ͞ΕΔ
    MustacheςΩετҎ֎ʹHTMLଐੑࢦఆͰ΋࢖༻͢Δ͜ͱ͕Ͱ͖Δ

    View Slide

  35. 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"}

    View Slide

  36. Stage 2 End

    View Slide

  37. Stage 3
    ৭ʑͳDirectiveΛ࢖ͬͯΈΑ͏

    View Slide

  38. thinking time

    View Slide

  39. 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'
    }
    ]

    View Slide

  40. v-repeat
    ഑ྻΛࢦఆ͢ΔࣄͰࢠͷViewModelΛ࡞੒͢Δ

    (഑ྻͷཁૉͷ਺͚ͩ܁Γฦ࣮͠ߦ͞ΕΔ)
    Ҿ਺͕ͳ͍৔߹͸ViewModelͷDataΛ഑ྻͱͯ͠ѻ͏

    View Slide

  41. 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Λ༩͑Δͱཁૉ਺෼࡞੒͞
    ΕΔɻ

    View Slide

  42. next

    View Slide

  43. 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

    View Slide

  44. {{ }}
    MustacheͷBinding͸HTMLଐੑࢦఆͰ΋༗ޮ
    ͨͩ͠%imgͷsrcࢦఆ͸v-attrΛ࢖༻͢Δ΂͖ɻ

    ϒϥ΢βධՁ࣌ʹMustacheܗࣜͷ··HTTPϦΫΤετΛൃߦ͠404͕ى͖ΔͨΊ

    View Slide

  45. next

    View Slide

  46. 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'
    }
    ]

    View Slide

  47. v-on
    ΠϕϯτϦεφʔΛཁૉʹొ࿥͢Δɻؔ਺͔ࣜΛҾ਺ͰධՁ͢Δɻ
    ΩʔλΠϓΠϕϯτͳͲ΋༻ҙ͞Ε͍ͯΔ

    View Slide

  48. 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

    View Slide

  49. Stage 3 End

    View Slide

  50. Stage 4
    filterΛ࢖ͬͯΈΑ͏

    View Slide

  51. thinking time

    View Slide

  52. 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'
    }
    ]

    View Slide

  53. |
    ೚ҙͷϑΟϧλʔͰ஋Λॲཧ͢Δ͜ͱ͕Ͱ͖Δ
    σΟϨΫςΟϒ͝ͱʹϑΟϧλʔͷ࢖༻༻్͸ҟͳΔ

    View Slide

  54. 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ϑΟϧλʔΛ௨͠
    όΠϯσΟϯάΛߦ͏

    View Slide

  55. 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'
    }
    ]
    ɹ෮਺ͷϑΟϧλʔΛֻ͚Δࣄ͕Ͱ͖Δ

    View Slide

  56. Stage 4 End

    View Slide

  57. Stage 5
    methodΛ࢖ͬͯΈΑ͏

    View Slide

  58. thinking time

    View Slide

  59. 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 = ""

    View Slide

  60. methods
    methods഑ԼʹϝιουΛఆٛ͢Δ
    ఆٛ͞Εͨϝιου͸directive͔Β௚઀ݺͿ͜ͱ͕Ͱ͖Δ

    View Slide

  61. 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ΠϕϯτΛϑΟϧλʔͰ

    ɹ੍ޚ͢Δ͜ͱ͕Ͱ͖Δ

    View Slide

  62. Stage 5 End

    View Slide

  63. ʂ

    View Slide

  64. TODOΞϓϦΛ࡞ͬͯΈΑ͏

    View Slide

  65. TODOΞϓϦ࢓༷

    View Slide

  66. ࣮૷ϑΝΠϧ
    • coffee/demo6-1.coffee
    • haml/demo6-1.haml

    View Slide

  67. Answer
    • coffee/demo6-2.coffee
    • haml/demo6-2.haml


    View Slide

  68. demo7΋༻ҙͯ͋͠ΔͷͰ
    Vueʹڵຯ͕༙͍ͨํ͸ಡΜͰΈ͍ͯͩ͘͞

    View Slide

  69. গ͚ͩ͠Vue.jsͷงғؾΛ͔ͭΊͨͰ͠ΐ͏͔ʁ

    View Slide

  70. ಛ௃

    View Slide

  71. Simple
    • API͕simpleͰػೳ΋গͳֶ͘शίετ͕௿͍
    • ViewModelΛΠϯελϯεԽ͢Δ͚ͩͰ࢖͍࢝ΊΔࣄ͕Ͱ͖Δ
    ެࣜguideΛಡΉͷ͕͓͢͢ΊɻҰ೔͋Ε͹े෼ʹಡΊΔ

    View Slide

  72. Fast
    !
    • TodoMVC projectͷϕϯνϚʔΫςετ(ඇެࣜ)Ͱ࠷΋ૣ͍
    • IE8ҎԼʹରԠ͍ͯ͠ͳ͍ͨΊɺJSͷ৽ػೳͷԸܙΛಘΒΕΔઃܭͱ
    ͳ͍ͬͯΔͷ͕େ͖͍͔΋͠Εͳ͍

    View Slide

  73. Flexible
    • ଞͷϥΠϒϥϦͱ߹Θͤͯ࢖༻͢Δࣄ͕Ͱ͖Δ
    • ଞͷϥΠϒϥϦʹґଘ͍ͯ͠ͳ͍
    Lo-Dash.jsͳͲ׳Εͨ͠ΜͩϥΠϒϥϦͱ૊Έ߹Θͤͯ࢖͏͜ͱ͕Ͱ͖Δ

    View Slide

  74. next step

    View Slide

  75. Read guide
    IUUQWVFKTPSHHVJEF

    View Slide

  76. https://github.com/Kyuden/one-night-vue
    Give me github star

    View Slide

  77. ࢀߟจݙ
    • http://vuejs.org/guide/
    • http://todomvc.com/examples/vue/

    View Slide