Hello Vue.js!
最近話題のVue.jsを使ってみます。
ブラウザにHello Vue.js!と表示させるのがゴールです。
目次
- Vue.jsとは
- 実装
1. Vue.jsとは
Vue.jsはオープンソースのJavaScriptフレームワークです。主にUIを構築するためのフレームワークです。
誰もが自由に使えて、プログラムの基盤は作れるからあとは自由にカスタマイズしてね、ということですね。
また、Vue.jsは3つの特徴があります。
- 開発の柔軟性(スケーラビリティ)
- 低い導入コストと学習コスト
- 豊富な日本語ドキュメント
1. 開発の柔軟性
大規模開発や、小中規模、画面の一部、画面の全体など規模関係なしに取り入れることが可能です。
アプリケーションの規模によって、スケールアップ・スケールダウンが簡単に行えます。
2. 低い導入コストと学習コスト
jQueryなどと同様で、ファイルを読み込む or scriptタグを一つ読み込むだけでvue.jsを取り入れることが可能です。
また、開発環境を用意する必要がありませんので、手軽に導入することが可能です。
3. 豊富な日本語ドキュメント
vue.jsには日本語公式ガイダンスがあるのと、Qiita等の記事でたくさんの記事が公開されています。
Vue.js公式ドキュメント:https://jp.vuejs.org/index.html
Qiita(Vue.js検索結果):https://qiita.com/search?q=Vue.js
2. 実装
では早速コードを書いていきます。
まずはシンプルなindex.htmlを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello Vue.js!</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
次にVue.jsを利用できるよう、CDNを用いて導入します。
...編集
<body>
<div id="app"></div>
<script src="https://jp.vuejs.org/js/vue.js"></script>
</body>
最後にHello Vue.js!を表示させます。
<body>
<div id="app"> {{ message }} </div>
<script src="https://jp.vuejs.org/js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
message: "Hello Vue.js!"
}
})
</script>
</body>
ブラウザにHello Vue.js!が表示されたでしょうか?
el: でvueの対象範囲のセレクタを指定します。要は<div id=”app”></div>が対象範囲ということです。
data: はvue内で使用するデータを指定します。vue内で使用できるデータはもちろんHTMLでも使用できます。
{{ }} これはマスタッシュ(Mustache)構文と呼ばれ、{{}}で囲むとvueで定義してあるデータを表示することが可能です。
今回はmessageという名前でHello Vue.jsという値が存在するので、Hello Vue.jsがブラウザに表示されました。
どうでしたか?Vue.jsの導入は難しかったでしょうか?
引き続き学習していきましょう。
Vue.jsへようこそ。