Vue.js ディレクティブの基礎

Vue.js ディレクティブは、ライブラリに DOM 要素に対して何かを行うように指示するマークアップ内の特別なトークンです。ディレクティブには、Vue によって提供される特別な属性であることを示すために、v- というプレフィックスが付けられています。ディレクティブは、開発者が DOM を効率的に操作できるようにする、Vue.js のコア機能の 1 つです。

この記事では、Vue.js ディレクティブの基本について説明し、最もよく使用されるディレクティブと、それらを Vue アプリケーションで使用する方法について説明します。

Vue.js でよく使われるディレクティブ

Vue.js で最もよく使用されるディレクティブをいくつか紹介します。

v-bind: 1 つ以上の属性またはコンポーネントプロパティを式に動的にバインドします。
v-model: フォーム入力、テキストエリア、選択要素に双方向データバインディングを作成します。
v-if: 要素またはコンポーネントを条件付きでレンダリングします。
v-else:v-if の else ブロックを提供します。
v-else-if:v-if の else-if ブロックを提供します。
v-for: 配列またはオブジェクトを使用して項目のリストをレンダリングします。
v-on: 要素にイベントリスナーをアタッチします。
v-show: 式に基づいて要素の可視性を切り替えます。
v-html: 要素の内部 HTML を更新します。

v-bind: 属性を動的にバインドする

v-bind ディレクティブは、属性またはプロパティを式に動的にバインドするために使用されます。たとえば、img 要素の src 属性をデータプロパティにバインドできます。

<template>
  <img v-bind:src="imageSrc" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

v-bind の省略形は単なるコロン (:) なので、上記の例は次のように書き直すことができます。

<img :src="imageSrc" alt="Dynamic Image" />

v-model: 双方向データバインディング

v-model ディレクティブは、フォーム入力要素に双方向データバインディングを作成するために使用されます。これにより、入力要素とデータプロパティが同期されます。

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if、v-else-if、v-else: 条件付きレンダリング

v-if、v-else-if、および v-else ディレクティブは、要素の条件付きレンダリングに使用されます。これらを使用すると、式の評価に基づいて要素を条件付きでレンダリングできます。

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isGuest: true
    };
  }
};
</script>

v-for: リストレンダリング

v-for ディレクティブは、配列またはオブジェクトを反復処理して項目のリストをレンダリングするために使用されます。配列内の各項目は、ループを使用してレンダリングできます。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

v-on: イベント処理

v-on ディレクティブは、DOM 要素にイベントリスナーをアタッチするために使用されます。クリック、入力などのユーザー操作を処理できます。

<template>
  <button v-on:click="showAlert">Click Me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

v-on の省略形はアットマーク (@) なので、上記の例は次のように書き直すことができます。

<button @click="showAlert">Click Me</button>

v-show: 表示を切り替える

v-show ディレクティブは、式に基づいて要素の表示/非表示を切り替えるために使用されます。 v-if とは異なり、DOM から要素を削除するのではなく、display CSS プロパティを切り替えるだけです。

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: HTML のレンダリング

v-html ディレクティブは、要素の内部 HTML を更新するために使用されます。これは、Vue コンポーネントで生の HTML をレンダリングする必要がある場合に便利です。

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

結論

Vue.js ディレクティブは、DOM を操作し、動的でインタラクティブな Web アプリケーションを作成するための強力な方法を提供します。v-bind、v-model、v-if、v-for、v-on、v-show、v-html などの Vue.js ディレクティブの基本を理解することは、すべての Vue 開発者にとって不可欠です。これらのディレクティブを習得することで、Vue.js を使用してより堅牢で機能豊富なアプリケーションを構築できます。

vue ディレクティブ v-bind v-model v-if v-for v-on v-show v-html リアクティブデータイベント条件レンダリング