こんにちは。Aintek の川井です。

Vue.jsの公式ページ（ https://jp.vuejs.org/v2/guide/forms.html ）見ても、あまりピンと来ない表現に悩まされております・・・

今回は、Vue.jsの フォーム入力バインディング について書いてみます。
ただのメモですので、悪しからず。

まずはチェックボックスを書いてみる

公式ページの基本的な使い方には、
コンポーネントの data オプションの中で JavaScript 側で初期値を宣言する必要があります。
とだけ書いてあり、どんな風に書けば良いのか（初心者には）わかりませんでした。

具体的には、以下のコードを書けば良いようです。
まずは、テンプレートの部分です。

<div id="example">
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
</div>

次に、 Vueインスタンスの部分です。

new Vue({
  el: '#example',
  data: {
    checked: false
  },
})

公式ページで言っていたdataとはこの部分でした。
「Vueインスタンスに、dataオプションを指定し、初期値を予め設定する必要がある」と言っていたわけです。

まとめ

今回は、チェックボックスの書き方をメモしました。
同じ要領で、テキストボックスやラジオボタンが利用できるかと思います。