山崎屋の技術メモ

IT業界で働く中でテクノロジーを愛するSIerのシステムエンジニア👨‍💻 | AndroidとWebアプリの二刀流🧙‍♂️ | コードの裏にあるストーリーを綴るブログ執筆者✍️ | 日々進化するデジタル世界で学び続ける探究者🚀 | #TechLover #CodeArtisan、気になること、メモしておきたいことを書いていきます。

【Vue】v-bind と v-model の違い

javascript vue.js

f:id:yyama1556:20181106192106j:plain

Vue.js の勉強を始めました。

基本中の基本ともいえる v-bind と v-model ディレクティブについて、その機能の違いについてメモしておきます。

ざっくり

v-bind は Model の値を HTML コンポーネントに反映（出力）します。HTML コンポーネントの値が変わっても、Model の値は変わりません。Model から HTML への一方通行です。

一方、v-model は Model と View（HTML）の双方向に影響します。 HTML コンポーネントの値に変更があった場合、自動で Model の値を更新します。

サンプル

まずはサンプルです。

HTML

<!DOCTYPE>
<html>
<head>
    <meta charset="utf-8">
</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>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="main.js"></script>
</body>
</html>

そして JavaScript。

var app = new Vue({
    el: '#app',
    data: {
        data1: "data1",
        data2: "data2"
    }
})

ブラウザに表示したときの初期表示はこうなります。
f:id:yyama1556:20180909095547p:plain

上下それぞれのテキストボックスの値を変えてみましょう。

v-bind でバインディングしたコンポーネントの値を変更しても、Model の値が変更されていないことが確認できます。

一方、v-model のほうは入力と同時に Model の値が変更され、再描画されています。

f:id:yyama1556:20180909095944p:plain

そして、v-bind のテキストボックスは何かのタイミングで "data1" という変更前の値に戻ってしまいます。
　
　

v-model は v-bind と v-on で書き換えられる

javascript - Vue.js—Difference between v-model and v-bind - Stack Overflow

英語のStack over flow でこの件が説明されており、v-model は v-bind と v-on:input で次のように書き換えられるそうです。

v-model を使うとき。

<input v-model="something">

v-bind と v-on で書き換えたとき。

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

　
　

まとめ

Model の値を表示したいだけなら v-bind。ユーザ入力を即座に Model に反映したいなら v-model を使いましょう。

自分でも勉強しながら Todo アプリ作成のチュートリアルを作成しました。よかったら学習に使ってください。
www.shookuro.com


それでは。

↓↓↓ Kindle 版を買いました。鋭意勉強中！

基礎から学ぶ Vue.js

基礎から学ぶ Vue.js