2014/02/27

軽量MVVMフレームワークのVue.jsを試してみた

シンプルで高速なMVVMフレームワークであるVue.jsでサンプルアプリを作成してみました。

Vue.jsの特徴

General FAQ内でAngularJSとの違いを尋ねられたときの、作者であるEvanのコメントによると、Vue.jsには次のような特徴があります (超意訳)。

  • シンプル
  • 高速
  • 柔軟性があり、他のライブラリを混ぜても爆発しない
  • ディレクティブとコンポーネントの役割をより明確にした

実際、TodoMVCベースのベンチマークテストでは平均的に他のフレームワークよりも早いらしいです。

サンプル

というわけでサンプル。よくあるTODOアプリです。フレーム内だと上手く動作しないときがあるみたいなので、そのときは右上のEditから別ページで開いてください。

  • AngularJSでは沢山あるディレクティブをうまくまとめた感じ。例えば、イベント処理はv-onディレクティブを使って、v-on="click:done=!done"のように式を直接書いたり、v-on="click:add"のようにVueオブジェクトのmethods内のメソッドを呼び出したりできます。
  • イベントハンドラでは通常、thisVueオブジェクトになり、引数としてイベントを取ります。イベントのtargetVMにトリガとなったオブジェクトが参照できます。
  • Vue.jsでは配列にset, remove, replaceが足されているので、deleteではそれを利用しています。
  • ちょっと問題だったのは、要素を全部消すときはsplice(0)での全削除ではビューに反映されなかった点。deleteAllでは要素数分だけpopしています (他に良い方法があれば教えてください → 単純にthis.items = []とすればよいだけでした。 (Evanのツイート) )。

関連リンク

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。