Vue.jsでは、HTMLテンプレートでディレクティブを使用して、データをバインドしたりDOMを操作したりします。
ディレクティブは「v-bind」や「v-on」など「v-xxxx:」の形式で記述するのが基本ですが、ディレクティブの中には省略記法が用意されているものがあります。
今回は、v-bindディレクティブとv-onディレクティブで使用できる省略機能の「:」と「@」を紹介します。
ディレクティブの省略記法
Vue.jsの公式ドキュメントには、ディレクティブの省略記法について、以下のように記載されています。
省略記法
接頭辞は、テンプレート内の Vue 独自の属性を識別するための目印となっています。これは既存のマークアップに対して、 Vue.js を利用して動的な振る舞いを適用する場合に便利ですが、頻繁に利用されるディレクティブに対しては冗長に感じることがあるでしょう。同時にシングルページアプリケーションを作成するにあたり、全てのテンプレートを Vue で管理しているとき、v- 接頭辞を付ける必要性は低いものになるでしょう。したがって、 Vue は 2 つの最もよく使われるディレクティブ v-bind と v-on に対して特別な省略記法を提供しています:
Vue.jsのディレクティブで使用する接頭辞の「v-」は、HTMLテンプレート内でVue独自の属性を識別するための目印になっていますが、「v-bind」と「v-on」の2つのディレクティブは、記述する頻度が高く、記述する回数が増えるほどコーディングが面倒に感じることがあります。
そこで、Vue.jsではこの2つのディレクティブに対して、省略記法を用意してくれているということです。
v-bind 省略記法
v-bindディレクティブは、HTML要素の属性にデータをバインドする際に利用します。
例えば、dataオプションに定義した「url」というプロパティをa要素（タグ）の「href」属性にバインドする場合は以下のようにします。
|
1 |
<a v-bind:href="url">リンク</a> |
v-bindディレクティブは、クラス（class）属性やスタイル（style）属性とバインドする際に利用しますので、CSSスタイルシートを多用したアプリケーションでは、頻繁に記述することになります。
そこで、Vue.jsではこのv-bindディレクティブの省略記法として「:」が提供されています。
上記の例を省略記法で記述すると、以下のように記述することができます。
|
1 |
<a :href="url">リンク</a> |
v-bindディレクティブの「v」から「:」までの「v-bind:」の部分を「:」に置き換えます。
v-on 省略記法
v-onディレクティブは、HTML要素のイベントに処理（メソッド）をバインドする際に利用します。
例えば、methodsオプションに定義した「onClick」というメソッドをbutton要素（タグ）の「click」イベントにバインドする場合は以下のようにします。
|
1 |
<button v-on:click="onClick">ボタン</button> |
v-onディレクティブは、クリック時のイベントをはじめ、あらゆるイベントとバインドする際に利用しますので、ユーザーの操作を受け付けるアプリケーションでは、頻繁に記述することになります。
そこで、Vue.jsではこのv-onディレクティブの省略記法として「@」が提供されています。
上記の例を省略記法で記述すると、以下のように記述することができます。
|
1 |
<button @click="onClick">ボタン</button> |
v-onディレクティブの「v」から「:」までの「v-on:」の部分を「@」に置き換えます。
まとめ
Vue.jsのv-bindディレクティブとv-onディレクティブには省略記法が提供されている。
v-bindディレクティブの省略機能は「:」
v-onディレクティブの省略機能は「@」
注意点
ディレクティブの省略記法を使うことでコーディングの量を減らすことができます。また、慣れてくるとソースコードも見やすくなってきます。
しかし、アプリケーションの開発プロジェクトのメンバーにVue.jsに不慣れな方が多い場合には、あえて省略記法を使わないという選択肢もあります。
初心者が「v-bind:」「v-on:」と記述して、熟練者が「:」「@」と記述してしまって、1つのプロジェクト内に、両方の記法が混在してしまうことになります。
ディレクティブの省略記法を使うことは完全に任意ですが、1つのプロジェクト内では混在させないようにする方がソースコードの可読性が良くなります。
ディレクティブの省略記法の利用は、開発するアプリケーションの規模や、メンバーの人数などで適切に使い分けることをお勧めします。