はじめに
本記事はVueの初心者を対象に、Vueでどうやって「Hello Vue!!」が出力されているかについて記しました。
また、掌田津耶乃氏の「Vue.js&Nuxt.js 超入門」を参考にしています。
本記事を読んでVueについて深く知りたくなったら是非、手に取って下さい。
Vueの基本的な型
Vue.jsは大きく分けて「出力の部分」と「スクリプト」の2か所から成り立っています。
これを「Hello Vue!!」を出力する方法例に見ていきましょう。
ソースコードは以下の通りです。
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h1>Vue.js</h1>
<div id="app">
{{ message}} <!--この中にはJsの式もかける -->
</div>
<script>
// 連想配列(オブジェクト)
var data = {
message: 'hello Vue!'
}
//インスタンス化
var app = new Vue({
el: '#app',
data: data,
})
</script>
</body>
</html>解説
表示(出力)の部分
<div id="app">
{{ message}} <!--この中にはJsの式もかける -->
</div>上のコードのポイントは2つです。
・[id=”app”]とcssセレクタを宣言している点。
・{{message}}で変数のmessageに値を入れている点。ちなみにこの構文をムスタシェ構文という。（らしい笑）
スクリプト
<script>
// 連想配列(オブジェクト)
var data = {
message: 'hello Vue!'
}
//インスタンス化
var app = new Vue({
el: '#app',
data: data,
})
</script>3行目～5行目：var data ={‥省略‥}：dataという変数にオブジェクトを作っています。
8行目～11行目：var app = new Vue({‥})：Vueオブジェクトのインスタンスを作成しています。
Vueのインスタンス作成
var 変数 = new Vue({オブジェクト})オブジェクトの中身は以下の形で宣言する。
{el:対象,
data:値(オブジェクト)}対象：[タグにつけたセレクタ］
値：オブジェクトを配置
3行目～5行目での変数をdataプロパティの値にいれる。このdataプロパティの値をelプロパティで宣言した対象内の変数として使うことができる。
まとめ
今回はVueにて「Hello vue!」を出力する方法について簡単にまとめていきました。
次回はtemplate構文について記していきます。