Slide 1
Slide 1 text
Next Vue.js 0.12
Data Binding JS Night
2015-05-27
@kazupon
Slide 2
Slide 2 text
ࣗݾհ
• @kazupon
• ׂɿϦʔυΤϯδχΞ
• ࣄɿ։ൃશൠ
(ϑϩϯτΤϯυ/όοΫΤϯυ/Πϯϑϥ)
• Vue.jsͱͷؔΘΓɿ
Vue.js organizationͷϝϯόͱͯ͠vuejs/vue-validator
ͷϝϯςφͯ͠·͢
• ࠷ۙͷJSؔ࿈ͷڵຯɿ
FRP | Stream | ServiceWorker | nodejs/NG | electron
Slide 3
Slide 3 text
͡Ίʹ
• ࠓ͓͢Δ༰ɺҎԼͷใͱݱ࣌࠷৽Ͱ͋Δ
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Ͱɺ
ຊൃදͷ༰Λ֬ূͰ͖ΔͷͰ͋Γ·ͤΜ
Slide 4
Slide 4 text
0.12ͰۄͳϞϊ
• ৽ػೳ
• async components
• element directives
• ༷มߋ
• partial
• filter
• v-with directive
• paramAttributes option
• v-component directive
Slide 5
Slide 5 text
৽ػೳ
Slide 6
Slide 6 text
async components
Slide 7
Slide 7 text
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'
}
}
})
Slide 8
Slide 8 text
async components
• ैདྷͷίϯϙʔωϯτγεςϜʹ͓͚Δ
• ΞϓϦ͕ΓΓͯ͠େ͖͘ͳͬͯ͘ΔͱɺΞϓ
Ϧॳظϩʔυ͕͘ͳΓ͕ͪ
• ίϯϙʔωϯτͷԆϩʔσΟϯάʹΑΔΞϓϦ։ൃ
͔ͳΓΊΜͲ͍͘͞
Slide 9
Slide 9 text
async components
• 0.12Ҏ߱ͰɺίϯϙʔωϯτͷԆϩʔσΟϯάΛ࣮
ͨؔ͠Λࢦఆ͢Δ͜ͱʹΑͬͯɺΛղܾ͢Δ͜
ͱ͕Ͱ͖Δ
new Vue({
el: '#app',
components: {
child1: function (resolve) {
// load component
loadComponent(function (component) {
resolve(component) // resolve component !!
}
}
}
})
Slide 10
Slide 10 text
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/
Slide 11
Slide 11 text
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}}'
}
Slide 12
Slide 12 text
element
directives
Slide 13
Slide 13 text
element directives
• ैདྷͷdirective/custom direcitvesɺରͱͳ
Δλάʹରͯ͠ଐੑతʹࢦఆ͢Δ͜ͱʹΑͬͯػೳΛ
Ճ
too long your comment.
too short your comment.
Slide 14
Slide 14 text
element directives
• element directivesɺΧελϜλ
άશମʹରͯ͠ػೳΛՃͰ͖Δ
(AngularͷRestrict Eʹ૬)
• ࣮ํ๏custom directivesͱಉ
༷ɺbind/update/unbindΛ࣮
• ԼهΞηοτAPIͰొ
- Vue.elementDirective
(άϩʔόϧΞηοτ)
- elementDirectives
(ϓϥΠϕʔτΞηοτ)
// JS
new Vue({
el: '#app',
data: {
message: 'hello world !!'
},
elementDirectives: { // private
'element-directive': {
bind: function () {
// ...
},
update: function (val, old) {
// ...
},
unbind: function () {
// ...
}
}
}
})
{{message}}
Slide 15
Slide 15 text
element directives
• custom directivesͱͷҧ͍
1. argͱexpressionड͚ೖΕෆՄ
https://jsfiddle.net/kazupon/gv9wLL94/10/
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)
})
},
...
current view : view1
# element directive ͷҾͷ༰
name: {{name}}
arg: {{arg}}
expression: {{expression}}
raw: {{raw}}
Slide 16
Slide 16 text
element directives
• custom directivesͱͷҧ͍
2. λʔϛφϧͳσΟϨΫςΟϒͳͷͰɺΧελϜλάʹ͋Δࢠͷλάʹ
ରͯ͠ίϯύΠϧॲཧ͕εΩοϓ͞ΕΔ
ͭ·Γ
- ΧελϜλάΛDOMΛͬͯࣗ༝ʹૢ࡞͢Δ͜ͱ͕Ͱ͖Δ
- VueίϯϙʔωϯτͷΠϯελϯεੜͷΦʔόʔϔου͕ͳ͍
ͳͷͰɺ
ύϑΥʔϚϯε͕ٻΊΒΕΔίϯϙʔωϯτΛ࡞Δʹɺίϯϙʔωϯτγ
εςϜͷΦϧλφςΟϒͳͷͱͯ͠ར༻Ͱ͖Δ
Slide 17
Slide 17 text
element directives
• element directivesΛͬͨͷ
• Vue.js͕ఏڙ͢Δϧʔλ (WIP)
vuejs/vue-router
https://github.com/vuejs/vue-router
Slide 18
Slide 18 text
༷มߋ
Slide 19
Slide 19 text
partial
Slide 20
Slide 20 text
partial
• v-partial directiveͱ{{>partial}}ϒϩοΫͷഇ
ࢭ
• ͜Εʹ͍ɺpartialΛొ͢ΔΞηοτAPIআ
(άϩʔόϧɺϓϥΠϕʔτ྆ํ)
{{>my-partial}}
Slide 21
Slide 21 text
ͳͥഇࢭ͢Δͷ͔ʁ
partial
Slide 22
Slide 22 text
partial
• partialจࣈྻϕʔεͷςϯϓϨʔτ͔ΒͷҨ࢈
• ίϯϙʔωϯτϕʔεͳVue.jsͰ͋·Γ༗༻Ͱͳ͍
ͨΊ
Slide 23
Slide 23 text
filter
Slide 24
Slide 24 text
filter
• ϑΟϧλҾʹจࣈྻΛ͢߹ɺγϯάϧΫΥʔτ
(‘’)ඞਢ
Slide 25
Slide 25 text
filter
• $dataΛͬͨಈతͳϑΟϧλҾͷαϙʔτ
https://jsfiddle.net/kazupon/q2kykpuz/
// JS
new Vue({
data: {
first: '',
last: ''
},
filters: {
concat: function (val, arg) {
return val + arg
}
}
}).$mount('#app')
{{first | concat last}}
Slide 26
Slide 26 text
v-with
directive
Slide 27
Slide 27 text
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: '[email protected]' } }
{{email}}' }) var parent = new Vue({ el: '#app', data: { user: { name: 'Foo Bar', email: '[email protected]' } }
Slide 28
Slide 28 text
ͳͥഇࢭ͢Δͷ͔ʁ
v-with directive
Slide 29
Slide 29 text
v-with directive
• ςϯϓϨʔτͷ{{#with}}ϒϩοΫͰσʔλΛड͚͢
ํ๏ΛσΟϨΫςΟϒԽͨ͠ෛͷҨ࢈ͳͷͰআ͍ͨ͠
{{#with user}}
>
{{{name}}}
{{{email}}}
Slide 30
Slide 30 text
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}}'
}
}
})
Slide 31
Slide 31 text
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/
Slide 32
Slide 32 text
v-with directive
• ࢠͷ$dataΛյͯ͠͠·͏
ex1: $dataʹҙਤ͠ͳ͍ϓϩύςΟΛੜͯ͠͠·͏
// 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/
# v-withͳ͠
# v-withͰͷnumberΛࢠͷcountͱͯ͠ࢦఆ
Slide 33
Slide 33 text
v-with directive
• ࢠͷ$dataΛյͯ͠͠·͏
ex2: $dataͷॳظΛม͑ͯ͠·͏
// 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/
# v-withͳ͠
# v-withͰσʔλΛॻ͖͑ͯ͠·͏
Slide 34
Slide 34 text
paramsAttribute
option
Slide 35
Slide 35 text
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}}
' } } })
:
' } } })
Slide 36
Slide 36 text
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/
Slide 37
Slide 37 text
paramsAttbites option
• ϑΟϧλؚΊΔ͜ͱ͕Ͱ͖Δ
// JS
new Vue({
el: '#app',
data: {
msg: 'hello'
},
components: {
child: {
props: ['child-msg'],
template: '{{childMsg}}'
}
}
})
https://jsfiddle.net/kazupon/ondpvuk8/1/
Slide 38
Slide 38 text
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}}'
}
}
})
Slide 39
Slide 39 text
paramsAttbites option
• ͷϓϩύςΟ͕ઃఆՄೳͰͳ͍ͱ͖ɺϓϩύςΟ
ࣗಈతʹҰํͳόΠϯσΟϯάʹͳΔ
// JS
new Vue({
el: '#app',
data: {
a: 1,
b: 2
},
components: {
child: {
props: ['child-msg'],
template: '{{childMsg}}'
}
}
})
Slide 40
Slide 40 text
v-component
directive
Slide 41
Slide 41 text
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/
Slide 42
Slide 42 text
v-component directive
• ಈతͳίϯϙʔωϯτ
// JS
new Vue({
el: '#app',
data: { view: ‘view1' },
components: {
view1: {
template: 'view1'
},
view2: {
template: 'view2'
}
}
})
https://jsfiddle.net/kazupon/oev3bahL/2/
Slide 43
Slide 43 text
ͦͷଞ
Slide 44
Slide 44 text
ͦͷଞ
• Vue.jsެࣜϓϥάΠϯͷαϙʔτ͕૿͑ͨ
• vuejs/vue-router (WIP)
https://github.com/vuejs/vue-router
• vuejs/vue-resource
https://github.com/vuejs/vue-resource
Slide 45
Slide 45 text
·ͱΊ
Slide 46
Slide 46 text
·ͱΊ
• 0.12Ͱ͍͔ͭ͘ͷ৽ػೳͱ༷มߋ͕͋Δ
• ৽ػೳͱ༷มߋʹΑΓɺVue.jsΛͬͨ։ൃ͕͠қ
͘ͳͬͨΓɺύϑΥʔϚϯεվળՄೳ
• ༷มߋʹ͓͍ͯɺAPIͷI/FͷBreakతͳมߋ͕͋
ΔͷͰɺچόʔδϣϯ͔ΒόʔδϣϯΞοϓ͢Δࡍɺ
ରԠ͕ඞཁ
Slide 47
Slide 47 text
͓·͚
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
Roetem
• Vue.js+RethinkDBʹΑΔMeteorϥΠΫͳ࣮ݧతͳ
ϓϩδΣΫτ
https://github.com/yyx990803/roetem
• কདྷɺVue.jsͷΑ͏ʹɺطଘͷͷʹΈࠐΊΔΑ͏ͳ
γϯϓϧͳϥΠϒϥϦΛ࡞Δ͔͠Εͳ͍
(Evanࢯίϝϯτ)
https://github.com/yyx990803/roetem/issues/1
Slide 50
Slide 50 text
ެࣜαΠτͷ༁
• ༗ࢤͰެࣜαΠτ
vue.orgͷຊޠ༁Λ
͍ͬͯ·͢
https://github.com/
vuejs-jp/vuejs.org
• དྷ݄6݄͋ͨΓαΠτެ
։༧ఆ
Slide 51
Slide 51 text
vuejs-jpຊϢʔβʔάϧʔϓൃ
• ༁ϓϩδΣΫτͷ༗ࢤͰຊϢʔβʔάϧʔϓΛཱͪ
্͛·ͨ͠
https://github.com/vuejs-jp
• ࠓޙͷ׆ಈ༧ఆ
• ެࣜαΠτ༁
• ษڧձ
• ϒϩάʹΑΔใڞ༗
Slide 52
Slide 52 text
͝੩ௌ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ