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
490
Vapor Revolution
kazupon
3
3.5k
Vue.js最新動向
kazupon
3
1.5k
Vue 3.4
kazupon
13
4.7k
Vue & Vite Rustify
kazupon
4
2.3k
Vue.jsエコシステム動向2023
kazupon
17
7.8k
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
GPUを計算資源として使おう!
primenumber
1
200
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
910
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
1
770
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
580
RailsGirls IZUMO スポンサーLT
16bitidol
0
190
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
240
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
590
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
500
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
1
310
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
970
ニーリーにおけるプロダクトエンジニア
nealle
0
890
フロントエンドのパフォーマンスチューニング
koukimiura
5
1.8k
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Fireside Chat
paigeccino
37
3.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Side Projects
sachag
455
42k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Docker and Python
trallard
45
3.5k
Producing Creativity
orderedlist
PRO
346
40k
Code Reviewing Like a Champion
maltzj
524
40k
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݄༵ ʹ։࠵͍ͯ͠Δ Έ͍ͨ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ