Vue 3 テンプレート構文の基本｜{{ }}・v-bind・v-onの書き方

Vue 3 テンプレート構文の基本とは

Vue のテンプレート構文は、HTML に「ここにデータを入れる」「この属性はデータで決める」「クリックされたらこの処理」という印を書き込むための書き方です。公式ドキュメントでは、Vue は HTML ベースのテンプレート構文を使い、描画される DOM（画面の部品）をデータと宣言的に結びつけると説明しています。

この記事では、最初に覚える3つ、{{ }}（テキストの表示）、v-bind（属性に結ぶ）、v-on（出来事を受け取る） と、その省略形を、実際に動かした例で説明します。条件（v-if）・繰り返し（v-for）・入力（v-model）は、それぞれの記事で扱います。

基本（3つの書き方と省略形）

書き方 役割 省略形 例
{{ 式 }} データを文字として表示 なし {{ message }}
v-bind:属性="式" 属性の値をデータで決める :属性 :href="url"
v-on:出来事="処理" クリックなどを受け取る @出来事 @click="toggle"

{{ }}（二重中かっこ。「マスタッシュ」とも呼ばれます）の中には、データの名前だけでなく、message.toUpperCase() や isActive ? 'ON' : 'OFF' のような JavaScript の式を1つ書けます。ただし、if 文のような「文」は書けません。

{{ }} は属性の中では使えません。属性をデータで決めたいときは、v-bind（省略形は :）を使います。

サンプルコード（実行結果つき）

<div id="app">
  <p :class="{ active: isActive }">{{ isActive ? 'ON' : 'OFF' }}</p>
  <button @click="toggle">切り替え</button>
  <p>{{ message.toUpperCase() }}</p>
  <img :src="imageUrl" :alt="imageAlt" width="40" height="40">
  <form @submit.prevent="send">
    <input v-model.trim="word">
    <button type="submit">送信</button>
  </form>
  <p>送信した言葉：{{ sent }}</p>
</div>

const { createApp, ref } = Vue
createApp({
  setup() {
    const isActive = ref(false)
    const message = ref('hello vue')
    const imageUrl = ref('https://ja.vuejs.org/logo.svg')
    const imageAlt = ref('Vue のロゴ')
    const word = ref('')
    const sent = ref('')
    function toggle() {
      isActive.value = !isActive.value
    }
    function send() {
      sent.value = word.value
    }
    return { isActive, message, imageUrl, imageAlt, word, sent, toggle, send }
  }
}).mount('#app')

（Vue は <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> で読み込んでいます。）

動作確認（検証環境と結果）

  • Vue 3.5.43（CDN のグローバルビルド）、Microsoft Edge（ヘッドレス）、2026年10月。
  • 最初は「OFF」「HELLO VUE」と表示され、1行目の <p> に class は付いていませんでした。
  • 「切り替え」を押すと「ON」になり、<p> に class="active" が付きました。
  • 画像の src は https://ja.vuejs.org/logo.svg、alt は「Vue のロゴ」になりました。
  • 入力欄に「　やあ　」（前後に空白）と入れて送信すると、ページは再読み込みされず、「送信した言葉：やあ」と前後の空白を取り除いて表示されました。

Vue 3 テンプレート構文の基本の注意点

  • :class のオブジェクト記法： { active: isActive } は「isActive が正しいときだけ active を付ける」という意味です。もともとの class="…" と一緒に書くこともできます。
  • @submit.prevent： .prevent は、フォーム送信の本来の動き（ページの再読み込み）を止める修飾子です。公式ドキュメントでは、イベント修飾子として .stop・.prevent などが紹介されています。
  • @click="toggle" と @click="toggle()"： どちらも動きます。引数を渡したいときは @click="remove(item.id)" のように書きます。
  • テンプレートの中の式は短く保ちます。長い計算は computed に移すと読みやすくなります。

Vue 3 テンプレート構文の基本でよくあるミス

  • <a href="{{ url }}"> と書いてしまう（属性の中に {{ }} は使えません）。
  • : を付け忘れて href="url" と書き、文字の「url」がそのまま入る。
  • @click に count++ 以外の長い処理を直接書き、読みにくくなる。

Vue 3 テンプレート構文の基本のチェックリスト

  • [ ] 文字の表示は {{ }}、属性は :属性 で書いた
  • [ ] 出来事は @出来事="関数名" で受け取った
  • [ ] フォームの送信には .prevent を付けた
  • [ ] 長い式は computed に移した

Vue 3 テンプレート構文の基本のFAQ（よくある質問）

Q. v-bind と省略形の : は、どちらで書けばいいですか？

A. 動きは同じです。プロジェクトの中でどちらかにそろえます。省略形が使われることが多いです。

Q. {{ }} の中で HTML のタグを表示したいです。

A. {{ }} は文字としてそのまま表示します。HTML として表示する v-html もありますが、公式は信頼できない内容に使うと危険だと注意しています。利用者が入力した内容には使いません。

Q. 1つの要素に複数の class を条件で付けられますか？

A. :class="{ active: isActive, error: hasError }" のように、オブジェクトに並べて書けます。

筆者の見解（Vue 3 テンプレート構文の基本）

テンプレート構文は、覚える記号が少ないのが Vue の良い所だと感じます。私は、最初は {{ }}・:・@ の3つだけで小さな画面を作り、「データを変えれば表示が変わる」体験を重ねることを勧めます。修飾子や細かな記法は、必要になった場面で公式ドキュメントを引けば十分だと考えます。

Vue 3 テンプレート構文の基本の関連項目

  • Vue 3 CDNで使う方法｜ビルドなしでHTMLに読み込む手順（近日公開）
  • Vue 3 v-ifとv-showの違い｜使い分けと表示切り替え（近日公開）
  • Vue 3 v-forとkeyの使い方｜indexをkeyにしてはいけない理由（近日公開）
  • Vue 3 v-modelの使い方｜フォーム入力と修飾子（.number .trim .lazy）（近日公開）
  • Vue 3 コンポーネントの基本｜作り方・登録・slotの使い方

出典（一次情報）

タイトルとURLをコピーしました