Next Vue.js 0.12

38bee248082f6071230de65e9d74a944?s=47 kazupon
May 27, 2015
4.3k

Next Vue.js 0.12

38bee248082f6071230de65e9d74a944?s=128

kazupon

May 27, 2015
Tweet

Transcript

  1. 2.

    ࣗݾ঺հ • @kazupon • ໾ׂɿϦʔυΤϯδχΞ • ࢓ࣄɿ։ൃશൠ 
 (ϑϩϯτΤϯυ/όοΫΤϯυ/Πϯϑϥ) •

    Vue.jsͱͷؔΘΓɿ
 Vue.js organizationͷϝϯόͱͯ͠vuejs/vue-validator ͷϝϯςφͯ͠·͢ • ࠷ۙͷJSؔ࿈ͷڵຯɿ
 FRP | Stream | ServiceWorker | nodejs/NG | electron
  2. 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Ͱ͸ɺ ຊൃදͷ಺༰Λ֬ূͰ͖Δ΋ͷͰ͸͋Γ·ͤΜ
  3. 4.

    0.12Ͱ໨ۄͳϞϊ • ৽ػೳ • async components • element directives •

    ࢓༷มߋ • partial • filter • v-with directive • paramAttributes option • v-component directive
  4. 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>' } } })
  5. 9.

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

    components: { child1: function (resolve) { // load component loadComponent(function (component) { resolve(component) // resolve component !! } } } })
  6. 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/
  7. 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>' }
  8. 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>
  9. 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 () { // ... } } } })
  10. 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) }) }, ...
  11. 16.

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


    
 - ΧελϜλά಺ΛDOMΛ࢖ͬͯࣗ༝ʹૢ࡞͢Δ͜ͱ͕Ͱ͖Δ
 - VueίϯϙʔωϯτͷΠϯελϯεੜ੒ͷΦʔόʔϔου͕ͳ͍
 
 ͳͷͰɺ
 
 ύϑΥʔϚϯε͕ٻΊΒΕΔίϯϙʔωϯτΛ࡞Δʹ͸ɺίϯϙʔωϯτγ εςϜͷΦϧλφςΟϒͳ΋ͷͱͯ͠ར༻Ͱ͖Δ
  12. 19.
  13. 20.

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

    ͜Εʹ൐͍ɺpartialΛొ࿥͢ΔΞηοτAPI΋࡟আ
 (άϩʔόϧɺϓϥΠϕʔτ྆ํ) <!-- v-partial directive --> <div v-partial="{{partialId}}"></div> <!-- partial block --> <div>{{>my-partial}}</div>
  14. 23.
  15. 24.
  16. 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')
  17. 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' } }
  18. 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>' } } })
  19. 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/
  20. 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/
  21. 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/
  22. 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">' } } })
  23. 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/
  24. 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/
  25. 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>' } } })
  26. 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>' } } })
  27. 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/
  28. 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/
  29. 43.
  30. 45.
  31. 47.
  32. 48.