v-modelとは？v-on・v-bindとの違いと使い方
1100 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
v-modelディレクティブの使い方をすぐ忘れる自分への備忘です。
v-bindディレクティブとv-onディレクティブを合わせた物ですが違いを見るためにv-onディレクティブとv-bindディレクティブの解説をまずします。
v-bindディレクティブ
コードを↓にします。
これで↓と表示されます。
v-bindディレクティブは17行目の「content:”〜”」の〜が9行目のcontentに入り17行目のcontent:”〜”の〜から一方的に9行目のcontentを決定します。
「17行目のcontent」→「9行目のcontent」の流れです。
次はv-onディクティブです。
v-onディレクティブ
コードを↓にします。
これで↓になります。
9行目の「vOn」の中身を22行目〜24行目で決めていますがinputタグの中に文字を書くことで9行目のvOnが作動してinputタグの中に書いた内容が10行目の「text」に表示されます。
このようにv-onディレクティブは9行目の「vOn」→23行目の「this.text = e.target.value」の一方通行です。
次はv-modelディレクティブです。
v-modelディレクティブ
コードを↓にします。
これで↓になります。
v-onディレクティブの時と似ていると思いますが少し違います。
v-onディレクティブの時はinputタグの中に文字を書いていくと{{text}}の中に書いた文字が表示されていきました（vOn→text）が今回はinputタグの中の文字が最初から{{vModel}}に表示されています。
つまりinputタグの中の文字が最初から{{vModel}}に表示されるので「19行目のvModel」→「9行目のvModel」（v-bindディレクティブ）ができてinputタグの中の文字を変えると{{vModel}}の中の文字も変わるので「9行目のvModel」→「19行目のvModel」（v-onディレクティブ）ができるのでv-modelディレクティブはv-onディレクティブとv-bindディレクティブを合わせたものということができます。
だからv-modelディレクティブはv-onディレクティブ+v-bindディレクティブと認識しましょう。
やってはいけない書き方
v-modelディレクティブはv-onディレクティブとv-bindディレクティブを併せた物なので↓の書き方でも動きますが意味がないです。
こんな時はv-modelがあるのでそれを使いましょう。