Vue.js Template Syntax - テンプレート構文

ロードマップ: Vue.js学習ロードマップ

What（何についてか）

Vueの <template> 内で使える構文。データを画面にどう表示し、どう紐付けるか。

Why（なぜ必要か）

テンプレートがVueコンポーネントの「見た目」を担当する。すべての表示・イベント・バインディングはここを通る。

How（どう動くか）

テキスト補間

<span>Message: {{ msg }}</span>

msg の値が変わると自動で表示も変わる。

Raw HTML

<p><span v-html="rawHtml"></span></p>

{{ }} はテキストとして出力（エスケープされる）。HTMLとして出力したい時は v-html。

⚠️ XSSの危険があるため、ユーザー入力には絶対使わない。

属性バインディング

<!-- 基本 -->
<div v-bind:id="dynamicId"></div>
 
<!-- 省略記法（主流） -->
<div :id="dynamicId"></div>
 
<!-- 同名省略（3.4+） -->
<div :id></div>  <!-- :id="id" と同じ -->
 
<!-- Boolean属性 -->
<button :disabled="isButtonDisabled">Button</button>
 
<!-- 複数属性を一括 -->
<div v-bind="objectOfAttrs"></div>

{{ }} はHTML属性の中に書けない。属性には v-bind（:）を使う。

JavaScript式

テンプレート内でJS式が使える：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>

• 式のみOK（return の後に置けるもの）
• 文はNG（var a = 1 や if 文はダメ）
• 関数呼び出しOK（副作用はNG）

ディレクティブ

v- プレフィックスの特別な属性。式の値に応じてDOMを更新する。

v-on:submit.prevent="onSubmit"
 │    │      │        │
 │    │      │        └─ 式（値）
 │    │      └─ 修飾子
 │      └─ 引数
 └─ ディレクティブ名

ディレクティブ	省略	用途
v-bind:attr	:attr	属性のバインディング
v-on:event	@event	イベントリスナー
v-if	なし	条件付き表示（DOMから消える）
v-html	なし	HTMLとして出力

動的引数：:[attributeName]="url" — 引数を変数で指定可能

修飾子：.prevent = event.preventDefault() を自動呼び出し

Key Concepts

用語	説明
Mustache構文	{{ }} でデータをテキスト表示
v-html	HTMLとして出力（XSS注意）
v-bind（:）	HTML属性にデータを紐付け
ディレクティブ	v- プレフィックスの特別な属性
修飾子	. で繋ぐ、ディレクティブの動作を微調整
動的引数	[] で引数を変数で指定