Next Vue.js 0.12

Transcript

1. Next Vue.js 0.12
   Data Binding JS Night
   2015-05-27
   @kazupon
   

   View Slide

2. ࣗݾ঺հ
   • @kazupon
   • ໾ׂɿϦʔυΤϯδχΞ
   • ࢓ࣄɿ։ൃશൠ 

   (ϑϩϯτΤϯυ/όοΫΤϯυ/Πϯϑϥ)
   • Vue.jsͱͷؔΘΓɿ

   Vue.js organizationͷϝϯόͱͯ͠vuejs/vue-validator
   ͷϝϯςφͯ͠·͢
   • ࠷ۙͷJSؔ࿈ͷڵຯɿ

   FRP | Stream | ServiceWorker | nodejs/NG | electron
   

   View Slide

3. ͸͡Ίʹ
   • ࠓ೔͓࿩͢Δ಺༰͸ɺҎԼͷ৘ใͱݱ࣌఺࠷৽Ͱ͋Δ
   0.12βͷಈ࡞֬ೝΛݩʹͨ͠಺༰Ͱ͢
   • Release Tag

   - https://github.com/yyx990803/vue/releases/tag/0.12.0-beta2

   - https://github.com/yyx990803/vue/releases/tag/0.12.0-beta3
   • 0.12 Plan - feedback welcome (vuejs/Discussion)

   - https://github.com/vuejs/Discussion/issues/158
   • ·ͩ։ൃதͳͷͰɺ࠷ऴతʹϦϦʔε͞ΕΔ0.12Ͱ͸ɺ
   ຊൃදͷ಺༰Λ֬ূͰ͖Δ΋ͷͰ͸͋Γ·ͤΜ
   

   View Slide

4. 0.12Ͱ໨ۄͳϞϊ
   • ৽ػೳ
   • async components
   • element directives
   • ࢓༷มߋ
   • partial
   • filter
   • v-with directive
   • paramAttributes option
   • v-component directive
   

   View Slide

5. ৽ػೳ
   

   View Slide

6. async components
   

   View Slide

7. async components
   • ैདྷͷίϯϙʔωϯτͷ࢖͍ํ

   Vue.extendͨ͠αϒΫϥε·ͨ͸ΦϒδΣΫτΛࢦఆ
   ͯ͠ಉظతʹొ࿥
   new Vue({
   el: '#app',
   data: {
   a: 1,
   b: 2
   },
   components: {
   child1: Vue.extend({ // case1: Vue.extend
   template: 'child1'
   }),
   child2: { // case2: Object
   template: 'child2'
   }
   }
   })
   

   View Slide

8. async components
   • ैདྷͷίϯϙʔωϯτγεςϜʹ͓͚Δ໰୊఺
   • ΞϓϦ͕΋Γ΋Γ੒௕ͯ͠େ͖͘ͳͬͯ͘ΔͱɺΞϓ
   Ϧॳظϩʔυ͕஗͘ͳΓ͕ͪ
   • ίϯϙʔωϯτͷ஗ԆϩʔσΟϯάʹΑΔΞϓϦ։ൃ
   ͸͔ͳΓΊΜͲ͍͘͞
   

   View Slide

9. async components
   • 0.12Ҏ߱Ͱ͸ɺίϯϙʔωϯτͷ஗ԆϩʔσΟϯάΛ࣮
   ૷ͨؔ͠਺Λࢦఆ͢Δ͜ͱʹΑͬͯɺ໰୊Λղܾ͢Δ͜
   ͱ͕Ͱ͖Δ
   new Vue({
   el: '#app',
   components: {
   child1: function (resolve) {
   // load component
   loadComponent(function (component) {
   resolve(component) // resolve component !!
   }
   }
   }
   })
   

   View Slide

10. async components
    • ྫ: require.js
    
    
    
    
    
    // JS (main)
    new Vue({
    el: '#app',
    data: {
    message: 'hello world !!'
    },
    components: {
    'async-child': function (resolve) {
    // with require.js
    require(['./module1.js'], resolve)
    }
    }
    })
    // JS (module1)
    module.exports = {
    props: ['child-msg'],
    template: '{{childMsg}}'
    }
    https://jsfiddle.net/kazupon/39mbpaz9/3/
    

    View Slide

11. async components
    • ྫ: webpack (code-splitting)
    
    
    
    
    
    // JS (main)
    new Vue({
    el: '#app',
    data: {
    message: 'hello world !!'
    },
    components: {
    'async-child': function (resolve) {
    // with webpack
    require.ensure(['./module1.js'],
    function (require) {
    require(['./module1.js'], resolve)
    }
    }
    }
    })
    // JS (module1)
    module.exports = {
    props: ['child-msg'],
    template: '{{childMsg}}'
    }
    

    View Slide

12. element
    directives
    

    View Slide

13. element directives
    • ैདྷͷdirective/custom direcitves͸ɺର৅ͱͳ
    Δλάʹରͯ͠ଐੑతʹࢦఆ͢Δ͜ͱʹΑͬͯػೳΛ௥
    Ճ
    
    
    v-model="comment"
    v-validate="minLength: 16, maxLength: 128">
    
    too long your comment.
    too short your comment.
    
    
    
    

    View Slide

14. element directives
    • element directives͸ɺΧελϜλ
    άશମʹରͯ͠ػೳΛ௥ՃͰ͖Δ 

    (AngularͷRestrict Eʹ૬౰)
    • ࣮૷ํ๏͸custom directivesͱಉ
    ༷ɺbind/update/unbindΛ࣮૷
    • ԼهΞηοτAPIͰొ࿥

    - Vue.elementDirective 

    (άϩʔόϧΞηοτ)

    - elementDirectives 

    (ϓϥΠϕʔτΞηοτ)
    
    
    
    {{message}}
    
    
    // JS
    new Vue({
    el: '#app',
    data: {
    message: 'hello world !!'
    },
    elementDirectives: { // private
    'element-directive': {
    bind: function () {
    // ...
    },
    update: function (val, old) {
    // ...
    },
    unbind: function () {
    // ...
    }
    }
    }
    })
    

    View Slide

15. element directives
    • custom directivesͱͷҧ͍

    1. argͱexpression͸ड͚ೖΕෆՄ
    https://jsfiddle.net/kazupon/gv9wLL94/10/
    
    
    
    value="view1" v-model="view">
    value="view2" v-model="view">
    
    current view : view1
    
    # element directive ͷҾ਺ͷ಺༰
    name: {{name}}
    arg: {{arg}}
    expression: {{expression}}
    raw: {{raw}}
    
    
    new Vue({
    data: { view: ‘view1' },
    elementDirectives: {
    view: {
    bind: function () {
    var self = this
    this.vm.$set('arg', this.arg) //
    undefined
    this.vm.$set('expression',
    this.expression) // “”
    this.vm.$set('raw', this.raw) // “”
    this.vm.$set('name', this.name) // view
    this._watcher = this.vm.$watch('view',
    function (val, old) {
    self.update(val, old)
    })
    },
    ...
    

    View Slide

16. element directives
    • custom directivesͱͷҧ͍

    2. λʔϛφϧͳσΟϨΫςΟϒͳͷͰɺΧελϜλά಺ʹ͋Δࢠͷλάʹ
    ରͯ͠ίϯύΠϧॲཧ͕εΩοϓ͞ΕΔ

    

    ͭ·Γ

    

    - ΧελϜλά಺ΛDOMΛ࢖ͬͯࣗ༝ʹૢ࡞͢Δ͜ͱ͕Ͱ͖Δ

    - VueίϯϙʔωϯτͷΠϯελϯεੜ੒ͷΦʔόʔϔου͕ͳ͍

    

    ͳͷͰɺ

    

    ύϑΥʔϚϯε͕ٻΊΒΕΔίϯϙʔωϯτΛ࡞Δʹ͸ɺίϯϙʔωϯτγ
    εςϜͷΦϧλφςΟϒͳ΋ͷͱͯ͠ར༻Ͱ͖Δ
    

    View Slide

17. element directives
    • element directivesΛ࢖ͬͨ΋ͷ
    • Vue.js͕ఏڙ͢Δϧʔλ (WIP)

    vuejs/vue-router

    https://github.com/vuejs/vue-router
    

    View Slide

18. ࢓༷มߋ
    

    View Slide

19. partial
    

    View Slide

20. partial
    • v-partial directiveͱ{{>partial}}ϒϩοΫͷഇ
    ࢭ

    

    

    

    

    • ͜Εʹ൐͍ɺpartialΛొ࿥͢ΔΞηοτAPI΋࡟আ

    (άϩʔόϧɺϓϥΠϕʔτ྆ํ)
    
    
    
    {{>my-partial}}
    

    View Slide

21. ͳͥഇࢭ͢Δͷ͔ʁ
    partial
    

    View Slide

22. partial
    • partial͸จࣈྻϕʔεͷςϯϓϨʔτ͔ΒͷҨ࢈
    • ίϯϙʔωϯτϕʔεͳVue.jsͰ͸͋·Γ༗༻Ͱ͸ͳ͍
    ͨΊ
    

    View Slide

23. filter
    

    View Slide

24. filter
    • ϑΟϧλҾ਺ʹจࣈྻΛ౉͢৔߹ɺγϯάϧΫΥʔτ
    (‘’)ඞਢ
    
    
    
    
    

    View Slide

25. filter
    • $dataΛ࢖ͬͨಈతͳϑΟϧλҾ਺ͷαϙʔτ
    https://jsfiddle.net/kazupon/q2kykpuz/
    
    
    
    
    
    
    
    {{first | concat last}}
    
    
    // JS
    new Vue({
    data: {
    first: '',
    last: ''
    },
    filters: {
    concat: function (val, arg) {
    return val + arg
    }
    }
    }).$mount('#app')
    

    View Slide

26. v-with
    directive
    

    View Slide

27. v-with directive
    • v-with directive͸ഇࢭ
    
    
    
    iv>
    // JS
    Vue.component('user-profile', {
    template: '{{name}}
    {{email}}'
    })
    var parent = new Vue({
    el: '#app',
    data: {
    user: {
    name: 'Foo Bar',
    email: 'foo@bar.com'
    }
    }
    

    View Slide

28. ͳͥഇࢭ͢Δͷ͔ʁ
    v-with directive
    

    View Slide

29. v-with directive
    • ςϯϓϨʔτͷ{{#with}}ϒϩοΫͰσʔλΛड͚౉͢
    ํ๏ΛσΟϨΫςΟϒԽͨ͠ෛͷҨ࢈ͳͷͰ࡟আ͍ͨ͠
    
    
    {{#with user}}
    
    {{{name}}}
    {{{email}}}
    
    {{/with}}
    >
    

    View Slide

30. v-with directive
    • 0.11Ͱ͸σʔλΛɺࢠʹରͯ͠໌ࣔతʹड͚౉͢ํ๏͕
    2ͭ͋ͬͯ෼͔Γʹ͍͘
    # paramAttributes option ʹΑΔํ๏
    
    
    
    
    
    // JS
    new Vue({
    el: '#app',
    data: {
    parentMsg: 'parent message'
    },
    components: {
    'child-component': {
    paramAttributes: ['child-msg'],
    template: '{{childMsg}}'
    }
    }
    })
    

    View Slide

31. v-with directive
    • 0.12Ҏ߱Ͱ͸ࢠ΁ͷσʔλͷड͚౉͠͸ɺࢠͷprops
    optionܦ༝Ͱ౷Ұ͢Δ
    
    
    
    
    
    // JS
    new Vue({
    el: '#app',
    data: {
    parentMsg: 'hello world !!'
    },
    components: {
    child: {
    props: ['child-msg'],
    template: '{{childMsg}}'
    }
    }
    })
    https://jsfiddle.net/kazupon/7ph214eg/4/
    

    View Slide

32. v-with directive
    • ࢠͷ$dataΛյͯ͠͠·͏

    ex1: $dataʹҙਤ͠ͳ͍ϓϩύςΟΛੜ΍ͯ͠͠·͏
    
    
    # v-withͳ͠
    
    
    
    # v-withͰ਌ͷnumberΛࢠͷcountͱͯ͠ࢦఆ
    
    v-with="count: number">
    
    // JS
    var child = {
    template: '{{$data|json}}',
    data: function () {
    return { msg: 'hello' }
    }
    }
    var app1 = new Vue({
    components: { child: child }
    }).$mount('#app1')
    var app2 = new Vue({
    data: { number: 3 },
    components: { child: child }
    }).$mount('#app2')
    http://jsfiddle.net/kazupon/pqw77weq/3/
    

    View Slide

33. v-with directive
    • ࢠͷ$dataΛյͯ͠͠·͏

    ex2: $dataͷॳظ஋Λม͑ͯ͠·͏
    
    
    # v-withͳ͠
    
    
    
    # v-withͰσʔλΛॻ͖׵͑ͯ͠·͏
    v-with="msg: say">
    
    // JS
    var child = {
    template: '{{$data|json}}',
    data: function () {
    return { msg: 'hello' }
    }
    }
    var app1 = new Vue({
    components: { child: child }
    }).$mount('#app1')
    var app2 = new Vue({
    data: { say: 'world' },
    components: { child: child }
    }).$mount('#app2')
    http://jsfiddle.net/kazupon/tceb6wLt/2/
    

    View Slide

34. paramsAttribute
    option
    

    View Slide

35. paramsAttbites option
    • Φϓγϣϯ໊͸propsʹ
    มߋ
    • {{*prop}}ͰҰํ޲
    (one-way)ͳόΠϯ
    σΟϯάͱͯ͠໌ࣔతʹ
    ࢦఆ͕Ͱ͖Δ

    https://
    jsfiddle.net/
    kazupon/cecypzan/3/
    
    
    
    ਌:

    
    
    
    
    
    
    // JS
    new Vue({
    el: '#app',
    data: {
    parentMsg: 'hello world !!'
    },
    components: {
    child: {
    props: ['child-msg'],
    template: 'ࢠ:{{childMsg}}

    
    '
    }
    }
    })
    

    View Slide

36. paramsAttbites option
    • ෳ਺ͷmustacheΛɺprops optionͰఆٛͨ͠ϓϩύ
    ςΟʹࢦఆ͕Ͱ͖Δ
    
    
    
    
    // JS
    new Vue({
    el: '#app',
    data: {
    a: 1,
    b: 2
    },
    components: {
    child: {
    props: ['child-msg'],
    template: '{{childMsg}}'
    }
    }
    })
    https://jsfiddle.net/24ch88n2/2/
    

    View Slide

37. paramsAttbites option
    • ϑΟϧλ΋ؚΊΔ͜ͱ͕Ͱ͖Δ
    
    
    
    
    // JS
    new Vue({
    el: '#app',
    data: {
    msg: 'hello'
    },
    components: {
    child: {
    props: ['child-msg'],
    template: '{{childMsg}}'
    }
    }
    })
    https://jsfiddle.net/kazupon/ondpvuk8/1/
    

    View Slide

38. paramsAttbites option
    • expressionsΛؚΊΔ͜ͱ΋Ͱ͖Δ
    https://jsfiddle.net/kazupon/pnszx8rc/1/
    
    
    
    
    // JS
    new Vue({
    el: '#app',
    data: {
    a: 1,
    b: 2
    },
    components: {
    child: {
    props: ['child-msg'],
    template: '{{childMsg}}'
    }
    }
    })
    

    View Slide

39. paramsAttbites option
    • ਌ͷϓϩύςΟ͕ઃఆՄೳͰ͸ͳ͍ͱ͖ɺϓϩύςΟ͸
    ࣗಈతʹҰํ޲ͳόΠϯσΟϯάʹͳΔ
    
    
    
    
    // JS
    new Vue({
    el: '#app',
    data: {
    a: 1,
    b: 2
    },
    components: {
    child: {
    props: ['child-msg'],
    template: '{{childMsg}}'
    }
    }
    })
    

    View Slide

40. v-component
    directive
    

    View Slide

41. v-component directive
    • v-component
    directive͸ഇࢭ
    • ࠓޙ͸ΧελϜλάͰί
    ϯϙʔωϯτΛར༻͢Δ

    (ϋΠϑϯ”-“͸ඞਢͰ͸
    ͳ͘ͳͬͨ)
    
    
    
    
    
    // JS
    new Vue({
    el: '#app',
    data: {
    message: 'hello world !!'
    },
    components: {
    view: {
    props: ['text'],
    template: '{{text}}'
    }
    }
    })
    https://jsfiddle.net/kazupon/Lkqdd1y0/
    

    View Slide

42. v-component directive
    • ಈతͳίϯϙʔωϯτ͸
    
    
    
    
    
    
    // JS
    new Vue({
    el: '#app',
    data: { view: ‘view1' },
    components: {
    view1: {
    template: 'view1'
    },
    view2: {
    template: 'view2'
    }
    }
    })
    https://jsfiddle.net/kazupon/oev3bahL/2/
    

    View Slide

43. ͦͷଞ
    

    View Slide

44. ͦͷଞ
    • Vue.jsެࣜϓϥάΠϯͷαϙʔτ͕૿͑ͨ
    • vuejs/vue-router (WIP)

    https://github.com/vuejs/vue-router
    • vuejs/vue-resource

    https://github.com/vuejs/vue-resource
    

    View Slide

45. ·ͱΊ
    

    View Slide

46. ·ͱΊ
    • 0.12Ͱ͸͍͔ͭ͘ͷ৽ػೳͱ࢓༷มߋ͕͋Δ
    • ৽ػೳͱ࢓༷มߋʹΑΓɺVue.jsΛ࢖ͬͨ։ൃ͕͠қ
    ͘ͳͬͨΓɺύϑΥʔϚϯεվળՄೳ
    • ࢓༷มߋʹ͓͍ͯ͸ɺAPIͷI/FͷBreakతͳมߋ͕͋
    ΔͷͰɺچόʔδϣϯ͔ΒόʔδϣϯΞοϓ͢Δࡍ͸ɺ
    ରԠ͕ඞཁ
    

    View Slide

47. ͓·͚
    

    View Slide

48. View Slide

49. Roetem
    • Vue.js+RethinkDBʹΑΔMeteorϥΠΫͳ௒࣮ݧతͳ
    ϓϩδΣΫτ

    https://github.com/yyx990803/roetem
    • কདྷɺVue.jsͷΑ͏ʹɺطଘͷ΋ͷʹ૊ΈࠐΊΔΑ͏ͳ
    γϯϓϧͳϥΠϒϥϦΛ࡞Δ͔΋͠Εͳ͍

    (Evanࢯίϝϯτ)

    https://github.com/yyx990803/roetem/issues/1
    

    View Slide

50. ެࣜαΠτͷ຋༁
    • ༗ࢤͰެࣜαΠτ
    vue.orgͷ೔ຊޠ຋༁Λ
    ΍͍ͬͯ·͢

    https://github.com/
    vuejs-jp/vuejs.org
    • དྷ݄6݄຤͋ͨΓαΠτެ
    ։༧ఆ
    

    View Slide

51. vuejs-jp೔ຊϢʔβʔάϧʔϓൃ଍
    • ຋༁ϓϩδΣΫτͷ༗ࢤͰ೔ຊϢʔβʔάϧʔϓΛཱͪ
    ্͛·ͨ͠

    https://github.com/vuejs-jp
    • ࠓޙͷ׆ಈ༧ఆ
    • ެࣜαΠτ຋༁
    • ษڧձ
    • ϒϩάʹΑΔ৘ใڞ༗
    

    View Slide

52. ͝੩ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide