Vue.jsと出会って感動したこと

この記事はVue.js #2 Advent Calendar 2017の19日目の記事です。
（投稿が遅くなってしまって申し訳ありません。）

今年は初めてVue.jsと出会った年になりましたので、触れてみて感動したことを書いてみます。

条件付きレンダリングがとても便利

ボタンをクリックして表示・非表示を切り替えるような場面など、下記の実装だけで実現出来ます。
下記のサンプルでは、v-if=変数名とすることで、指定した変数の値に応じてv-ifが含まれているタグを表示するかを変化させています。

See the Pen Vue.js v-if example by minamo (@minamo173) on CodePen.

今回はお試しコードでv-ifを使いましたが、頻繁に表示・非表示を切り替える場合は v-show が適しているそうです。（公式ドキュメントより。）

イベントの処理がシンプルな記法でできる

下記のサンプルは前述のv-ifのサンプルと同じものですが、イベントを検知したいタグに、v-on:イベント名と追加するとそのイベントが起こった時の処理を指定することができます。
下記のサンプルでは、clickイベントが発生した時に、click()メソッドを実行するというような内容です。
イベント名は各種DOMイベントに対応しているようです。

Embedded content: https://codepen.io/minamo173/pen/RxadZx/

クラス・スタイルの動的な指定が簡単

下記のコードでは、v-bind:style=styleを設定するメソッドとすることで、引数に渡した文字列に応じてstyleの内容を変えています。
条件に応じてclassやstyleを変えたい場合にとてもシンプルな実装で実現できます。 Embedded content: https://codepen.io/minamo173/pen/aEdYpp/

【余談？】Google Maps APIの仕組みが少しイメージできた

• JavaScriptを読み込ませて、指定のHTMLタグ（<div id="map"></div>）を書くだけで地図のタグが自動で埋め込まれるのは謎の技術すぎて魔法かと思っていました。
• Vue.jsも指定したセレクタに対して、Vueインスタンスの内容を差し込むので、こういう技術を使っているのかなとイメージできました。

まとめ

• 以前jQueryで同様の実装をどうやっていたのか忘れるほど、Vue.jsは魅力的にシンプルに書ける。

  • 一度学習すれば、Web上で実現したいことを簡単に書ける。

• サンプルコードではHTML・JSが分かれていますが、.vue ファイルにした場合、どちらも1つのファイルにまとめて書くことができるので見通しがしやすい（と思う）。

  • .vueファイル（単一ファイルコンポーネント）はHTML・CSS・JSが1ファイルに全て書けてしまうので膨大なコード量になってきたら考えものではありますが、mixin等々を使って良い塩梅にするのが良いのかなと思いました。