#author("2019-08-10T13:47:12+00:00","default:sagasite","sagasite")
#author("2019-08-10T15:12:37+00:00","default:sagasite","sagasite")
[[Vue.js開発入門]] ＞ Chapter 2 データを表示するとき
#contents
*01 Vue インスタンスを作る：new Vue [#w026b79d]
Vue.jsでWebアプリ（SPA、シングルページアプリケーション）を作るには、まずJavaScriptでVueインスタンスを作るところから始めます。
Vueインスタンスにいろいろなオプション（設定値）を指定することで、Webアプリの機能が用意できます。
**Vueインスタンス作成の書式 [#ab5bfb60]
new Vue()
または
var 変数名 = new Vue()
~
Vueインスタンスを作成するコンストラクター関数「Vue()」には、Vueインスタンスに設定するデータを引数として渡します。
Vueが動作するために最低限必要なデータとして、
-elオプション
-dataオプション
が挙げられます。
**elオプション [#g73dfcf6]
elオプションで、「どのHTML要素とつながるのか」を指定します。
HTMLの中に「<タグ名 id="ID名">と書いた要素」を用意しておけば、elオプションで「el: "#ID名"」と指定することで、その要素とつながります（紐付けられます）。
**dataオプション [#k4353bc3]
dataオプションで、「どんなデータがあるのか」を指定します。
「data: { データ部分 }」と指定することで、Vueインスタンスで使うデータを用意できます。
JavaScriptの文法では、「{」と「}」で囲まれたデータは、オブジェクト（連想配列）になります。
つまり、dataオプションで用意するデータの構造は、オブジェクト（連想配列）にしておけばOKということですね。
データ部分は、普通のJavaScriptオブジェクト（連想配列）なので、
{
プロパティ名1: 値1 ,
プロパティ名2: 値2 ,
プロパティ名3: 値3
}
のように、プロパティ名と値の組をカンマで区切って並べればOKです。
末尾の組にはカンマは不要なので注意。
data: {
name: "山田太郎",
age: 25,
message: "こんにちは"
}
みたいな形になります。
***JavaScriptのオブジェクト [#e7d90c0d]
（参考）
-javascriptの連想配列と配列の違い - Qiita https://qiita.com/katsukii/items/168bee174073ae7ec7e4
>全てのオブジェクトは連想配列である。以下は全て同じ連想配列。
#code(javascript){{{
// 1
var obj = { hoge: 'hoge' };
// 2
var obj = { 'hoge': 'hoge' };
// 3
var obj = {};
obj.hoge = 'hoge';
// 4
var obj = {};
obj['hoge'] = 'hoge';
// 5
var obj = new Object();
obj.hoge = 'hoge';
}}}
これの1番目の形式ですね。
*** new Vue()でVueインスタンスを作る例 [#p2912ce1]
これが普通のやり方みたいです。
-hello.html
#code(html){{{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
new Vue({
el: "#app",
data: {
myText: 'Hello, world!'
}
})
</script>
</body>
</html>
}}}
*** var 変数名 = new Vue()でVueインスタンスを作る例 [#p35cbcfc]
Vueインスタンスを変数に代入しておけば、後でいろいろな形で扱うことができますね。
-hello1.html
#code(html){{{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
let config = {
el: "#app",
data: {
myText: 'Hello, world!'
}
}
let vm = new Vue(config);
</script>
</body>
</html>
}}}
ここでは変数の宣言に「var」キーワードを使うのではなく、ES2015の新しい文法の「let」を使ってみました。
変数「config」にVueインスタンスで使うオプション（設定値）を代入しています。
変数「vm」にVueインスタンスを代入しています。（vmは、ViewModelの意）
** Vueインスタンスの主なオプション [#m385d268]
elオプションやdataオプションの他にも、Vueインスタンスに設定できるオプションがいろいろあります。
| オプション名 | 内容 |h
| el | どのHTML要素とつながるのか |
| data | どんなデータがあるのか |
| methods | どんな処理を行うのか |
| computed | どのデータを使って別の計算をするのか |
| watch | どのデータを監視するのか |
***いろいろなオプションを詰め込んだ例 [#q2d2067e]
ここでは、Vueインスタンスのオプションがどんな風に書けるのか？のサンプルコードを示します。
ただのハリボテなので、実際には動きません。
-hello2.html
#code(html){{{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js sample</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p> {{myText}} </p>
</div>
<script>
new Vue({
//どのHTML要素とつながるのか
el: "#app",
//どんなデータがあるのか
data: {
myText: 'Hello, world!'
},
//どんな処理を行うのか
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
},
//どのデータを使って別の計算をするのか
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
},
//どのデータを監視するのか
watch: {
restSec: function () {
if (this.restSec <= 0) {
alert("制限時間です。");
clearInterval(this.timerObj);
}
}
}
})
</script>
</body>
</html>
}}}
methods、computed、watchなどというプロパティー名のオプションも設定できるよ！というお話でした。
