v-modelとは？v-on・v-bindとの違いと使い方
2065 回閲覧されました
みなさんこんにちは、jonioです。
今回はv-modelディレクティブの使い方をすぐ忘れる自分へのアウトプットの記事です。
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があるのでそれを使いましょう。