はじめに

はじめまして、学生エンジニアの@huyunokiです。

今回は一見似ているけれど役割が全く違う v-bind と v-model の違いを明確にし、データとDOM（画面）を直感的に繋ぐVueの基本的な構造を一気に解説します。

1. コアとなるデータバインディングの理解

Vueの使いやすさの核心は、「データ」と「DOM」を自動で同期する「データバインディング」にあります。これを実現するのが v-bind と v-model です。

v-bind はデータを「コード (data) → 画面 (DOM)」の一方向で結びつけます。

役割	データの表示（属性への設定）
特徴	`data`の変更は画面に反映されるが、画面上のユーザー入力は `data` に戻らない（読む専用）。
構文	`v-bind:属性名="データ名"` (短縮形: `:属性名="データ名"`)
コード例	`<input type="text" v-bind:value="inputValBind"/>`
動作	`inputValBind` の初期値 (`'入力してください(bind)'`) が表示される。ユーザーが入力しても `inputValBind` は変わらない。

テンプレート (<template>)

<input type="text" v-bind:value="inputValBind"/>

スクリプト (<script>)

data: function(){
  return {
    inputValBind:'入力してください(bind)',
  }
}

v-model はデータを「コード (data) ⇄ 画面 (DOM)」の双方向で結びつけます。

役割	フォーム要素とデータの同期
特徴	`data`の変更は画面に反映され、ユーザー入力も即座に `data` に反映される（読み書き可能）。
構文	`v-model="データ名"`
コード例	`<input type="text" v-model="inputValModel">`
動作	ユーザーが入力するたびに `inputValModel` が更新され、他の場所の表示も即座に変わる。

テンプレート (<template>)

<input type="text" v-model="inputValModel">

スクリプト (<script>)

data: function(){
  return {
    inputValModel:'入力してください(model)',
  }
}

v-bind: 値を表示したいとき（ボタンを無効化する:disabled、画像のURLを指定する:srcなど）。
v-model: ユーザーが入力した値をデータとして取得したいとき（<input>, <textarea>, <select>）。