Interpolationとディレクティブ
テンプレートでmustache補間とコアディレクティブを使います
「Interpolationとディレクティブ」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全3レッスンが含まれています。
テンプレート構文の概要
Vueのテンプレートは、特別な構文で拡張された有効なHTMLです。
- テキストにはマスタッシュ補間を使用します
- 動作にはディレクティブ（v-プレフィックス付き属性）を使用します
Vueはこれらを効率的なレンダー関数にコンパイルします。
マスタッシュ補間
二重の波かっこ、つまりマスタッシュ構文を使うと、テキストを出力できます。
中身には単なる変数名ではなく、JavaScript式を記述します。
<span>Hello, {{ userName }}</span>
<span>{{ price * quantity }}</span>
<span>{{ isActive ? "On" : "Off" }}</span>属性のv-bind
マスタッシュはHTML属性の中では使えません。v-bindを使って属性にデータをバインドします。
<a v-bind:href="profileUrl">Profile</a>
<img v-bind:src="imagePath" v-bind:alt="caption" />
<button v-bind:disabled="isLoading">Submit</button>v-bindの省略記法
v-bindは非常によく使うため、省略記法としてコロンだけで記述できます。
<!-- Full syntax -->
<a v-bind:href="url">Link</a>
<!-- Shorthand -->
<a :href="url">Link</a>イベントのv-on
v-onディレクティブはDOMイベントを監視し、ハンドラーを実行します。
<button v-on:click="handleClick">Click me</button>
<input v-on:input="onType" />
<form v-on:submit="onSubmit">...</form>v-onの省略記法
v-onにも省略記法があり、アットマークで記述できます。
<!-- Full syntax -->
<button v-on:click="save">Save</button>
<!-- Shorthand -->
<button @click="save">Save</button>インラインハンドラーとメソッドハンドラー
イベントハンドラーは、インライン式またはメソッド名で指定できます。
<!-- Inline expression -->
<button @click="count++">Add</button>
<!-- Method handler -->
<button @click="increment">Add</button>
<!-- Inline with the event object -->
<button @click="log($event)">Log</button>v-text
v-textディレクティブは、要素のテキストコンテンツを設定します。マスタッシュと同等の機能です。
<!-- These two are equivalent -->
<span v-text="message"></span>
<span>{{ message }}</span>v-html
v-htmlディレクティブは、文字列をエスケープされていない実際のHTMLとしてレンダリングします。
<div v-html="rawHtml"></div>
<!-- If rawHtml = "<b>Bold</b>",
it renders actual bold text -->v-htmlとXSSへの注意
警告：信頼できないコンテンツに対してv-htmlを使うのは危険です。
- 悪意のあるスクリプトを挿入される可能性があります（XSS攻撃）
- 完全に信頼できるコンテンツにのみ使用してください
- ユーザーが送信したHTMLを直接レンダリングしないでください
通常のテキストには、HTMLをエスケープするマスタッシュ補間を必ず使用してください。
ディレクティブの引数
一部のディレクティブでは、コロンの後に、対象の属性やイベントなどを指定する引数を記述します。
<!-- argument is the attribute name -->
<a :href="url">Link</a>
<!-- argument is the event name -->
<button @click="run">Run</button>
<!-- dynamic argument -->
<a :[attrName]="value">Dynamic</a>理解度チェック
補間とディレクティブについての理解度を確認しましょう。
まとめ：補間とディレクティブ
Vueのテンプレートの基本を学びました。
- {{ }}のマスタッシュでテキスト式を出力します
- v-bind（省略記法：:）で属性をバインドします
- v-on（省略記法：@）でイベントを処理します
- v-textでテキストコンテンツを設定します
- v-htmlで生のHTMLをレンダリングします（XSSのリスクがあるため注意が必要です）
次は、条件分岐とループについて学びます。
よくある質問
「Interpolationとディレクティブ」レッスンは無料ですか？
はい。「Interpolationとディレクティブ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全3レッスンが含まれています。
「Interpolationとディレクティブ」で何を学びますか？
テンプレートでmustache補間とコアディレクティブを使います ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。
「Interpolationとディレクティブ」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Interpolationとディレクティブ
- 条件分岐とループ
- 属性とクラスのバインディング