【Vue.js】ディレクティブとは

Vueにおけるディレクティブとは

v- から始まる特別な属性です。

Vueに最初から搭載されているビルトインディレクティブと、
開発者が自分で作るカスタムディレクティブの2種類があり、用途に応じて
柔軟に対応できます。

よく使うビルトインディレクティブ一覧

ディレクティブ	用途	使用例
v-bind (:)	属性に値を設定する	:href="url"
v-model	入力値と変数を同期する	v-model="name"
v-on (@)	イベントを設定する	@click="count++"
v-if	条件が真なら表示	v-if="isLogin"
v-else	v-if が偽なら表示	v-else
v-else-if	条件分岐	v-else-if="age >= 20"
v-show	表示・非表示を切り替える	v-show="isShow"
v-for	繰り返し表示	v-for="item in items"
v-text	テキストを表示	v-text="message"
v-html	HTMLを表示	v-html="htmlText"
v-pre	Vueのコンパイルをスキップ	v-pre
v-once	一度だけ描画する	v-once
v-cloak	コンパイル完了まで非表示	v-cloak
v-memo	再レンダリングを最適化（Vue3.2+）	v-memo="[value]"

カッコ内は代わりに使って省略できる（v-bind v-on）

よく使うディレクティブの使用例

① v-bind

HTML属性に値を設定する

<a :href="url">Google</a>

② v-model

入力値と変数を同期する

<input v-model="name">

③ v-on

イベントリスナー
ユーザーの操作（クリック、キー入力、フォーム送信など）などの
イベントを検知し、それに応じたプログラムを実行する仕組みのこと

<button @click="count++">

④ v-if

条件によって表示する

<p v-if="isLogin">
  ログインしています
</p>

⑤ v-show

表示・非表示を切り替える

<p v-show="isShow">

⑥ v-for

繰り返し表示

<li v-for="fruit in fruits">
  {{ fruit }}
</li>

⑦ v-text

テキストを表示する

<p v-text="message"></p>