Next Vue.js 0.12

Transcript

1. Next Vue.js 0.12 Data Binding JS Night 2015-05-27 @kazupon
2. ࣗݾ঺հ • @kazupon • ໾ׂɿϦʔυΤϯδχΞ • ࢓ࣄɿ։ൃશൠ 
 (ϑϩϯτΤϯυ/όοΫΤϯυ/Πϯϑϥ) • Vue.jsͱͷؔΘΓɿ
 Vue.js organizationͷϝϯόͱͯ͠vuejs/vue-validator ͷϝϯςφͯ͠·͢ • ࠷ۙͷJSؔ࿈ͷڵຯɿ
 FRP | Stream | ServiceWorker | nodejs/NG | electron
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Ͱ͸ɺ ຊൃදͷ಺༰Λ֬ূͰ͖Δ΋ͷͰ͸͋Γ·ͤΜ
4. 0.12Ͱ໨ۄͳϞϊ • ৽ػೳ • async components • element directives • ࢓༷มߋ • partial • filter • v-with directive • paramAttributes option • v-component directive
5. ৽ػೳ
6. async components
7. async components • ैདྷͷίϯϙʔωϯτͷ࢖͍ํ
 Vue.extendͨ͠αϒΫϥε·ͨ͸ΦϒδΣΫτΛࢦఆ ͯ͠ಉظతʹొ࿥ new Vue({ el: '#app', data: { a: 1, b: 2 }, components: { child1: Vue.extend({ // case1: Vue.extend template: '<span>child1</span>' }), child2: { // case2: Object template: '<span>child2</span>' } } })
8. async components • ैདྷͷίϯϙʔωϯτγεςϜʹ͓͚Δ໰୊఺ • ΞϓϦ͕΋Γ΋Γ੒௕ͯ͠େ͖͘ͳͬͯ͘ΔͱɺΞϓ Ϧॳظϩʔυ͕஗͘ͳΓ͕ͪ • ίϯϙʔωϯτͷ஗ԆϩʔσΟϯάʹΑΔΞϓϦ։ൃ ͸͔ͳΓΊΜͲ͍͘͞
9. async components • 0.12Ҏ߱Ͱ͸ɺίϯϙʔωϯτͷ஗ԆϩʔσΟϯάΛ࣮ ૷ͨؔ͠਺Λࢦఆ͢Δ͜ͱʹΑͬͯɺ໰୊Λղܾ͢Δ͜ ͱ͕Ͱ͖Δ new Vue({ el: '#app', components: { child1: function (resolve) { // load component loadComponent(function (component) { resolve(component) // resolve component !! } } } })
10. async components • ྫ: require.js <!-- HTML --> <div id="app"> <async-child child-msg=“{{message}}"> </async-child> </div> // 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: '<span>{{childMsg}}</span>' } https://jsfiddle.net/kazupon/39mbpaz9/3/
11. async components • ྫ: webpack (code-splitting) <!-- HTML --> <div id="app"> <async-child child-msg=“{{message}}"> </async-child> </div> // 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: '<span>{{childMsg}}</span>' }
12. element directives
13. element directives • ैདྷͷdirective/custom direcitves͸ɺର৅ͱͳ Δλάʹରͯ͠ଐੑతʹࢦఆ͢Δ͜ͱʹΑͬͯػೳΛ௥ Ճ <!-- vuejs/vue-validatorͷΧελϜσΟϨΫςΟϒͷྫ --> <form id="blog-form"> <input type="text" v-model="comment" v-validate="minLength: 16, maxLength: 128"> <div> <span v-show="validation.comment.minLength">too long your comment.</span> <span v-show="validation.comment.maxLength">too short your comment.</span> </div> <input type="submit" value="send" v-if="valid"> </form>
14. element directives • element directives͸ɺΧελϜλ άશମʹରͯ͠ػೳΛ௥ՃͰ͖Δ 
 (AngularͷRestrict Eʹ૬౰) • ࣮૷ํ๏͸custom directivesͱಉ ༷ɺbind/update/unbindΛ࣮૷ • ԼهΞηοτAPIͰొ࿥
 - Vue.elementDirective 
 (άϩʔόϧΞηοτ)
 - elementDirectives 
 (ϓϥΠϕʔτΞηοτ) <!-- HTML --> <div id="app"> <element-directive> <p>{{message}}</p> </element-directive> </div> // JS new Vue({ el: '#app', data: { message: 'hello world !!' }, elementDirectives: { // private 'element-directive': { bind: function () { // ... }, update: function (val, old) { // ... }, unbind: function () { // ... } } } })
15. element directives • custom directivesͱͷҧ͍
 1. argͱexpression͸ड͚ೖΕෆՄ https://jsfiddle.net/kazupon/gv9wLL94/10/ <!-- HTML --> <div id="app"> <div> <input type="radio" name="view1" value="view1" v-model="view"> <input type="radio" name="view2" value="view2" v-model="view"> </div> <p>current view : <view>view1</view></p> <div> # element directive ͷҾ਺ͷ಺༰ <p>name: {{name}}</p> <p>arg: {{arg}}</p> <p>expression: {{expression}}</p> <p>raw: {{raw}}</p> </div> </div> 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) }) }, ...
16. element directives • custom directivesͱͷҧ͍
 2. λʔϛφϧͳσΟϨΫςΟϒͳͷͰɺΧελϜλά಺ʹ͋Δࢠͷλάʹ ରͯ͠ίϯύΠϧॲཧ͕εΩοϓ͞ΕΔ
 
 ͭ·Γ
 
 - ΧελϜλά಺ΛDOMΛ࢖ͬͯࣗ༝ʹૢ࡞͢Δ͜ͱ͕Ͱ͖Δ
 - VueίϯϙʔωϯτͷΠϯελϯεੜ੒ͷΦʔόʔϔου͕ͳ͍
 
 ͳͷͰɺ
 
 ύϑΥʔϚϯε͕ٻΊΒΕΔίϯϙʔωϯτΛ࡞Δʹ͸ɺίϯϙʔωϯτγ εςϜͷΦϧλφςΟϒͳ΋ͷͱͯ͠ར༻Ͱ͖Δ
17. element directives • element directivesΛ࢖ͬͨ΋ͷ • Vue.js͕ఏڙ͢Δϧʔλ (WIP)
 vuejs/vue-router
 https://github.com/vuejs/vue-router
18. ࢓༷มߋ
19. partial
20. partial • v-partial directiveͱ{{>partial}}ϒϩοΫͷഇ ࢭ
 
 
 
 
 • ͜Εʹ൐͍ɺpartialΛొ࿥͢ΔΞηοτAPI΋࡟আ
 (άϩʔόϧɺϓϥΠϕʔτ྆ํ) <!-- v-partial directive --> <div v-partial="{{partialId}}"></div> <!-- partial block --> <div>{{>my-partial}}</div>
21. ͳͥഇࢭ͢Δͷ͔ʁ partial
22. partial • partial͸จࣈྻϕʔεͷςϯϓϨʔτ͔ΒͷҨ࢈ • ίϯϙʔωϯτϕʔεͳVue.jsͰ͸͋·Γ༗༻Ͱ͸ͳ͍ ͨΊ
23. filter
24. filter • ϑΟϧλҾ਺ʹจࣈྻΛ౉͢৔߹ɺγϯάϧΫΥʔτ (‘’)ඞਢ <!-- 0.11 --> <input v-on="keyup: submitForm | key enter"> <!-- 0.12 later --> <input v-on="keyup: submitForm | key 'enter'">
25. filter • $dataΛ࢖ͬͨಈతͳϑΟϧλҾ਺ͷαϙʔτ https://jsfiddle.net/kazupon/q2kykpuz/ <!-- HTML --> <div id="app"> <form> <input type="text" v-model="first"> <input type="text" v-model="last"> </form> <div> <span>{{first | concat last}}</span> </div> </div> // JS new Vue({ data: { first: '', last: '' }, filters: { concat: function (val, arg) { return val + arg } } }).$mount('#app')
26. v-with directive
27. v-with directive • v-with directive͸ഇࢭ <!-- HTML --> <div id="app"> <p v-component="user-profile" v-with="user"></p> </div>iv> // JS Vue.component('user-profile', { template: '{{name}}<br>{{email}}' }) var parent = new Vue({ el: '#app', data: { user: { name: 'Foo Bar', email: 'foo@bar.com' } }
28. ͳͥഇࢭ͢Δͷ͔ʁ v-with directive
29. v-with directive • ςϯϓϨʔτͷ{{#with}}ϒϩοΫͰσʔλΛड͚౉͢ ํ๏ΛσΟϨΫςΟϒԽͨ͠ෛͷҨ࢈ͳͷͰ࡟আ͍ͨ͠ <!-- Handlesbars --> <div id=“app"> {{#with user}} <p> {{{name}}}<br>{{{email}}} </p> {{/with}} </div>>
30. v-with directive • 0.11Ͱ͸σʔλΛɺࢠʹରͯ͠໌ࣔతʹड͚౉͢ํ๏͕ 2ͭ͋ͬͯ෼͔Γʹ͍͘ # paramAttributes option ʹΑΔํ๏ <!-- HTML --> <div id="app"> <input v-model="parentMsg"> <child-component child-msg="parentMsg"></child-component> </div> // JS new Vue({ el: '#app', data: { parentMsg: 'parent message' }, components: { 'child-component': { paramAttributes: ['child-msg'], template: '<span>{{childMsg}}</span>' } } })
31. v-with directive • 0.12Ҏ߱Ͱ͸ࢠ΁ͷσʔλͷड͚౉͠͸ɺࢠͷprops optionܦ༝Ͱ౷Ұ͢Δ <!-- HTML --> <div id="app"> <input type="text" v-model="parentMsg"> <child child-msg="{{parentMsg}}"></child> </div> // JS new Vue({ el: '#app', data: { parentMsg: 'hello world !!' }, components: { child: { props: ['child-msg'], template: '<span>{{childMsg}}</span>' } } }) https://jsfiddle.net/kazupon/7ph214eg/4/
32. v-with directive • ࢠͷ$dataΛյͯ͠͠·͏
 ex1: $dataʹҙਤ͠ͳ͍ϓϩύςΟΛੜ΍ͯ͠͠·͏ <!-- HTML --> <div id="app1"> <p># v-withͳ͠</p> <div v-component="child"></div> </div> <div id="app2"> <p># v-withͰ਌ͷnumberΛࢠͷcountͱͯ͠ࢦఆ </p> <div v-component="child" v-with="count: number"></div> </div> // JS var child = { template: '<span>{{$data|json}}</span>', 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/
33. v-with directive • ࢠͷ$dataΛյͯ͠͠·͏
 ex2: $dataͷॳظ஋Λม͑ͯ͠·͏ <!-- HTML --> <div id="app1"> <p># v-withͳ͠</p> <div v-component="child"></div> </div> <div id="app2"> <p># v-withͰσʔλΛॻ͖׵͑ͯ͠·͏</p> <div v-component="child" v-with="msg: say"></div> </div> // JS var child = { template: '<span>{{$data|json}}</span>', 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/
34. paramsAttribute option
35. paramsAttbites option • Φϓγϣϯ໊͸propsʹ มߋ • {{*prop}}ͰҰํ޲ (one-way)ͳόΠϯ σΟϯάͱͯ͠໌ࣔతʹ ࢦఆ͕Ͱ͖Δ
 https:// jsfiddle.net/ kazupon/cecypzan/3/ <!-- HTML --> <div id="app"> <div> <span>਌:</span>
 <input type="text" v-model="parentMsg"> </div> <div> <child child-msg="{{*parentMsg}}"></child> </div> </div> // JS new Vue({ el: '#app', data: { parentMsg: 'hello world !!' }, components: { child: { props: ['child-msg'], template: '<span>ࢠ:{{childMsg}}</span>
 <br><input type="text" v-model="childMsg">' } } })
36. paramsAttbites option • ෳ਺ͷmustacheΛɺprops optionͰఆٛͨ͠ϓϩύ ςΟʹࢦఆ͕Ͱ͖Δ <!-- HTML --> <div id="app"> <child child-msg="{{a}} {{b}}"></child> </div> // JS new Vue({ el: '#app', data: { a: 1, b: 2 }, components: { child: { props: ['child-msg'], template: '<span>{{childMsg}}</span>' } } }) https://jsfiddle.net/24ch88n2/2/
37. paramsAttbites option • ϑΟϧλ΋ؚΊΔ͜ͱ͕Ͱ͖Δ <!-- HTML --> <div id="app"> <child child-msg="{{msg | uppercase}}"></child> </div> // JS new Vue({ el: '#app', data: { msg: 'hello' }, components: { child: { props: ['child-msg'], template: '<span>{{childMsg}}</span>' } } }) https://jsfiddle.net/kazupon/ondpvuk8/1/
38. paramsAttbites option • expressionsΛؚΊΔ͜ͱ΋Ͱ͖Δ https://jsfiddle.net/kazupon/pnszx8rc/1/ <!-- HTML --> <div id="app"> <child child-msg="{{a}} + {{b}} = {{a + b}}"></child> </div> // JS new Vue({ el: '#app', data: { a: 1, b: 2 }, components: { child: { props: ['child-msg'], template: '<span>{{childMsg}}</span>' } } })
39. paramsAttbites option • ਌ͷϓϩύςΟ͕ઃఆՄೳͰ͸ͳ͍ͱ͖ɺϓϩύςΟ͸ ࣗಈతʹҰํ޲ͳόΠϯσΟϯάʹͳΔ <!-- HTML --> <div id="app"> <child child-msg="{{a + b}}"></child> </div> // JS new Vue({ el: '#app', data: { a: 1, b: 2 }, components: { child: { props: ['child-msg'], template: '<span>{{childMsg}}</span>' } } })
40. v-component directive
41. v-component directive • v-component directive͸ഇࢭ • ࠓޙ͸ΧελϜλάͰί ϯϙʔωϯτΛར༻͢Δ
 (ϋΠϑϯ”-“͸ඞਢͰ͸ ͳ͘ͳͬͨ) <!-- HTML --> <div id="app"> <input type="text" v-model="message"> <view text="{{message}}"></view> </div> // JS new Vue({ el: '#app', data: { message: 'hello world !!' }, components: { view: { props: ['text'], template: '<span>{{text}}</span>' } } }) https://jsfiddle.net/kazupon/Lkqdd1y0/
42. v-component directive • ಈతͳίϯϙʔωϯτ͸<component is=“{{view}}”> <!-- HTML --> <div id="app"> <component is="{{view}}"></component> <input type="radio" name="view1" value="view1" v-model="view"> <input type="radio" name="view2" value="view2" v-model="view"> </div> // JS new Vue({ el: '#app', data: { view: ‘view1' }, components: { view1: { template: '<span>view1</span>' }, view2: { template: '<span>view2</span>' } } }) https://jsfiddle.net/kazupon/oev3bahL/2/
43. ͦͷଞ
44. ͦͷଞ • Vue.jsެࣜϓϥάΠϯͷαϙʔτ͕૿͑ͨ • vuejs/vue-router (WIP)
 https://github.com/vuejs/vue-router • vuejs/vue-resource
 https://github.com/vuejs/vue-resource
45. ·ͱΊ
46. ·ͱΊ • 0.12Ͱ͸͍͔ͭ͘ͷ৽ػೳͱ࢓༷มߋ͕͋Δ • ৽ػೳͱ࢓༷มߋʹΑΓɺVue.jsΛ࢖ͬͨ։ൃ͕͠қ ͘ͳͬͨΓɺύϑΥʔϚϯεվળՄೳ • ࢓༷มߋʹ͓͍ͯ͸ɺAPIͷI/FͷBreakతͳมߋ͕͋ ΔͷͰɺچόʔδϣϯ͔ΒόʔδϣϯΞοϓ͢Δࡍ͸ɺ ରԠ͕ඞཁ
47. ͓·͚
49. Roetem • Vue.js+RethinkDBʹΑΔMeteorϥΠΫͳ௒࣮ݧతͳ ϓϩδΣΫτ
 https://github.com/yyx990803/roetem • কདྷɺVue.jsͷΑ͏ʹɺطଘͷ΋ͷʹ૊ΈࠐΊΔΑ͏ͳ γϯϓϧͳϥΠϒϥϦΛ࡞Δ͔΋͠Εͳ͍
 (Evanࢯίϝϯτ)
 https://github.com/yyx990803/roetem/issues/1
50. ެࣜαΠτͷ຋༁ • ༗ࢤͰެࣜαΠτ vue.orgͷ೔ຊޠ຋༁Λ ΍͍ͬͯ·͢
 https://github.com/ vuejs-jp/vuejs.org • དྷ݄6݄຤͋ͨΓαΠτެ ։༧ఆ
51. vuejs-jp೔ຊϢʔβʔάϧʔϓൃ଍ • ຋༁ϓϩδΣΫτͷ༗ࢤͰ೔ຊϢʔβʔάϧʔϓΛཱͪ ্͛·ͨ͠
 https://github.com/vuejs-jp • ࠓޙͷ׆ಈ༧ఆ • ެࣜαΠτ຋༁ • ษڧձ • ϒϩάʹΑΔ৘ใڞ༗
52. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ