Vue.js の基本

Vue.js は、公式ページにおいて

> Vue はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。

と説明されている通り、ユーザインタフェース – HTML(DOM) とその上で制御することに特化したフレームワークです。
提供される機能がユーザインタフェース周りに限定されているため、非常に「軽い」ところが気に入っています。

Vue の中心となるのが Vue オブジェクトです。
これは、ビュー(view)のデータをモデル化したオブジェクトです。オブジェクトですから、データと振る舞いを持ちます。

これは、「増やす」ボタンをクリックすると、隣にある数字をインクリメントするアプリケーションです。

HTML は非常にシンプルで、id 属性が “app” の div の中に、button が1つあり、その隣に {{ count }} という見慣れない記述があります。

JavaScript のコードでは、Vue オブジェクトを生成しています。このとき、オプション el に、ひもづける要素を指定します。el:’#app’ なので、HTML で記述した div タグを指していることになります。

他にも data と methods という2つのオプションがあります。この2つのオプションこそが、オブジェクトのデータと振る舞いです。

Vue では、いくつか特殊な記法を用いることになります。

@～イベントをハンドリングします。@click=”…” と書けば、クリックしたときの処理(JavaScript)を記述することができます。また、オブジェクトのメソッドを指定することができます。@click=”inc” であれば、クリックされたときに inc メソッドを呼び出すということになります。
{{ ～ }} オブジェクトのデータを表示します。{{ count }} であれば、オブジェクトの count の値が表示されます。
v-model, v-for などの特殊な属性別記事にて説明

inc メソッドがいかにも**オブジェクト的な**処理になっていることがおわかりいただけるかと思います。inc メソッド内では、その count をどこに表示するかとか、何がきっかけに呼ばれているのかだとかを意識せず、単に自分のデータである count をインクリメントしています。

ポイント：