Vue.jsを使いはじめる

Vue.jsというJSライブラリがちょっと話題だったので使い始めてみました。
プログラムとテンプレートを切り分けるMVVMで、jQueryと異なりHTMLのDOM構造に依存しないため使いこなせばかなり良さそうに思えます。

少し探したらCDNもあったのでサンプル画面を作ってみました。
http://ja.cdnjs.com/libraries/vue

See the Pen Vue.js test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

HTML側ではvue.jsを読み込み、{{lastName}} などの形式で変数を埋め込んでいます。
フィールドには「v-model」という独自属性で対応させており、値を変えれば即座に反映されます。

JavaScript

vue = new Vue({        //vue宣言
  el: ".contents",     //対象要素の指定
  data: {              //対象要素のデータ操作
    firstName: "太朗",
    lastName: "山田"
  },
  computed: {          //対象要素内の処理
    fullName: function() {
      return this.lastName + " " + this.firstName;
    }
  }
});

ごく簡単な処理ですが、ソースを少し眺めればなんとなく基本が理解できます。

あとはイベント拾って操作する方法など分かればかなり便利に使えそうです。