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 をインクリメントしています。

ポイント:

  • Vue は Vue オブジェクトが中心となり、それは HTML の任意の要素と結びつく

  • データを表示するときは {{ ~ }} を使う

  • イベントをハンドリングするときは @~ を使う