Vue テンプレートで頻繁に使うディレクティブを学びましょう。これらは HTML 要素に特別な機能を追加します。
Vue ディレクティブ 基本要素 一覧
| ディレクティブ | 略記 | 説明 | 例 |
|---|---|---|---|
v-bind |
: |
HTML 属性にデータをバインドする | <img :src="imageUrl"> |
v-model |
なし | フォーム要素とデータを双方向バインド | <input v-model="userName"> |
v-on |
@ |
イベントを監視し、処理を実行 | <button @click="handleClick"> |
v-if |
なし | 条件で要素の表示/非表示を切り替え (DOM 削除) | <p v-if="showMessage"> |
v-show |
なし | 条件で要素の表示/非表示を切り替え (CSS display: none) |
<p v-show="showMessage"> |
v-for |
なし | リストの要素を繰り返し描画 | <li v-for="item in items" :key="item.id"> |
Vue ディレクティブ 基本要素 解説
v-bind
- HTML 属性にリアクティブなデータをバインドします。
- 略記:
: - 例:
src属性に画像の URL を、class属性に動的に変更したい CSS クラスをバインド。
<template>
<img :src="imageUrl" :alt="imageAlt" :class="{ 'active': isActive }">
</template>
<script setup>
import { ref } from 'vue'
const imageUrl = 'https://example.com/image.jpg'
const imageAlt = 'サンプル画像'
const isActive = ref(true)
</script>
v-model
- フォーム要素 (
<input>,<textarea>,<select>等) と JavaScript のデータを双方向にバインドします。入力内容が自動でデータに反映され、データが変更されると入力欄にも反映されます。
<template>
<input type="text" v-model="userName">
<p>入力された名前: {{ userName }}</p>
</template>
<script setup>
import { ref } from 'vue'
const userName = ref('')
</script>
v-on
- DOM イベント (クリック、入力など) を監視し、イベントが発生したときに JavaScript のメソッドを実行します。
- 略記:
@
<template>
<button @click="handleClick">クリックしてください</button>
</template>
<script setup>
const handleClick = () => {
alert('ボタンがクリックされました !')
}
</script>
v-if / v-else-if / v-else
- 条件に基づいて要素の 表示 / 非表示 を切り替えます。
falseの場合、要素は DOM から完全に削除されます。
<template>
<button @click="toggleMessage">メッセージ表示 / 非表示</button>
<p v-if="showMessage">こんにちは ! メッセージが表示されています。</p>
<p v-else>メッセージは非表示です。</p>
</template>
<script setup>
import { ref } from 'vue'
const showMessage = ref(true)
const toggleMessage = () => {
showMessage.value = !showMessage.value
}
</script>
v-show
v-ifと同様に要素の表示/非表示を切り替えますが、falseの場合でも要素は DOM に残ったまま、 CSS のdisplay: none;が適用されます。頻繁に切り替える場合はv-ifより効率的ですが、実際にはv-ifよりも用途が少ないかもしれません。
<template>
<p v-show="showMessage">これは v-show で表示されています。</p>
</template>
v-for
- 配列のデータに基づいて、要素を繰り返し描画します。
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index }}: {{ item }}
</li>
</ul>
</template>
<script setup>
import { ref } from 'vue'
const items = ref(['りんご', 'バナナ', 'みかん'])
</script>
key属性の重要性:v-forを使う際は、要素に:key属性を付ける ことが 非常に重要 です。keyは各要素を一意に識別するためのもので、要素の追加・削除・並び替えを効率的に行うために Vue が使用します。通常は、データの ID など、一意で安定した値を指定します。
これらのディレクティブを使いこなすことで、 Vue の強力なデータバインディングとリアクティブな UI 構築の恩恵を最大限に受けることができます。