Vue.jsのディレクティブとは？

Vue.jsのディレクティブは、HTMLの属性のように見える特別な構文であり、Vueのテンプレート内でデータをバインドしたり、DOMへの動的な振る舞いを適用したりするために使用されます。以下では、よく使われるいくつかのVue.jsディレクティブを解説します。

v-model:

v-modelディレクティブは、フォームの入力要素（input、textarea、selectなど）とVue.jsのデータを双方向でバインドするために使用されます。入力された値が変更されると、Vue.jsのデータも更新され、逆も同様です。

<input v-model="message">

v-bind:

v-bindディレクティブは、要素の属性とVue.jsのデータをバインドするために使用されます。属性の値を動的に変更したい場合に使用します。

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

または、短縮して以下のように書くこともできます。

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

v-if / v-else-if / v-else

v-ifディレクティブは、条件に応じて要素をDOMに追加または削除します。v-else-ifとv-elseは、さらに条件分岐を追加します。

<div v-if="seen">Now you see me</div>
<div v-else>Now you don't</div>

v-for:

v-forディレクティブは、配列の要素を繰り返し処理して、リストやテーブルなどの複数の要素をレンダリングします。

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

v-on:

v-onディレクティブは、イベントリスナーを要素に追加し、イベントが発生したときにVue.jsのメソッドを呼び出すために使用されます。

<button v-on:click="doSomething">Click me</button>

または、短縮して以下のように書くこともできます。

<button @click="doSomething">Click me</button>

これらはVue.jsでよく使用されるディレクティブのいくつかですが、他にもさまざまなディレクティブがあります。ディレクティブはVue.jsの強力な機能であり、HTMLの属性として直感的に使用することで、コンポーネントの振る舞いを制御することができます。