やりたいこと
Vue.js がどんなものかサクッと学習したいので、 CDN を使った環境を用意したい。
流れ
- 適当にディレクトリをつくる
index.htmlを作成app.jsを作成
ファイル名はお好みで。
CUI を使いたい場合はこちら。
mkdir vuejs-cdn-project cd vuejs-cdn-project touch index.html touch app.js
index.html
本家によると、以下の記述を使えば最新バージョンを使うことができるとのこと（プロトタイプや学習を目的とする場合）
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
これを HTML に記述する。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>{{ msg }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="./app.js"></script> </body> </html>
HTML がすべて解析された後に JS ファイルを読み込みたい。よって、下の方で Vue.js の CDN と app.js を読み込む記述をしている。
head タグ内にかくと、<p>{{ msg }}</p>が{{ msg }}のまま変わらない。（Hello, VueJS と表示されない）。なぜなら、JS を読み込んだところで解析が終わってしまうため。
この段階で HTML をブラウザで見ると、まだ「{{ msg }}」と表示されているはず。
app.js
app.js に以下を追記。
new Vue({ el: '#app', data: () => { return { msg: 'Hello, VueJS!' } }, })
elに#appを指定することで、<div id="app"></div>内に Vue のインスタンスが紐づく。new Vue内で定義したdataなどに HTML 側でもアクセスできるようになる。
逆にいうと、<div id="app"></div>の外では今回定義したデータにはアクセスできない。このように、HTML の要素（DOM）と Vue インスタンスを紐付けることを「マウント」と呼ぶ。
「マウント」には「乗る、またがる、装置する、はめる、固定する」といった意味がある。Vue インスタンスをDOMに「乗せる」ことで使えるようになる、といったイメージをしてもいいかもしれない。（学習本では「描画する」と表現されることが多い）
ブラウザを再読み込みすると、「{{ msg }}」が「 Hello, VueJS 」に変わっているはず。
これで、CDN を使って Vue.js を学習するための準備ができた。
