はじめに
はじめまして、学生エンジニアの@huyunokiです。
今回は一見似ているけれど役割が全く違う v-bind と v-model の違いを明確にし、データとDOM（画面）を直感的に繋ぐVueの基本的な構造を一気に解説します。
1. コアとなるデータバインディングの理解
Vueの使いやすさの核心は、「データ」と「DOM」を自動で同期する「データバインディング」にあります。これを実現するのが v-bind と v-model です。
1-1. v-bind: 一方向バインディング
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)',
}
}
1-2. v-model: 双方向バインディング
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>）。