こちらが前回の例
ですが1つ書き忘れていたことがありました。
ラベルの表示内容はオブジェクト { name: ” } の name の変化に反応して変わるわけですが、
このオブジェクトのプロパティ name の値もまた、input タグの入力内容に**反応して**自動的に内容が書き換わります。
つまり、
input タグに入力する
→ それに反応してオブジェクトのnameが書き換わる
→ それに反応してラベルの表示内容が書き換わる
というわけです。
Vue.js では、この動作についての**処理**を書く必要はありません。処理を書くのではなく、v-model 属性や {{ name }} のような Vue.js 固有の書き方(しかしトランスパイラ等を必要としません！)でこの動作を宣言的に定義することになります。
これまでは、
input タグに入力する
・その input タグの内容を $(‘#name’).val() などを使用して取得する
・取得した値を $(‘#name-label’).text などを使用してセットする
という JavaScript の処理を書かなければなりませんでした。
この極めてシンプルな例では、Vue.js を使用する場合としない場合とであまり差異を感じられないかもしれません。しかし、Web アプリケーションのフロント部分の基本的な機能構成は、 ・サーバサイドデータを画面要素に表示 ・エンドユーザの画面要素への入力 ・エンドユーザの入力内容のサーバへの送信 からなり、通常の Web アプリケーションでは画面要素が1つ2つなどということはありませんから、画面要素とモデルデータとのつなぎ込みは膨大な量になります。
Vue.js を使用することで、その画面要素とモデルデータをつなぎ込む処理から解放されることになります。
もちろん、「どの要素がどのデータに対応する」ということは宣言的に書かなければなりません。しかしそれでも、コードの見通しは非常に良くなると感じます。