【Vue.js】v-modelを使った双方向データバインディングについて

v-model、双方向データバインディングについて少しだけまとめ。

データバインディングとは？

データを結びつけること

双方向とは？

vueの記述を変えると、HTML側も書き変わるような仕組み。

簡単なコード

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
<input type="text" v-model="message"> 
  <h1>{{message}}</h1>
</div>

new Vue({
    el: '#app',
  data: {
    message: 'がんばれ'
  }
})

これで下のような表示になるが、ここで文字を入力すると、リアルタイムでｈ１タグで囲んでいるmessageの文字も変わる。

これがv-model。