Vue — v-bind 詳細
テクノロジ系 ／ L01 template-syntax — テンプレート構文
Vue — v-bind 詳細
基本 (再掲)
<img :src="imageUrl" :alt="imageAlt" /> <a :href="url">Link</a> <input :value="text" :disabled="isDisabled" />
:属性名="JS式" で動的に。
複数属性をまとめて
<script setup>
const attrs = {
id: "user-1",
class: "card",
"data-role": "admin",
};
</script>
<template>
<div v-bind="attrs">...</div>
</template>v-bind="object" で オブジェクトの各キーを属性として展開。
ラッパーコンポーネントで透過するときに便利。
Boolean 属性
<template>
<button :disabled="isLoading">Save</button>
<!-- isLoading が true → disabled が付く
false → disabled 属性なし -->
<input :readonly="isReadonly" />
</template>disabled / readonly / required / checked / selected などは
boolean で扱われる (HTML仕様)。
.prop modifier
<!-- 属性ではなく DOM プロパティに設定 --> <input :value.prop="value" /> <!-- 普通の :value (属性) は初期値、value プロパティ (DOM) は現在値 -->
input の初期値と現在値の違いを意識するときに。
普段は意識しなくてよい。
カスタムコンポーネントへの渡し
<UserCard :user="currentUser" :show-actions="true" />
子コンポーネント側で defineProps (L02 ch01) で受け取る。
kebab-case → camelCase に変換される (show-actions → showActions)。
短縮記法 まとめ
| 完全形 | 短縮 |
|---|---|
v-bind:src="..." | :src="..." |
v-on:click="..." | @click="..." |
v-slot:default | #default |
: と @ は 絶対覚える。実コードでは短縮形が圧倒的多数。
まとめ
- 属性:
:src="..."短縮形を使う - Boolean 属性は true で付く / false で消える
v-bind="object"で複数属性まとめ展開- 短縮:
:(bind) /@(on) /#(slot)
次は v-on でイベント。
考えてみよう
既定では正解・不正解の判定はしません。自分のペースで「答えを見る」を。採点してほしい場合だけ「採点してほしい」を押してください。
Lv1: 基本 — 属性バインディング
問題
<script setup>
const imageUrl = ref("https://placehold.jp/300x200.png");
const isDisabled = ref(false);
const userId = ref(1);
</script>
<template>
<img :src="imageUrl" :alt="`User ${userId}`" />
<a :href="`/users/${userId}`">User {{ userId }}</a>
<button :disabled="isDisabled">Click</button>
<button @click="isDisabled = !isDisabled">Toggle disabled</button>
</template>合格基準
- 4要素とも動的バインディング
- toggle ボタンで disabled が切り替わる
Lv2: 応用 — v-bind="object" で複数属性
問題
<script setup>
const props = {
type: "email",
required: true,
placeholder: "email@example.com",
maxlength: 100,
};
</script>
<template>
<input v-bind="props" />
</template>DevTools で input の属性が全部反映されていることを確認。
合格基準
- 4属性が全部 input に
- shorthand
v-bind="object"を理解
Lv3: 発展 — Boolean 属性の挙動
問題
<script setup> const isReadonly = ref(true); const isHidden = ref(false); </script> <template> <input :readonly="isReadonly" /> <div :hidden="isHidden">hidden test</div> <button @click="isReadonly = !isReadonly">Toggle readonly</button> </template>
DevTools で:
isReadonly = true→<input readonly>isReadonly = false→<input>(readonly 属性自体が消える)
を観察。
合格基準
- boolean 属性の真偽で 属性自体が出現/消失 することを確認
提出
submission.md に3問の回答を。