
Vue.js 最初の一歩
最近、仕事でVue.jsを勉強する必要があり、 少しずつ理解が進んできたので、この機会に記事にしておこうと思います。
Vue.js とは何か?
そもそも、Vue.js とは何かって話からです。
Vue.js はWebサイトのユーザーインターフェースを構築するための、フレームワークです。
読み方は「ビュー・ジェーエス」
名前の読みから連想してしまうけど、Viewに特化したフレームワークなので、Ajaxでデータを取得するなどといった処理には、jQueryなど別のライブラリ、もしくはフレームワークと組み合わせる必要があります。
Hello World !
はじめの一歩、と言ったら、「Hello World!」ですよねー。
というわけで、ベタにこれでいきます。
実際の、動作サンプルは
こちら。
インストール
まず、フレームワーク本体を読み込みます。
下記の公式サイトからjsファイルをダウンロードして、サーバーにアップするか、CDNで読み込みましょう。
1 |
<script src="https://unpkg.com/vue"></script> |
【参考】
公式ドキュメント:インストール
HTML
1 2 3 |
<div id="app"> {{ msg }} </div> |
HTMLの基本形はこんな感じ。
Viewと紐づけたいタグにidをつけます。
タグはdivでなくても構わないし、idでなくてclassでも問題ないです。
要は、タグと一意に紐づけられればOK。
二重の中かっこで囲まれた、「{{ msg }}」
ここにView側の変数「msg」の内容が反映されるわけです。
JavaScript
1 2 3 4 5 6 7 |
var app = new Vue({ el: "#app", data: { msg: "Hello Vue World!" } }) |
JavaScriptの基本形はこちら。
簡単ですね。
「new Vue()」で、Vueをインスタンス化します。
コンストラクタに渡す引数で、紐づけるDOMと表示するデータを指定します。
実行してみると、dataに設定した初期値の「Hello Vue World!」が、{{ msg }} の部分に表示されると思います。
データの変更とDOMへの反映
ここで、ブラウザの開発者ツールを開いて、コンソールから下記のスクリプトを実行してみます。
1 |
app.msg = "New Message!"; |
実行してみると、「Hello Vue World!」が「New Message!」に変わるのがわかります。
Vueインスタンスのappが持っている、msgというデータを変更すると、それに紐づいたDOMに自動的に反映されるわけです。
Vue.jsの、というよりリアクティブプログラミングのキモはここにあります。
- DOMを直接操作せず、データを介してDOMの状態を管理する。
- DOMとデータの関係性は宣言的に記述される。
この2点です。
このへんのことに関しては、また別の機会にまとめたいと思います。