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



これは、

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

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

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



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

これまでは、

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

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