最近、仕事でVue.jsを勉強する必要があり、　少しずつ理解が進んできたので、この機会に記事にしておこうと思います。

Vue.js とは何か？

そもそも、Vue.js とは何かって話からです。
Vue.js はWebサイトのユーザーインターフェースを構築するための、フレームワークです。
読み方は「ビュー・ジェーエス」
名前の読みから連想してしまうけど、Viewに特化したフレームワークなので、Ajaxでデータを取得するなどといった処理には、jQueryなど別のライブラリ、もしくはフレームワークと組み合わせる必要があります。

Hello World !

はじめの一歩、と言ったら、「Hello World!」ですよねー。
というわけで、ベタにこれでいきます。

実際の、動作サンプルは
こちら。

インストール

まず、フレームワーク本体を読み込みます。
下記の公式サイトからjsファイルをダウンロードして、サーバーにアップするか、CDNで読み込みましょう。

【参考】
公式ドキュメント：インストール

HTML

HTMLの基本形はこんな感じ。
Viewと紐づけたいタグにidをつけます。
タグはdivでなくても構わないし、idでなくてclassでも問題ないです。
要は、タグと一意に紐づけられればOK。

二重の中かっこで囲まれた、「{{ msg }}」
ここにView側の変数「msg」の内容が反映されるわけです。

JavaScript

JavaScriptの基本形はこちら。
簡単ですね。
「new Vue()」で、Vueをインスタンス化します。
コンストラクタに渡す引数で、紐づけるDOMと表示するデータを指定します。

実行してみると、dataに設定した初期値の「Hello Vue World!」が、{{ msg }} の部分に表示されると思います。

データの変更とDOMへの反映

ここで、ブラウザの開発者ツールを開いて、コンソールから下記のスクリプトを実行してみます。

実行してみると、「Hello Vue World!」が「New Message!」に変わるのがわかります。
Vueインスタンスのappが持っている、msgというデータを変更すると、それに紐づいたDOMに自動的に反映されるわけです。
Vue.jsの、というよりリアクティブプログラミングのキモはここにあります。

• DOMを直接操作せず、データを介してDOMの状態を管理する。
• DOMとデータの関係性は宣言的に記述される。

この2点です。
このへんのことに関しては、また別の機会にまとめたいと思います。