##やりたいこと
Node.jsもnpmも使わず最小構成でVue.js使ってHello World!を表示する。
とりあえずVue.jsこうすれば試せるよ！こんな雰囲気だよ！ってのを示したいだけの内容です。
また読者としてはWEBフロントエンド入門者（webpackやGulpはもちろんNode.jsもnpmのこともふんわりとしかわからない）
を対象としています。
きちんと学ぶつもりの方やWEBフロントに慣れてる方は
こんなエントリなんて見ずに公式ドキュメントに目を通しましょう。
Vue.jsは公式に日本語ドキュメントがあるうえに内容も充実しています。
##前準備
適当な場所に index.html を作成します。
エディタで開いてとりあえず雛形を作りましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue.js test</title>
</head>
<body>
</body>
</html>
##CDNを利用してVue.jsが利用可能な状態にする
Vue.jsはCDNを公開していますのでこれを利用します。
次の一文を<head></head>に挿入しましょう。
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!--下の一文を挿入-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Title</title>
</head>
<body>
</body>
</html>
Vueの機能を利用するためには「Vueインスタンス」を作ってやる必要があります。
そのためには次のふたつのことをします。
- Vueインスタンスをマウントする場所を作る
- Vueインスタンスを作成しマウントする
順番にやっていきましょう。
##Vueインスタンスをマウントする場所を作る
bodyタグの中にdivを作成し、id="app"とします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Title</title>
</head>
<body>
<!-- id="app"としてbodyの下にdivタグを作成 -->
<div id="app">
</div>
</body>
</html>
##Vueインスタンスを作成しマウントする
Vueインスタンスを作成します。
</body>の下に<script>を作成し、その中にVueインスタンスを作成するコードと#appにマウントするコードを書きます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
<!-- <script>タグを追加しVueインスタンスを作成する -->
<script>
const app = new Vue({
el: '#app' //これで<div id="app"></div>にマウントされる
});
</script>
</html>
これでVueの機能が利用可能な状態になりました。
##データバインディングを使って'Hello World!'
Vueで定義（バインド）された値をhtmlに反映させてみます。
まずdataプロパティを用意し、そこでtestValという値を定義しましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Title</title>
</head>
<body>
<div id="app">
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
testVal: 'Hello World!' //testValを定義
}
});
</script>
</html>
次に<div id="app"></div>の中で {{ }} を使うことでバインドされた値を表示させることができます。ここでは{{ testVal }} となります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<!-- testValの内容を表示 -->
{{ testVal }}
</div>
</body>
<script>
const app = new Vue({
el: '#app',
data: {
testVal: 'Hello World!'
}
});
</script>
</html>
htmlファイルを開いてみてください。
Hello World!と表示されているはずです。
testValの値を変更すれば、表示されるテキストも当然かわります。
##最後に
これだけで何ができるわけではありませんが、
その気になれば手軽に利用できること、
そして「シンプルなフレームワーク」であることがなんとなくでも伝われば幸いです。
Vue.jsは公式ドキュメントが優れています。
続きの学習はぜひ公式ドキュメントからすすめてください。