【Vue.js】ディレクティブ　チートシート #Vue.js

1. v-bind

動的に属性やプロパティをバインドする

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

2. v-on

イベントリスナーをアタッチする

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

3. v-model

双方向データバインディングを実現する

<input v-model="username">
<select v-model="selectedOption">
  <option v-for="option in options" :value="option.value">{{ option.text }}</option>
</select>

4. v-if / v-else-if / v-else

条件付きレンダリング

<div v-if="condition">表示されます</div>
<div v-else-if="anotherCondition">それ以外の場合に表示されます</div>
<div v-else>どちらの条件も満たさない場合に表示されます</div>

5. v-for

リストレンダリング

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

6. v-show

条件によって要素の表示・非表示を切り替える（v-ifと異なり、要素はDOMに残る）
```
<div v-show="isVisible">表示・非表示が切り替わります</div>
```

7. v-text

テキストコンテンツを更新する（マスタッシュ構文と同様の効果）
```
<span v-text="message"></span>
```

8. v-html

HTMLコンテンツを描画する（セキュリティ上のリスクがあるため、信頼できるソースからのみ使用すること）
```
<div v-html="htmlContent"></div>
```

9. v-once

一度だけ描画する（その後のデータ変更が反映されない）
```
<span v-once>{{ message }}</span>
```

10. v-pre

コンパイルをスキップする（生のテンプレートの内容を表示する）
```
<span v-pre>{{ message }}</span>
```

11. v-cloak

Vueインスタンスがマウントされるまでの間、要素を非表示にする

<style>
  [v-cloak] { display: none; }
</style>
<div v-cloak>{{ message }}</div>

12. v-slot

スロットに名前を付けるためのディレクティブ

    <!-- 子コンポーネント -->
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
    
    <!-- 親コンポーネント -->
    <child-component>
      <template v-slot:header>
        <h1>ヘッダー</h1>
      </template>
      
      <p>デフォルトスロットの内容</p>
      
      <template v-slot:footer>
        <footer>フッター</footer>
      </template>
    </child-component>

13. v-scroll

スクロールイベントをハンドリングする（公式ではなく、カスタムディレクティブとして実装することが一般的）

<div v-scroll="onScroll">スクロールイベントを取得します</div>

14. v-focus

オートフォーカスを実装する（公式ではなく、カスタムディレクティブとして実装することが一般的）

<input v-focus>

15. v-lazy

画像の遅延読み込みを実現する（公式ではなく、カスタムディレクティブやサードパーティ製のプラグインとして実装されることが一般的）

<img v-lazy="imageSource">

【Vue.js】ディレクティブ チートシート

目次

1. v-bind

2. v-on

3. v-model

4. v-if / v-else-if / v-else

5. v-for

6. v-show

7. v-text

8. v-html

9. v-once

10. v-pre

11. v-cloak

12. v-slot

13. v-scroll

14. v-focus

15. v-lazy

【Vue.js】ディレクティブ　チートシート