はじめに

この記事では、「v-modelディレクティブ」と「v-bindディレクティブ」の違いについて説明しています。

v-modelディレクティブとは？

v-modelディレクティブは、フォーム要素の値とプロパティ間でデータバインディングを有効化するディレクティブです。つまり、フォーム要素が変更されるとその値がプロパティ要素に反映され、逆に、プロパティ要素が変更されるとその値がフォーム要素に反映されるようになります。

v-modelディレクティブは次のように使用します。
<input v-model="プロパティ名">

また、こうしたデータバインディングの機能を「双方向データバインディング」と呼びます。

双方向バインディングは、単方向のデータバインディングの組み合わせ（v-onディレクティブとv-bindディレクティブ）で成り立っています。このことを図を使ってわかりやすく説明したものが次のものです。

v-modelディレクティブでは双方向（フォーム要素⇄プロパティ）で、v-bindディレクティブでは単方向（プロパティ→フォーム要素）で同期することができるといった違いがあります。