Vue.jsの基本的な使い方を以前の記事で紹介しました。
本日は、Vue.jsの便利な機能を紹介します。
解説していく機能は
- 双方向データバインディング(v-model)
- computed
- watch
- Class制御
の４つ。
すべて、Vue.jsでwebアプリを作る際に必須の機能ですので、１つでも「なんだそれ？」の人は必ずマスターしてください！
合計するだけの簡易アプリ
このような、左のinputと右のinputの数字の合計を表示するwebアプリを使って、Vue.jsの便利機能を紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<div id="app"> <input type="number" v-model="number_01"> <input type="number" v-model="number_02"> <div :class="{isActive: isActive}">{{ sum }}</div> <button @click="isActive = !isActive">赤くする</button> </div> <script> new Vue({ el: "#app", data: { number_01: 0, number_02: 0, isActive: false }, computed: { sum() { return Number(this.number_01)+ Number(this.number_02); } }, watch: { number_01(value) { console.log("number_01 is " + value); }, number_02(value) { console.log("number_02 is " + value); }, } }) </script> <style> .isActive { color: red; } </style> |
これが今回紹介する機能がすべて詰め込まれたソース一式。
かなりシンプルな形になっています。(もし、複雑だ！と思っても、少しずつ解説していくのでご安心を。)
双方向データバインディング(v-model)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="app"> <input type="number" v-model="number_01"> <input type="number" v-model="number_02"> ... </div> <script> new Vue({ el: "#app", data: { number_01: 0, number_02: 0, .... }, .... }) </script> |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div id="app"> <div>{{ sum }}</div> </div> <script> new Vue({ el: "#app", data: { number_01: 0, number_02: 0 }, computed: { sum() { return Number(this.number_01)+ Number(this.number_02); } } .... }) </script> |
今回でいうと、computedの中の「sum()」はnumber_01とnumber_02の合計値をリターンしています。そのため、もし、上記で説明した双方向データバインディング(v-model)の機能によって、number_01もしくはnumber_02の値が変更されたら、即座に再計算して新たな値をリターンします。
watch
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<div id="app"> <input type="number" v-model="number_01"> <input type="number" v-model="number_02"> </div> <script> new Vue({ el: "#app", data: { number_01: 0, number_02: 0 ... }, ... watch: { number_01(value) { console.log("number_01 is " + value); }, number_02(value) { console.log("number_02 is " + value); }, } }) </script> |
watchは、dataで保有している値に１対１で対応して、その値が変更されたときに動作するメソッドのようなものです。
今回の例で言うと、watchの中でnumber_01とnumber_02を監視するように登録していて、それらの値が変更されたら、console.logで値をlogに表示するようになっています。
Class制御
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div id="app"> ... <div :class="{isActive: isActive}">{{ sum }}</div> <button @click="isActive = !isActive">赤くする</button> </div> <script> new Vue({ el: "#app", data: { .... isActive: false } .... }) </script> |
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アプリに応用してみてください！
