Vue3 組み込みディレクティブ

Vue.js には複数のディレクティブ（Directives）が組み込まれており、テンプレートに特定のリアクティブな動作を追加したり、DOM を操作したりするために使用します。

以下は Vue.js でよく使われる組み込みディレクティブです：

ディレクティブ 使用例 説明
v-text <p v-text="message"></p> 要素のtextContent、補間（interpolation）に似て{{ }}、ただし単方向バインディングです。
v-html <div v-html="htmlContent"></div> 要素のinnerHTML、HTML を出力するために使用します。
v-model <input v-model="value"> フォームコントロール要素上で双方向データバインディングを作成し、入力フィールドとデータプロパティを同期させます。
v-show <div v-show="isVisible"></div> 式の真偽に基づいて要素の表示と非表示を切り替え、CSS のdisplay属性を使用します。
v-if <p v-if="isVisible">Visible</p> 式の真偽に基づいて条件付きで要素をレンダリングし、条件が偽の場合は要素が DOM から削除されます。
v-else <p v-if="isVisible">Visible</p><p v-else>Not Visible</p> v-ifの補足ディレクティブで、条件が偽のときの代替コンテンツを表示するために使用します。
v-else-if <template v-if="type === 'A'"><p>Type A</p></template><template v-else-if="type === 'B'"><p>Type B</p></template> 連続して使用するのはv-ifとv-elseの後で、複数条件の判定に使用します。
v-for <li v-for="(item, index) in items" :key="index">{{ item }}</li> 配列またはオブジェクトの各要素を反復処理し、対応する数の要素を生成します。
v-on <button v-on:click="handleClick">Click me</button> イベントリスナーをバインドして DOM イベントを監視します。省略形は@。
v-bind <img v-bind:src="imageSrc.html"> HTML 属性を動的にバインドします。省略形は:。
v-slot <template v-slot:header><h2>Header</h2></template> 名前付きスロットの構文で、子コンポーネントのコンテンツを挿入する位置を提供します。
v-pre <div v-pre>{{ message }}</div> この要素とそのすべての子要素のコンパイル処理をスキップし、元の Mustache タグを表示するために使用します。
v-cloak [v-cloak] { display: none; } Vue インスタンスのコンパイルが完了する前にテンプレートコンテンツを非表示にし、未コンパイルの Mustache タグが表示されるのを防ぎます。
v-once <p v-once>{{ message }}</p> 要素とコンポーネントを一度だけレンダリングし、その後のデータ変更に応じて更新されることはありません。
v-memo 
<div v-memo="[valueA, valueB]">
  ...
</div>

テンプレートのサブツリーをキャッシュします。

コンポーネントが再レンダリングされるとき、もしvalueAとvalueBがすべて変わらなければ、この<div>とその子要素のすべての更新がスキップされます。実際、キャッシュされたサブツリーのコピーを再利用できるため、仮想 DOM の vnode 作成さえもスキップされます。

v-text

  • 使用法: <p v-text="message"></p>
  • 説明: 要素のtextContent、補間（interpolation）に似て{{ }}、ただし単方向バインディングです。要素のプレーンテキストコンテンツを設定するために使用できます。

例

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

例

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-html

  • 使用法: <div v-html="htmlContent"></div>
  • 説明: 要素のinnerHTML、HTML 構造を含むコンテンツを出力するために使用します。セキュリティに注意し、XSS 攻撃を避ける必要があります。

例

<div v-html="htmlContent"></div>

例

data() {
    return {
        htmlContent: '<strong>Vue.js</strong> is awesome!'
    };
}

v-model

  • 使用法: <input v-model="value">
  • 説明: フォームコントロール要素上で双方向データバインディングを作成し、入力フィールドとデータプロパティを同期させます。複数のフォームコントロールタイプをサポートします。

例

<input type="text" v-model="message">

例

data() {
    return {
    message: ''
    };
}

v-show

  • 使用法: <div v-show="isVisible"></div>
  • 説明: 式の真偽に基づいて要素の表示と非表示を切り替え、CSS のdisplay属性で要素の可視性を制御します。

例

<div v-show="isVisible">Visible when true</div>

例

data() {
    return {
    isVisible: true
    };
}

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

  • 使用法: <p v-if="isVisible">Visible</p><p v-else>Not Visible</p>
  • 説明: 式の真偽に基づいて条件付きで要素をレンダリングします。v-elseとv-else-ifであるv-ifの補足ディレクティブで、複数条件の判定に使用します。

例

<p v-if="isVisible">Visible</p>
<p v-else>Not Visible</p>

例

data() {
    return {
        isVisible: true
    };
}

v-for

  • 使用法: <li v-for="(item, index) in items" :key="index">{{ item }}</li>
  • 説明: 配列またはオブジェクトの各要素を反復処理し、対応する数の要素を生成します。キー（key）を指定してレンダリング効率を高めることができます。

例

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

例

data() {
    return {
        items: ['Apple', 'Banana', 'Cherry']
    };
}

v-on (@)

  • 使用法: <button v-on:click="handleClick">Click me</button>
  • 説明: イベントリスナーをバインドして DOM イベントを監視します。省略形は@。修飾子と動的なイベント名をサポートします。

例

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

例

methods: {
    handleClick() {
    alert('Button clicked');
    }
}

v-bind ( : )

  • 使用法: <img v-bind:src="imageSrc.html">
  • 説明: HTML 属性を動的にバインドします。省略形は:。要素の属性を動的に設定するために使用します。例えばsrc、hrefなど。

例

<img v-bind:src="imageSrc" alt="Vue Logo">

例

data() {
    return {
    imageSrc: 'https://vuejs.org/images/logo.png'
    };
}

v-slot

  • 使用法: <template v-slot:header><h2>Header</h2></template>
  • 説明: 名前付きスロットの構文で、子コンポーネントのコンテンツを挿入する位置を提供し、カスタムコンポーネントのコンテンツ配信に使用します。

例

<BaseLayout>
    <template v-slot:header>
    <h2>Header Content</h2>
    </template>
    <template v-slot:footer>
    <p>Footer Content</p>
    </template>
</BaseLayout>

例

// BaseLayout コンポーネント定義
Vue.component('BaseLayout', {
    template: `
    <div>
        <header><slot name="header"></slot></header>
        <main><slot></slot></main>
        <footer><slot name="footer"></slot></footer>
    </div>
    `
});

v-pre

  • 使用法: <div v-pre>{{ message }}</div>
  • 説明: この要素とそのすべての子要素のコンパイル処理をスキップし、元の Mustache タグを表示して、Vue がコンテンツをコンパイルするのを防ぎます。

例

<div v-pre>{{ message }}</div>

例

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-cloak

  • 使用法: [v-cloak] { display: none; }
  • 説明: Vue インスタンスのコンパイルが完了する前にテンプレートコンテンツを非表示にし、未コンパイルの Mustache タグが表示されるのを防ぎます。

例

<div v-cloak>{{ message }}</div>

例

[v-cloak] { display: none; }

例

data() {
    return {
    message: 'Hello, Vue!'
    };
}

v-once

  • 使用法: <p v-once>{{ message }}</p>
  • 説明: 要素とコンポーネントを一度だけレンダリングし、その後のデータ変更に応じて更新されることはありません。静的コンテンツや、あまり更新されないコンテンツに使用します。

例

<p v-once>{{ message }}</p>

例

data() {
    return {
    message: 'Hello, Vue!'
    };
}
その他の拡張