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
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
160
AWS発のAIエディタKiroを使ってみた
iriikeita
1
190
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
RDoc meets YARD
okuramasafumi
4
170
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
740
速いWebフレームワークを作る
yusukebe
5
1.7k
AIでLINEスタンプを作ってみた
eycjur
1
230
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
基礎から学ぶ大画面対応(Learning Large-Screen Support from the Ground Up)
tomoya0x00
0
3.3k
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
930
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Docker and Python
trallard
46
3.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
GitHub's CSS Performance
jonrohan
1032
460k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
What's in a price? How to price your products and services
michaelherold
246
12k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
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݄༵ ʹ։࠵͍ͯ͠Δ Έ͍ͨ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ