Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.js
Search
kazupon
July 11, 2014
Programming
12
11k
Vue.js
天下一クライアントサイドJS MV*フレームワーク武道会資料
kazupon
July 11, 2014
Tweet
Share
More Decks by kazupon
See All by kazupon
わたしのOSS活動
kazupon
3
520
Vapor Revolution
kazupon
3
3.6k
Vue.js最新動向
kazupon
3
1.6k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.9k
Reactivity Transform
kazupon
1
1.4k
わたしのOSS活動
kazupon
1
1k
Vue with Vite
kazupon
2
2.6k
Other Decks in Programming
See All in Programming
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
110
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
21
5.6k
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
430
🔨 小さなビルドシステムを作る
momeemt
3
670
RDoc meets YARD
okuramasafumi
4
170
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
300
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
520
JSONataを使ってみよう Step Functionsが楽しくなる実践テクニック #devio2025
dafujii
1
520
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.4k
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
個人軟體時代
ethanhuang13
0
320
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Designing Experiences People Love
moore
142
24k
Why Our Code Smells
bkeepers
PRO
339
57k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
RailsConf 2023
tenderlove
30
1.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Docker and Python
trallard
45
3.6k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
Vue.js ఱԼҰΫϥΠΞϯταΠυJS MV*ϑϨʔϜϫʔΫಓձ 2014-07-11 @kazupon
ఱԼҰΫϥΠΞϯταΠυJS MV*ϑϨʔϜϫʔΫಓձ
Vue.jsʹ͍ͭͯ ͬͱڵຯΛ࣋ͬͯΒ͑ΔΑ͏ ͜͜ʹ͖ͬͯ·ͨ͠
ΑΖ͓͘͠ئ͍ਃ্͛͠·͢
About Me • @kazupon • ॴଐɿCUUSOO SYSTEM • ׂɿϦʔυΤϯδχΞ •
ࣄɿ ϑϩϯτΤϯυɺόοΫΤϯυɺΠϯϑϥɺͳͲɺ γεςϜશൠɺ΄΅શ෦ʂ
Vue.jsͱ
Vue.js • γϯϓϧͳܰྔMVVMϥΠϒϥϦ • Angular.js | Knockout.js | Ractive.js |
Rivets.js͔ΒӨڹΛड͚͍ͯΔ • Evan You ࢯ (github:@yyx990803)ʹ Αͬͯ։ൃ • ໊শ࠷ॳSeedͱͯ࢝͠·Γɺ v0.6ͰVue.jsʹ໊শΛϦωʔϜ • ࠷৽Ver: v0.10.5
Vue.jsͷಛ
WebαΠτʹΑΔͱ͜Μͳײ͡ • Simple • Fast • Composable • Compact •
Powerful • Module Friendly WebαΠτ:http://vuejs.org
Simple • mustacheςϯϓϨʔτ͕هࡌ͞ΕͨHTMLͱJSON γϦΞϥΠζͳΦϒδΣΫτΛݩʹɺViewModelΛ ΠϯελϯεԽ͢Δ͚ͩͰಈ࡞ʂ <div id="demo"> <p>{{message}}</p> <input v-model="message">
</div> var demo = new Vue({ el: '#demo', data: { message: 'Hello Vue.js!' } }); HTML JS demo.messageΛมߋͯ͠ɺinputλά͔Βมߋ͠ ͯViewModelͱDOMͷಉظ
Fast • BatcherʹΑΔඇಉظͳόονॲཧͰ͕DOMʹ ө͞ΕΔ (benchmark: http://vuejs.org/perf/) Average (Chrome33 | Firefox28
| Safari7)
Composable • ViewModelΛίϯϙʔωϯτͱͯ͠ొ͢Δ͜ͱͰ ϞδϡʔϧԽͯ͠࠶ར༻Ͱ͖Δ var Alert = Vue.extend({ template: ‘<p>{{message}}</p>’,
data: { message: ‘Occured Error !!’ }, methods: { show: function () { ɹɹɹ// … ɹɹ} } }); ! Vue.component(‘my-alert’, Alert); <div v-component=“my-alert”></div> Define & Register component Use component
Compact • αΠζ minify & gzip Ͱ14KB • ଞͷϥΠϒϥϦʹґଘͳ͠
Powerful • HTMLʹॻ͍ͨධՁࣜComputedͳϓϩύςΟ ɺࣗಈతʹґଘ͍ͯ͠ΔมΛݟ͚ͭͯɺΛ ͯ͘͠ΕΔ <div id="demo"> <button v-on="click: onClick">
{{isOwner ? 'owner' : 'guest'}} </button> </div> var toggle = new Vue({ el: '#demo', methods: { onClick: function (e) { this.isOwner = !this.isOwner; } } }); HTML JS
Module friendly • Component, Browserify, Bowerͱ͍ͬͨϞδϡʔϧ ཧγεςϜΛར༻Մೳ
ͱ·͋ ͜Μͳײ͡Ͱ͢
͋ͱ ͦͷଞʹ ॏཁͳͷͱͯ͠
ϓϥάΠϯ • Vue.jsΛ֦ு͍ͨ͠ਓͷͨΊʹϓϥάΠϯ͢ΔAPI Λαϙʔτ͍ͯ͠Δ module.exprots = function (Vue, option) {
// something plugin logic }; var Vue = require(‘vue’); var myplugin = require(‘myplugin’); ! Vue.use(myplugin, { foo: 1 }); Implement plugin Install plugin
͜͜·Ͱͷઆ໌Ͱ Ͳ͏Ͱ͔ͨ͠ʁ ͍͍ͨ͘ͳΓ·͔ͨ͠ʁ
͜Ε·Ͱͷઆ໌ͰVue.js • ϑϨʔϫʔΫͰͳ͘ϥΠϒϥϦײ֮Ͱར༻Ͱ͖ͯɺ • ࡞ͬͨViewModelΛϞδϡʔϧԽͰ͖ͯɺ • ϞδϡʔϧཧγεςϜͱ࿈ܞͰ͖ͯɺ • ඞཁͳػೳϓϥάΠϯͰ֦ுͰ͖Δ ඇৗʹॊೈʹখճΓ͕ޮ͍͘
͍ͭ
ڵຯΛ࣋ͬͨਓ http://vuejs.org ʹΞΫηεͯ͠ GuideʹΛ௨͠ खΛಈ͔͠ͳ͕Β৮ͬͯ༡ͼ·͠ΐ͏ʂ
Α͏ͦ͜……… ʰVue.jsͷੈքʱ …………
Vue.jsͷࠓޙ (ϩʔυϚοϓ) https://github.com/yyx990803/vue/issues/78
Core • v0.11.x • WebComponent ରԠ • Object.observe ରԠ •
͍ͭઌɺnextϒϥϯν͕ΒΕͯɺv0.11͚ͷ ։ൃʢoverhaulͯ͠΄΅full scrach͔Βʣ͕ελʔ τ next ϒϥϯν
Plugins • vue-touch • vue-resource • vue-router • vue-validator •
vue-firebase • vue-import
͓ΘΓʹ
ຊਓͷΛฉ͖͍ͨΒ͍͠
Vue.jsͷΠϕϯτͬͯΔΑ • Vue.js͘͘ձ • ઌʹ̎ճ։࠵ • ຖ݄ୈ1ɾୈ3݄༵ ʹ։࠵͍ͯ͠Δ Έ͍ͨ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ