Vue.js でリアクティブな動作を見る

テキストボックスの内容を、別のラベルの中に転記したいとします。
jQuery を使った典型的なコードでは、以下のようになります。


これは、

  • テキストボックスへの入力が発生したら
  • テキストボックスの要素を取得してそのvalue値を取得し
  • ラベルの要素を取得してその内容にセット

しています。当たり前ですが、自分でテキストボックスの内容をラベルに移しているわけです。

一方、Vue.js を使用すると、以下のようになります。


こちらのバージョンでは、自分でテキストボックスの値を取得してラベルに設定する、ということを行っていません。
Vue オブジェクトのコンストラクタに渡しているオブジェクト { name:'' } の name の値が変化することにより、それに反応して(reactive)ラベルの内容が書き換わっています。

これまでは、

  • DOM <-> データ のやり取り
  • データ <-> サーバサイドのやり取り

を自分で書かなければいなかったわけですが、Vue.js を導入することにより、データの取り扱いに注力することができるようになります。