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
Vue 3.4
kazupon
13
4k
Vue & Vite Rustify
kazupon
4
1.8k
Vue.jsエコシステム動向2023
kazupon
17
6.9k
Reactivity Transform
kazupon
1
1.1k
わたしのOSS活動
kazupon
1
930
Vue with Vite
kazupon
2
2.4k
State of Vue I18n
kazupon
3
510
まちにまった Vue.js 3
kazupon
14
5.4k
Native-ESM powered web dev build tool
kazupon
5
1.4k
Other Decks in Programming
See All in Programming
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
420
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
190
1인 개발자로 행복하게 살기 - GDG 송도 헬로월드 2024
benjaminkim
1
5.6k
코틀린으로 멀티플랫폼 만들기
pangmoo
0
120
受託開発でGitLab CI を活用していく
xiombatsg
1
270
StreamlitとTerraformでデータカタログを作った話
gussan0223
0
290
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
7
3.4k
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
300
Netty Chicago Java User Group 2024-04-17
sullis
0
100
Semantic search with Django and pgvector
pauloxnet
0
230
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
180
puregoの活用例
aethiopicuschan
0
220
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
29
6k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
A Philosophy of Restraint
colly
196
16k
YesSQL, Process and Tooling at Scale
rocio
163
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
220
21k
Design by the Numbers
sachag
274
18k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Statistics for Hackers
jakevdp
789
220k
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݄༵ ʹ։࠵͍ͯ͠Δ Έ͍ͨ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ