この度Vue.jsを学び始めました。
その勉強内容をまとめます。
Vue.jsとは
Evan Youさんという方が手軽に小規模なアプリケーションを作れることを目的に作られたフレームワーク。
SPA(シングルページアプリケーション)なので1つのページの変化があった部分だけ表示を変える。
その為、読み込みが少なくスムーズで切り替えが素早い。
個人的にはEvanさんは日本のアニメが好きなのでVue.jsの各バージョンのコードネームが日本のアニメからきていることに親近感を覚えました。
Dragon BallとかHunter×Hunterとか。可愛いな。
インストール
上記に記載されている通り
- CDN
- ダウンロード
- Vue-cli
の3つの方法があります。
一番手軽なのがCDNだと思います。
1行コードをheadに組み込むだけで使えるようになります。(開発バージョンと本番バージョンがあリます)
本日時点では以下ですが、公式サイトから必ず確認してください。
開発バージョン
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
開発バージョンと本番バージョンの違いは、開発バージョンだと警告文を出力してくれるなどあるみたいです。
使ってみる
以下のようにheadにCDNを組み込みます。
<head>
<meta charset="UTF-8">
<title>Sample</title>
<link rel="stylesheet" href="style.css" >
// 以下を追加
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
以下のようにHTML要素を作ります。(説明だけなのでテキトーです)
<div id="app">
<p>{{ text }}</p>
</div>
以下のようにVueインスタンスを作成します。
script要素で作成します。
<script>
new Vue({
el: '#app',
data: {
text:'Hello!World'
}
})
</script>
上記のように記述するとdataの内容がHTML要素のtextに反映され、Hello!Worldとブラウザ上に表示されます。
Vueインスタンスの中身
new Vue({
el:どのHTML要素とつなげるか
data:どのデータを入れるか
methods:処理内容
computed:どのデータを使って計算するか
watch:データの監視
})
上記のように作成します。
一旦ここまでです。