Vue.jsでwebアプリを作ろう#03(入力フィールド)

データと要素の値をバインディングする

これから入力フィールドを作って、入力した値がタイトルやタスクリストに反映されるUIを作っていきます。

これを双方向にデータバインディングするという意味になります。データバインディングというのは data と UI を結び付けるという意味で、双方向というのは data が更新されると UI の値が更新されて、 UI を更新すれば data が更新されるという意味になります。

前項でdataを保持する変数を設定して、その値を名前のタイトルに表示させました。今度は、フォームに入力した値をタイトルに反映させるものを作っていきます。

前項：Vue.jsでwebアプリを作ろう#02(準備編)
https://note.com/hamasan918/n/nf2568cfaca38

まずは、フォームの入力欄を作ります。前項のnameの見出しの下にフォーム入力欄を作ります。

<div id="app">
	<h2>{{ name }}</h2>
    ＜p><input type="text" v-model="name"></p>       
</div>

inputタグにv-modelという値にname という変数を与えます。このv-modelの値をnameとすることで、入力した値が、h2の値nameという変数に値を渡してくれる役割になっています。

※前項で下記のようにdataの初期値をHamasanとしていたので、そのnameの値が入力欄の初期値になります。

<script>
		var app = new Vue({
	        el: '#app',
	        data: {
	            name: 'Hamasan'
	        }
   	}) ;
</script>

表示を確認してみます。

入力欄に名前を入力すると見出しの名前も変わります。

v-modelを使って、入力フィールドとタイトルを双方向にバインディングしていきました。

次回からTodoリストを作っていこうかと思います。