MVVMパターンJavascriptフレームワークのVue.jsを紹介します

1. Vue.jsでさくっとMVVM
2014.12.05
@gorou_178

2. 自己紹介
穴井 怜
株式会社イノベーター・ジャパン
福岡オフィス Webエンジニア
!
@gorou_178
!
C++ → Java →
Objective-C → PHP(今ここ)

3. Vue.jsとは？

5. – vuejs.org
“10 Second Example”

6. View
HTMLがそのままテンプレート

7. <div id=“demo">
<p>{{message}}</p>
<input type="text" v-model=“message"/>
</div>

8. <div id=“demo">
<p>{{message}}</p>
<input type="text" v-model=“message"/>
</div>
モデルとinputを
関連付け

9. <div id=“demo">
<p>{{message}}</p>
<input type="text" v-model=“message"/>
</div>
モデルとinputを
関連付け
モデルの内容
を表示

10. Model
&
ViewModel

11. var demo = new Vue({
el: ‘#demo',
data: {
message: 'Hellow World’
}
});

12. var demo = new Vue({
el: ‘#demo',
data: {
message: 'Hellow World’
}
});
elにビュー
を定義

13. var demo = new Vue({
el: ‘#demo',
data: {
message: 'Hellow World’
}
});
elにビュー
を定義
dataにモデ
ルを定義

14. Demo

15. とっても簡単

16. Vue.jsとは
• MVVMパターン
• 依存ライブラリなし
• モダンブラウザ(IE9以降)のみサポート
• そのため軽量(17kb min+gzip)

17. Vue.jsの使い方
1. ディレクティブ
2. イベント
3. WebComponent

18. Vue.jsの使い方
1. ディレクティブ
2. イベント
3. WebComponent

19. ディレクティブ
• v-repeat: 繰り返し処理
!
!
• v-on: イベント処理
<li v-repeat=“todos">
{{taskName}}
</li>
<li v-repeat="todos" v-on="click: done”>

20. ディレクティブ
• filterBy: 文字列を検索してヒットしたものだけ表示
!
!
• keyフィルタ: 指定キーコードのみ受け付ける
<input type="text" v-model=“task"
v-on="keyup:addTodo | key enter" >
<input v-model=“searchKey">
<ul>
<li v-repeat="todos | filterBy searchKey”>
{{taskName}}</li>
</ul>

21. ディレクティブ
• orderBy: 並び替え
<li v-repeat="todos | orderBy ‘id'">{{taskName}}</li>
<li v-repeat="todos | orderBy ‘id' -1“>{{taskName}}</li>

22. Vue.jsの使い方
1. ディレクティブ
2. イベント
3. WebComponent

23. イベント
• $on(event名, callback): イベントを受け付ける
• $emit(event名, [args…]): イベントを発生させる
• $watch(モデル名, callback): 値の変化を監視
!
todoApp.$watch('todos', function(value, mutation){
console.log(value);
});

24. Vue.jsの使い方
1. ディレクティブ
2. イベント
3. WebComponent

25. WebComponent
var MyComponent = Vue.extend({
template: 'A custom component!’
});
Vue.component('my-component', MyComponent);

26. WebComponent
<div v-component="my-component"></div>
or
<my-component></my-component>

27. まとめ
• 簡単に双方向バインディング
• さくっと始められる(学習コスト低め)
• コンポーネント化しやすい

28. 弊社
イノベーター・ジャパン福岡オフィス
絶賛エンジニア募集中！

31. Webサービス
作りたい方大歓迎です

32. ありがとうございました