【Vue.js】双方向データバインディング(v-model)・computed・watch

Vue.jsの基本的な使い方を以前の記事で紹介しました。

本日は、Vue.jsの便利な機能を紹介します。

解説していく機能は

  • 双方向データバインディング(v-model)
  • computed
  • watch
  • Class制御

の4つ。

すべて、Vue.jsでwebアプリを作る際に必須の機能ですので、1つでも「なんだそれ?」の人は必ずマスターしてください!

 

合計するだけの簡易アプリ

このような、左のinputと右のinputの数字の合計を表示するwebアプリを使って、Vue.jsの便利機能を紹介します。

 

これが今回紹介する機能がすべて詰め込まれたソース一式。

かなりシンプルな形になっています。(もし、複雑だ!と思っても、少しずつ解説していくのでご安心を。)

 

 

双方向データバインディング(v-model)

まずは、この部分。双方向データバインディング(v-model)について解説します。

Vue.jsなどのデータバインディング系のフレームワークはwebアプリ内で使用したい値をjs側で管理しています。今回で言うと、左側のinputでカウントする数字(number_01)と右側のinputでカウントする数字(number_02)をVue.jsのdataで管理しています。

管理している値(data)をjsのメソッドで変更しても、htmlのinputで変更しても同じようにdataの値を変更する機能が双方向データバインディング(v-model)です。

今回の例で言うと、number_01とnumber_02はVue.jsがインスタンス化された段階では共に「0」の値です。その値がHTMLのinputに反映されます。そして、HTMLのinputの値を変更すると「v-model=”number_01″」のようにバインディングされた値を今度はHTMLの方から変更することができます。

これが双方向データバインディング(v-model)の基本的な使い方で、webアプリを作成するときには非常によく使う手法ですので、必ずマスターしてください。

 

computed

computedという機能を使えば、dataで保持している値に変更がある度に、それを利用した値をリアルタイムに生成できます。

今回でいうと、computedの中の「sum()」はnumber_01とnumber_02の合計値をリターンしています。そのため、もし、上記で説明した双方向データバインディング(v-model)の機能によって、number_01もしくはnumber_02の値が変更されたら、即座に再計算して新たな値をリターンします。

 

watch

先程紹介した「computed」に似ているのですが、watchという機能を紹介します。

watchは、dataで保有している値に1対1で対応して、その値が変更されたときに動作するメソッドのようなものです。

今回の例で言うと、watchの中でnumber_01とnumber_02を監視するように登録していて、それらの値が変更されたら、console.logで値をlogに表示するようになっています。

 

Class制御

フロントエンドのお仕事では、jsでDOMのクラスを付け替えることは頻繁に発生します。

Vue.jsには、Classの付け替えに便利な機能が標準で組み込まれていて、「:class={…}」という形で実装します。

今回の例で言うと、「<button @click=”isActive = !isActive”>赤くする</button>」をクリックするとdataで保有しているisActiveのbool値が反転して、trueの場合、「<div :class=”{isActive: isActive}”>{{ sum }}</div>」にisActiveというClassが付与されるようになっています。

isActiveというClass名にCSSで色をつけておき、クリックでisActiveのデータを変更すれば、それに合わせて色を変更する動きを実装することができます。

 

まとめ

  • 双方向データバインディング(v-model)
  • computed
  • watch
  • class制御

今回解説した機能は、Vue.js開発において、必ずと言っていいほど使う機能です。

これらの機能をマスターすれば、無駄な処理の重複がなく、効率的にwebアプリを作れるようになります。是非、色々なwebアプリに応用してみてください!

ABOUTこの記事をかいた人

新卒ノマドエンジニアとして独立し、半年で月収100万円を達成する。フリーランスのエンジニアとして活動しながら、事務所を売却(バイアウト)したり、Youtuber(最高月間視聴回数109万回、チャンネル登録者1万人)をしたり、Openrecの公式配信者としてゲーム生実況をしたり、ベンチャー企業のCOOをしたり、パラレルキャリアを歩んでいる。 2019年にミニマムライフコストを不労所得で稼げるようになったため、いまは好きなことだけ仕事にしています。