はじめに
この記事では、「v-modelディレクティブ」と「v-bindディレクティブ」の違いについて説明しています。
v-modelディレクティブとは？
v-modelディレクティブは、フォーム要素の値とプロパティ間でデータバインディングを有効化するディレクティブです。つまり、フォーム要素が変更されるとその値がプロパティ要素に反映され、逆に、プロパティ要素が変更されるとその値がフォーム要素に反映されるようになります。
v-modelディレクティブは次のように使用します。
<input v-model="プロパティ名">
また、こうしたデータバインディングの機能を「双方向データバインディング」と呼びます。
双方向データバインディング
双方向バインディングは、単方向のデータバインディングの組み合わせ（v-onディレクティブとv-bindディレクティブ）で成り立っています。このことを図を使ってわかりやすく説明したものが次のものです。
まとめ
v-modelディレクティブでは双方向（フォーム要素⇄プロパティ）で、v-bindディレクティブでは単方向（プロパティ→フォーム要素）で同期することができるといった違いがあります。