シンプルで高速な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内のメソッドを呼び出したりできます。 - イベントハンドラでは通常、
thisがVueオブジェクトになり、引数としてイベントを取ります。イベントのtargetVMにトリガとなったオブジェクトが参照できます。 - Vue.jsでは配列に
set,remove,replaceが足されているので、deleteではそれを利用しています。 - ちょっと問題だったのは、要素を全部消すときは
splice(0)での全削除ではビューに反映されなかった点。deleteAllでは要素数分だけpopしています (他に良い方法があれば教えてください → 単純にthis.items = []とすればよいだけでした。 (Evanのツイート) )。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。