【Vue.js】Vue.js でとりあえず Hello World を表示してみる
おはようございます。
今日は、本当にサクッと、Vue.js を始めるにあたってお決まりのやつをやっておきたいと思います。
スポンサーリンク
Vue.js とは
公式サイトより転載
Vue.js は、ユーザーインターフェイスを構築するためのプログレッシブフレームワークです。
他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。
中核となるライブラリは view 層だけに焦点を当てています。
そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。
また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
あなたが Vue についてもっと深く学ぶ前に概要を知りたいのなら、中核となる原則とサンプルプロジェクトを元に説明するビデオを作成しているので、それを見るとよいでしょう。
あなたが経験豊富なフロントエンド開発者で、 Vue.js と他のライブラリ/フレームワークを比較したい場合、他のフレームワークとの比較を確認してください。
色々と書いてありますが、主な特長としては、JQuery のように開発者が画面上の動作を自分でプログラミングする必要がない、という感じでしょうか。
ということで早速。
プログラム
css
css/style.css
@charset "UTF-8";
body
{
font-family:Helvetica, 'Helvetica Neue', 'Mplus 1p', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic' !important;
font-size:12px;
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6
{
font-family:Helvetica, 'Helvetica Neue', 'Mplus 1p', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic' !important;
}
div.msg {
margin: 20px;
font-size: 24px;
}html
index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Vue で Hello World</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="hold-transition fixed skin-blue-light sidebar-mini ">
<div class="wrapper" >
<div style="margin: 20px;">
<pre>
Vue.js で Hello World! を表示するサンプルプログラム。
</pre>
</div>
<div>
<div id="app" class="msg">{{ message }}</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="js/script.js"></script>
</body>
</html>
ポイントとなる箇所は、vue.js の読み込み（CDN）と、div内に記述した{{}}で囲まれた箇所ですかね。
Javascript
js/script.js
/**
* Vueを初期化
*/
const app = new Vue({
el: '#app',
data: {
message: 'Hello World!!'
}
})Vue関数にパラメータ（オブジェクト）を渡してやることで色々とやってくれます。
起動してみる
無事にメッセージが表示されました。
まとめ
何事も始めなければ始まらないということで、サクッとお決まりの Hello World を出力してみました。
これから色々弄っていきたいと思います。
ではでは。