今回で３回目となりますが、Vue.jsの双方向バインディングを試してみましょう。
まずは、動作検証用のサイトを開きます。
分からない場合は、前回の jsfiddle.net を使っている部分を参照して下さい。
■「双方向バインディング」とは？
簡単に説明すると、スクリプト側から値の設定とブラウザからの入力のどちらから行っても双方向で値を更新できる仕組みのこと。
ブラウザから入力 <==> 変数 a <==> JavaScriptから更新
変数 a の値を JavaScriptから 'ほげほげ' と変更すると画面にも 'ほげほげ' が表示され、
画面から値を入力すると 変数 a にも 'ほげほげ' が設定されます。
■何が便利なの？
Vue.jsの双方向バインディングを使用しない場合、
①画面で入力した内容の変更イベント（onChange）でイベントを受け取り、html上のDOM操作を使ってテキストボックスから値を取得し、
変数 a に値を設定する
②変数 a に値を設定したら、html上のDOM操作を使ってテキストボックスへ値を設定する
というような作りこみが必要となりますが、Vue.jsを使う場合、
<input v-model="変数名">
v-modelという属性を使うことで簡単に変数（モデル）と画面の紐づけが可能となります。
では、実際に例を書いてみます。
以下のコードを前回と同じようにjsfiddleへ張り付けていってください。
[htmlコード記述]部分に以下のコードを張り付けます。
======================================
<div id="disp-6">
<p>{{ message }}</p>
<input v-model="message">
<button v-on:click="clickButton">PUSH!!!</button>
</div>
======================================
[JavaScriptコード記述]部分に以下のコードを張り付けます。
======================================
var vue6 = new Vue({
el: '#disp-6',
data: {
message: '初期表示'
},
methods : {
// PUSH!!ボタンのイベント
clickButton: function() {
this.message = 'ボタン押下しました'
}
}
})
======================================
[処理結果を表示]部分に以下のような結果が表示されます。
変数messageの値がラベルに '初期表示'
また、テキストボックスにも '初期表示'
と表示されてます。
ここでテキストボックスの値を書き換えてみると
ラベルにもリアルタイムで書き換わります。※ラベルには変数messageをそのまま表示されています。
今度は、PUSH!!!を押下して、直接変数messageの値を書き換えてみると、
テキストボックスにもリアルタイムで書き換わります。
これで、双方向バインディングの動きが分かったと思います。
ところで、現在フォアフロンティアでは、求人募集 （2017/11/10～2017/12/07）を行っております。
・Java、PHP、Swift等を使って実際にプログラミングをしたいという方。
・独学をしているけど、実際に仕事で使ってみたいという方。
・古い技術ばかり使っていて将来に不安を感じている方。
は、ぜひ応募してみ下さい！
※未経験の方は、自社の研修システムと研修後も先輩社員がマンツーマンでサポートしますのでご安心下さい。