v-modeを使った場合

v-modelを使う場合は以下。inputタグ内でv-modelをしているするだけ。


<body>
  <div id="app">
    v-model使う : {{ message }}
    <div>
      <input type="text" v-model="message">
    </div>

form の input 要素や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。それは、自動的に入力要素のタイプに基づいて要素を更新するための正しい方法を選択します。ちょっと魔法のようですが、v-model はユーザーの入力イベントにおいてデータを更新するための基本的な糖衣構文 (syntax sugar) で、それに加えて、いくつかのエッジケースに対しては特別な配慮をしてくれます。
https://jp.vuejs.org/v2/guide/forms.html

v-bindとv-onを使った場合

フォームに入力された時に( v-on:input ) フォームの値でmessage1を上書きする。( message1 = $event.target.value )

    v-on使う : {{message1}}
    <div>
      <input type="text" v-bind:value="message1" v-on:input="message1 = $event.target.value">
    </div>
  </div>


</body>

全文


<body>
  <div id="app">
    v-model使う : {{ message }}
    <div>
      <input type="text" v-model="message">
    </div>
    v-on使う : {{message1}}
    <div>
      <input type="text" v-bind:value="message1" v-on:input="message1 = $event.target.value">
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: "",
        message1: ""
      }
    })
  </script>
</body>