了解しました！

ここでは「第4章：テンプレート構文の基礎」より、Vueの代表的なディレクティブについて、具体的なコードを使いながら一行ずつ丁寧に解説します。

✅ 対象ディレクティブ

以下の5つの基本ディレクティブを扱います。

1. v-bind（属性バインディング）
2. v-if（条件表示）
3. v-for（リスト表示）
4. v-model（フォームとの双方向バインディング）
5. v-on（イベントハンドリング）

📄 ファイル名：DirectivesExample.vue

Vue 2.7 / TypeScript / <script setup> 構文使用

<template>
  <!-- v-bind: 属性バインディング -->
  <img :src="imageUrl" alt="サンプル画像" />

  <!-- v-if: 条件分岐で表示切り替え -->
  <p v-if="isLoggedIn">ログイン済みです</p>
  <p v-else>ログインしてください</p>

  <!-- v-for: 配列をループして表示 -->
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </li>
  </ul>

  <!-- v-model: 入力値とデータの双方向バインディング -->
  <input v-model="name" placeholder="名前を入力してください" />
  <p>こんにちは、{{ name }}さん！</p>

  <!-- v-on: イベントバインディング -->
  <button @click="increment">カウント: {{ count }}</button>
</template>

<script lang="ts" setup>
// 画像URLを定義（v-bindで使用）
const imageUrl = '<https://via.placeholder.com/150>';

// ログイン状態の真偽値（v-ifで使用）
const isLoggedIn = true;

// 配列データ（v-forで使用）
const items = ['りんご', 'バナナ', 'みかん'];

// 名前の入力用データ（v-modelで使用）
import { ref } from 'vue';
const name = ref('');

// カウント変数と加算関数（v-onで使用）
const count = ref(0);
const increment = () => {
  count.value++;
};
</script>

🧩 一行ずつの解説

v-bind（:src の省略記法）

<img :src="imageUrl" alt="サンプル画像" />

src属性に変数imageUrlの値をバインド。画像のURLが動的に変更できます。:srcはv-bind:srcの省略。