双方向データバインドについて - Computer programming and health

Vue.jsにてv-modelディレクティブ、inputイベントハンドラを学ぶ。｜双方向データバインド

ここでは双方向データバインドについて説明しています。フォーム入力バインディングは、コンポーネントが持つデーターと、ユーザーがフォームコントロールから入力する内容を双方向にバインドする機能です。

書式：　<要素名　v-model=”プロパティ名”>

コンポーネント側であらかじめ今年の数値が入るように初期値を設定しています。

入力内容の変化　→　データーの更新　→　DOMに反映

HTML <div id=”app”>
<input type=”text” class=”red” v-model=”year”>
<p>{{year}}</p>
</div>

CSS .red {
color:red;
}

JavaScript var app = new Vue({
el: ‘#app’,
data: {
year: (new Date()).getFullYear()
}
});

通常、HTMLのフォームコントロールに初期値を設定するにはvalue属性、checked属性、selected属性を使いますが、v-modelを指定したフォームコントロールでは、それらの設定値が無視されます。バインドしているコンポーネントのデータが優先されるからです。そのためコンポーネント側のdataオプションで初期値を設定しておく必要があります。

入力内容をDOMにリアルタイムに反映する

半角入力モードのときには1文字ずつDOMに反映されますが、全角入力モードのときは、Enterで入力候補を確定するまでDOMに反映されません。

一文字ずつDOMに反映したいときは、v-modelに頼らずに、v-bindでデータバインドを行い、v-onでinputイベントをハンドリングする。

すなわち日本語入力をリアルタイムに反映するには、inputイベントハンドラを利用する。

HTML <div id=”app2″>
<input type=”text” v-on:input=”yearInputHandler” class=”red” v-bind:value=”year”>
<p>{{year}}</p>

CSS .red {
color:red;
}

JavaScript var app2 = new Vue({
el: ‘#app2’,
data: {
year: (new Date()).getFullYear()
},
methods: {
// 「年」のinputイベントハンドラ
yearInputHandler: function($event){
// 直接データーを更新する
　　　this.year = $event.target.value;
}
}
});

この本を参考に学び、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。