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