テキストボックスの内容を、別のラベルの中に転記したいとします。
jQuery を使った典型的なコードでは、以下のようになります。
これは、
- テキストボックスへの入力が発生したら
- テキストボックスの要素を取得してそのvalue値を取得し
- ラベルの要素を取得してその内容にセット
しています。当たり前ですが、自分でテキストボックスの内容をラベルに移しているわけです。
一方、Vue.jsを使用すると、以下のようになります。
こちらのバージョンでは、自分でテキストボックスの値を取得してラベルに設定する、ということを行っていません。
Vue オブジェクトのコンストラクタに渡しているオブジェクト { name:” } の name の値が変化することにより、それに**反応して**(reactive)ラベルの内容が書き換わっています。
これまでは、
- DOM <-> データ のやり取り
- データ <-> サーバサイドのやり取り
を自分で書かなければいなかったわけですが、Vue.js を導入することにより、データの取り扱いに注力することができるようになります。