ディレクティブ / Learch

ディレクティブ

条件分岐 (`v-if`, `v-show`)

Vue.jsでは、条件によって要素を表示または非表示にすることができます。v-ifとv-showは似ていますが、動作の仕方が異なります。

`v-if` の使用例

v-ifは条件が真の場合にのみ要素をDOMに描画します。

app.vue

<script setup>
const seen = true
</script>
<template>
  <p v-if="seen">このテキストが表示されます</p>
</template>

`v-show` の使用例

v-showは要素が常にDOMに存在し、条件が真の場合にのみ表示されます（内部的にはCSSのdisplayプロパティを切り替えることで実現します）。

app.vue

<script setup>
const seen = ref(false);
const switchSeen = () => {
  seen.value = !seen.value
}
</script>
<template>
  <p v-show="seen">このテキストが表示されます</p>
  <button @click="switchSeen">Switch</button>
</template>

リストレンダリング (`v-for`)

リストやオブジェクトのデータを使って要素のリストを描画するには、v-forディレクティブを使用します。

app.vue

<script setup>
const items = [
  { id: 1, message: 'Foo' },
  { id: 2, message: 'Bar' }
]
</script>
<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.message }}</li>
  </ul>
</template>

バインディング (`v-bind`)

v-bindディレクティブを使用して、属性を動的にバインドできます。これは特に、HTML要素のクラスやスタイルを動的に制御する場合に便利です。

/components/message.vue

<script setup>
defineProps(['title'])
</script>
<template>
  <span>
    メッセージは {{ title }}
  </span>
</template>

双方向バインディング (`v-model`)

フォーム入力とアプリケーションデータの間で双方向データバインディングを作成するには、v-modelディレクティブを使用します。

app.vue

<script setup>
const message = ref('');
</script>
<template>
  <input v-model="message"/>
  <p>入力されたメッセージ: {{ message }}</p>
</template>

イベントハンドリング (`v-on`)

v-onディレクティブを使って、DOMイベントをリスニングし、それに応じたメソッドを実行できます。

app.vue

<script setup>
const message = ref('こんにちは');
const reverseMessage = () => {
  message.value = message.value.split('').reverse().join('');
};
</script>
<template>
  <button v-on:click="reverseMessage">メッセージを逆にする</button>
  <!-- または@を使う -->
  <!-- <button @click="reverseMessage">メッセージを逆にする</button> -->
  <p>{{ message }}</p>
</template>

カスタムディレクティブ

Vue.jsにおけるカスタムディレクティブは、Vueのデータバインディングに加えて、DOM要素に対する低レベルな操作や再利用可能な振る舞いを定義するために使用されます。カスタムディレクティブを利用することで、コンポーネント外からDOMへの直接的なアクセスや操作を行うことができ、複雑な振る舞いを抽象化し再利用することが可能になります。

カスタムディレクティブの定義

Vueでは、カスタムディレクティブを定義することができます。カスタムディレクティブは、bind、inserted、update、componentUpdated、unbindの5つのフック関数を提供しており、これらを使用してディレクティブのライフサイクル中に特定の動作を行うことができます。

以下は、テキストの色を変更する簡単なカスタムディレクティブの例です。

Vue.directive('color', {
  bind(el, binding, vnode) {
    el.style.color = binding.value;
  }
});

カスタムディレクティブの使用

カスタムディレクティブを使用するには、定義したディレクティブ名をHTML要素にv-プレフィックスと共に指定します。以下の例では、v-colorディレクティブを使用して、要素のテキスト色を動的に変更しています。

<template>
  <div v-color="'red'">このテキストは赤色です。</div>
</template>

実用的なカスタムディレクティブの例

入力要素に自動的にフォーカスを当てるカスタムディレクティブの例です。

Vue.directive('focus', {
  inserted: function (el) {
    el.focus();
  }
});

これを使用すると、ページがロードされた時に特定の入力要素に自動的にフォーカスを当てることができます。

<input v-focus>

Vueコンポーネント(後半)

Vueルーティングと状態管理