Vue.js

vuejs.org

MVVM パターンの ViewModel にフォーカスしたライブラリ。結構便利。

ViewModel とは

Wikipedia に書いてある通りで、

  • Model と View の間のデータバインディングしてくれる君。
  • Model の更新に合わせて View にも反映してくれる便利なレイヤー。

Viewを描画するための状態の保持と、Viewから受け取った入力を適切な形に変換してModelに伝達する役目を持つ。すなわちViewとModelの間の情報の伝達と、Viewのための状態保持のみを役割とする要素である。Viewとの通信はデータバインディング機構のような仕組みを通じて行うため、ViewModelの変更は開発者から見て自動的にViewに反映される。

http://ja.wikipedia.org/wiki/Model_View_ViewModel#ViewModel

サンプル

試しに使ってみたものがこちら (ColorPicker) HEX/RGB の値を変えると、それに対応した HEX/RGB へと値が追従する感じ。

Synopsis

<div id="color-value-container">
  <input v-model="hex" v-on="keyup: hexChanged">
  <div id="color-space">{{hex}}</div>
</div>

<script>
  var demo = new Vue({
    el: '#color-value-container',
    data: {
        hex: '#000000'
    }.
    methods: {
        hexChanged: function() {
            this.$el.querySelector('#color-space').style.backgroundColor = this.$data.hex;
        }
    }
  });
</script>

このように書いておくとだいたい次のようなことができる。

  • <input> に入力された値が div#color-space の {{hex}} にバインドされる
    • これでモデルが更新されるたびに自動的に div のテキストも更新される
  • <input> で keyup イベント発火時に methods 内に定義した hexChanged メソッドが呼ばれる
    • それに応じてほげほげできる

data に関するヒント

  • v-model="hex" は Vue に渡されたオブジェクトの data.hex に相当する
  • methods 内では this.$data.hex でアクセスできる
  • this.$data.hex の値を変更すると、変更された値が View に自動的に適用される

このあたりをおさえておけば基本的に迷うことなく、あとはドキュメントを見て何とかできるので今後何かに使ってみたい。