【Vue.js】v-modelとは何か？使い方を紹介

Vueをはじめたばかりだとわからなくなることも多くなると思います。

今回は、Vueでよく使われるv-modelについて紹介していきたいと思います。

v-modelとは何か？

v-modelとは双方向データバインディングとも呼ばれ簡単に説明するとフォームの値を簡単に連動させることが出来ます。

v-bindとも比較されますがv-bindはv-modeからHTMLへの一方方向になりますがv-modelは双方向になるという点が違います。

たとえばVue（DOM）で変更があったときにその値をVueインスタンスのデータとして変更することが可能です。

v-modelのサンプル

html

<div id="app">
        <input type="text" v-model="textbox">
        <p>テキストボックスの値は「{{ textbox }}」です。</p>
        <button value="テキストを変更しました" @click="textbox ='テキストを変更しました'">テキストを変更するボタン</button>
</div>

vue.js

new Vue({
  el: '#app',
  data: {
    textbox: 'テキスト',
  }
});

サンプル

Vue.jsの勉強におすすめしたい本

Vue.jsの勉強におすすめしたい本

とにかく短い期間でVue.jsの基礎だけを覚えてしまいたい人におすすめの入門書です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsを初心者レベルから実践まで徹底的にわかりやすく解説されている本です。

vueの書き方から適用例まで詳しく書かれているのでvue.jsを覚えたい人におすすめです。

僕もこの本をいまでも使っていますしVue.jsをはじめたときにこの本で勉強しました。