Vue.jsメモ（文法編 その２）v-bind・b-model
こんにちは。文系学生エンジニアのLinです。
今回は、前回に引き続きVue.jsのチュートリアルを書いていこうと思います。
今回は、自分自身も理解に苦労した以下のテーマに絞って書きます。
・v-bindとv-model、その違い
これ、結構個人的に難しかったです。では、行きましょう。
v-bindとは？
model、つまりdata, methodsの内容をview、つまりHTMLに描画するためのディレクティブです。
modelの内容をただ表示するだけ（model→view）ですので、（view→model）方向のデータ通信はできません。これを、単方向バインディングと言います。
あとで、例を見てみましょう。
v-modelとは？
modelの内容をviewに描画する（model→view）ディレクティブですが、先ほどのv-bindとは違って（view→model）方向のデータ通信もできます。これを、双方向バインディングと言います。
さて、ここまでの説明ではよく分からないと思うので、実際のコードを見ていきましょう。
イメージ喚起
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Yes, Hello</title>
</head>
<body>
<div id="app">
v-bind: {{ data1 }}
<div><input type="text" v-bind:value="data1"></div>
<br><br>
v-model: {{ data2 }}
<div><input type="text" v-model="data2"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
data1: "data1",
data2: "data2"
}
})
</script>
</html>はい、今回のコードはこちらです。
これをブラウザで実行してみると、以下のような画面が出現するかと思います。
この画面が出れば、とりあえずここまではOKです。
さて、このdata1、data2それぞれの入力欄を、好きな言葉で書き換えてみましょう。
すると、v-bindの方の入力欄に入力してもv-bind: data1の文字に変化はないのに、v-modelの方の入力欄に入力すると、v-bind: data2の文字にリアルタイムで変更が反映されたことがお分かり頂けたでしょうか。
結構これ楽しいですよね（笑）
これは、何が起こっているのでしょうか。コードの解説です。
コードを見ていく
v-bind
v-bind: {{ data1 }}
<div><input type="text" v-bind:value="data1"></div>この行に注目してください。{{ data1 }}とありますが、これを
v-bind:value="data1"で指定することで、<script>タグ内のdata内に書いてあるdata1の値をブラウザに反映しています。
ここで注意なのが、v-bindは「modelの値をブラウザに反映するだけ」です。ブラウザで書き込んでも、書き換えたデータはmodelの方に飛んでいかないので、先ほど確認したように
この入力欄に何を書き込もうが「v-bind: data1」の文字は変わることはありません。
ちなみに、「v-bind:value」は「:value」と短く書けます。
ここまでが、v-bindです。
v-model
さて、v-modelはどうでしょうか。
v-model: {{ data2 }}
<div><input type="text" v-model="data2"></div>v-bindの時と同じように、{{ data2 }}とありますが、これを
v-model:value="data2"で指定することで、<script>タグ内のdata内に書いてあるdata2の値をブラウザに反映しています。
ただ、v-modelはviewからmodelに変更内容を送れるので、
入力欄に書き込んだ新しい言葉が、上のメッセージにちゃんと反映されます。
v-modelには省略記法みたいなのはないようです。
ここまでが、v-modelでした。
まとめ
v-bindはただ表示するだけ、v-modelは変更まで反映される、という違いでした。
違いが微妙にわかりにくいので、いろいろ試してみてください！
ありがとうございました！
この記事が気に入ったらサポートをしてみませんか？