Vue.jsのディレクティブ（v-xxxx）で属性やイベントなどを設定する

ここでは、Vue.jsのディレクティブについて紹介します。

ディレクティブとは

ディレクティブは「v-」で始まる「v-xxxx」の形式の特別な属性です。
ディレクティブの属性値には、1つのJavaScript式を指定します。
例えば「v-abc」というディレクティブがあったとすると、その属性値は「v-abc:yyyy=”zzzz”」のように指定します。

ディレクティブの仕事（役割）は、属性値の式が変化した時に、式が表す内容をリアクティブにDOMに適用、反映することです。

Vue.jsの主なディレクティブ

Vue.jsがあらかじめ用意している主なディレクティブには以下のものがあります。

v-bind
v-show
v-if
v-else
v-else-if
v-for
v-model
v-on

v-bindディレクティブ

v-bindディレクティブは、HTML要素のhref、class、styleなどの属性値を設定する際に使用します。

v-bindディレクティブの使用例

v-bindディレクティブの使用例をいくつか示します。

<a v-bind:href="url"> ... </a>

1	<a v-bind:href="url"> ... </a>

上記の例では、href属性にVueインスタンスに定義されているdataオプションのurlプロパティ（文字列）を指定しています。

<div v-bind:class="{ active: isActive }"></div>

1	<div v-bind:class="{ active: isActive }"></div>

上記の例では、class属性にdataオプションのisActive（true/false）によってactiveクラスを指定しています。
isActiveがtrueの場合にはactiveクラスが適用され、falseの場合には適用されません。

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

1	<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

上記の例では、style属性でcolorにdataオプションのactiveColor（文字列）を指定し、fontSizeにdataオプションのfontSize（数値）に「px」を付加した文字列を指定しています。

v-showディレクティブ

v-showディレクティブは、HTML要素の表示状態（表示／非表示）を設定する際に使用します。

v-showディレクティブの使用例

v-showディレクティブの使用例を示します。

<h1 v-show="isDisplay">Hello world!</h1>

1	<h1 v-show="isDisplay">Hello world!</h1>

上記の例では、dataオプションのisDisplay（true/false）によってh1要素の表示と非表示を切り分けています。
isDisplayがtrueの場合は表示され、falseの場合は非表示になります。
v-showで非表示にされた要素はDOMに残ります。（スタイルのdisplayによる表示／非表示の切り替えになります。）

v-ifディレクティブ

v-ifディレクティブは、v-showディレクティブと同様に、HTML要素の表示状態（要素の存在有無）を設定する際に使用します。

v-ifディレクティブの使用例

v-ifディレクティブの使用例を示します。

<h1 v-if="isThere">Hello world!</h1>

1	<h1 v-if="isThere">Hello world!</h1>

上記の例では、dataオプションのisThere（true/false）によってh1要素の表示と非表示を切り分けています。
isThereがtrueの場合は表示され、falseの場合は非表示になります。
v-ifで非表示にされた要素はDOMには残りません。（DOMから削除されます。）

v-elseディレクティブ

v-elseディレクティブは、v-ifディレクティブと共に使用されます。
v-ifディレクティブに指定した条件式がfalseの場合にHTML要素を表示します。

v-elseディレクティブの使用例

v-elseディレクティブの使用例を示します。

<h1 v-if="isThere">Hello world!</h1>
<h1 v-else>Hello space!</h1>

1 2	<h1 v-if="isThere">Hello world!</h1> <h1 v-else>Hello space!</h1>

v-else-ifディレクティブ

v-else-ifディレクティブも、v-ifディレクティブと共に使用されます。
v-ifディレクティブに指定した条件式がfalseの場合は、さらに条件式を指定してHTML要素の表示状態（要素の存在有無）を設定します。

v-else-ifディレクティブの使用例

v-else-ifディレクティブの使用例を示します。

<h1 v-if="type === 'sea'">Hello sea!</h1>
<h1 v-else-if="type === 'sky'">Hello sky!</h1>
<h1 v-else-if="type === 'land'">Hello land!</h1>
<h1 v-else>Hello space!</h1>

1

2

3

4

<h1 v-if="type === 'sea'">Hello sea!</h1>

<h1 v-else-if="type === 'sky'">Hello sky!</h1>

<h1 v-else-if="type === 'land'">Hello land!</h1>

<h1 v-else>Hello space!</h1>

v-forディレクティブ

v-forディレクティブは、オブジェクトのプロパティや、配列（コレクション）に対して反復処理を行います。

v-forディレクティブの使用例

v-forディレクティブの使用例をいくつか示します。

<ul>
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

1

2

3

4

5

<ul>

<li v-for="value in object">

{{ value }}

</li>

</ul>

上記の例では、dataオプションのobjectが持つプロパティ（メンバー）を列挙しています。

<ul>
  <li v-for="item in items">
    {{ item }}
  </li>
</ul>

1

2

3

4

5

<ul>

<li v-for="item in items">

{{ item }}

</li>

</ul>

上記の例では、dataオプションのitemsが持つ要素を列挙しています。

v-modelディレクティブ

v-modelディレクティブは、テキストボックスやチェックボックスなどの入力系のHTML要素の値を取得・設定する際に使用します。

v-modelディレクティブの使用例

v-modelディレクティブの使用例をいくつか示します。

<input type="text" v-model="code" />

1	<input type="text" v-model="code" />

上記の例では、テキストボックスにVueインスタンスに定義されているdataオプションのcodeを紐づけています。

<input type="checkbox" v-model="isSpecial" />

1	<input type="checkbox" v-model="isSpecial" />

上記の例では、チェックボックスにVueインスタンスに定義されているdataオプションのisSpecialを紐づけています。

<select v-model="category">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

1

2

3

4

5

<select v-model="category">

<option value="a">A</option>

<option value="b">B</option>

<option value="c">C</option>

</select>

上記の例では、セレクトボックス（選択ドロップダウンリストボックス）に、Vueインスタンスに定義されているdataオプションのcategoryを紐づけています。

v-onディレクティブ

v-onディレクティブは、HTML要素のクリックなどのイベントを定義する際に使用します。

v-onディレクティブの使用例

v-onディレクティブの使用例をいくつか示します。

<a v-on:click="clickMethod"> ... </a>

1	<a v-on:click="clickMethod"> ... </a>

上記の例では、リンク（a要素）がクリックされた時の処理にVueインスタンスに定義されているmethodsオプションのclickMethodを指定しています。

<input v-on:focusout="focusoutMethod" />

1	<input v-on:focusout="focusoutMethod" />

上記の例では、リンク（a要素）がクリックされた時の処理にmethodsオプションのfocusoutMethodを指定しています。

ディレクティブの動的引数

ディレクティブの引数は角括弧（[]）で囲むことで、JavaScriptの式を使うこともできます。

ディレクティブの動的引数の使用例

ディレクティブの動的引数の使用例をいくつか示します。

<a v-bind:[attributeName]="url"> ... </a>

1	<a v-bind:[attributeName]="url"> ... </a>

上記の例では、dataオプションのattributeNameが示す属性値を指定しています。
attributeNameの値が「href」であれば「<a v-bind:href=”url”> … </a>」となります。

<a v-on:[eventName]="doSomething"> ... </a>

1	<a v-on:[eventName]="doSomething"> ... </a>

上記の例では、dataオプションのeventNameが示すイベントを指定しています。
eventNameの値が「click」であれば「<a v-on:click=”doSomething”> … </a>」となります。

カスタムディレクティブ

ディレクティブは、ユーザー（開発者）が独自に作成することもできます。
例えば「v-focus」というディレクティブを作成して、以下のように利用できます。

<input v-focus />

1	<input v-focus />

Vue.js 入門 Tips 一覧

リンク