Vue.js ハンズオン資料
- 2. 自己紹介 • 名前: 吉田 篤(よしだ あつし) • 年齢/性別: 31歳/男性 • Twitter: @yalab • スリーサイズ: 秘密 • 職業: ゲームプログラマ(cocos-2d-x, c++, rails) • rails contribute数: 2
- 4. jsフレームワーク戦国時代 • Backbone.js • Angular.js • Ember.js • Knockout.js • Ractive.js and Rivets.js • vue.js
- 6. デファクトが 無いからさ
- 7. 一長一短
- 8. 一長一短 • 高機能だけど習得に時間がかかる？簡単に習得 できるけど機能が少ない？ • MVC? MVVM? MVW? • 大規模向き？小規模向き？
- 10. 要件による
- 11. js フレームワークを 使うと良い点 • jQuery だけだとコードが乱雑になるところがま とまる • 高機能な事を簡単に実現できる • Webアプリケーションの作り方の新しい発想が 持てる
- 16. vue.js? • MVVM の VM を提供 • 双方向データバインディング • 軽量、高速
- 17. 準備 $ git clone https://github.com/yalab/try_vue.git • rails new して • git 管理して • rails-assets.org から vue.js をインストールして • welcome#index を root にして • bootstrap を適用したもの
- 19. step1. のポイント • el: にバインディングする DOM ノードを指定す る • data はそのまま出力される
- 21. step2. のポイント • 繰り返し処理は v-repeat • @$data に入れたデータは view に出力される • created: は $el と $data を双方向バインディ ングする直前に呼ばれる http://vuejs.org/api/ instantiation-options.html#created
- 23. step3. のポイント • v-model を指定すると vue.js の data として扱 われる • filterBy すごい
- 25. step4. のポイント • v-model を指定したフォームの値は即座に js の オブジェクト(model)と DOM(view) に反映され る • 配列も同様に即座に反映される
- 26. vue.js の用途 • 小さなシングルページアプリケーション • データのプリフェッチをする場合あまりデータ 量が多くないアプリケーション
- 27. vue.js の現状 • まだβ版(0.10.5) • vue-router などの機能追加の予定あり • IE9以上でしか動かない(今後もレガシーブラウザ 対応しない)
- 29. js 界隈も watch しておくと良いです。 (もう少し圧倒的なデファクトが 出てきたらうれしいのに。)
- 31. ご清聴ありがとう ございました。