Introduction-to-Vuejs-Development_2-01 の履歴(No.2)

「data: { データ部分 }」と指定することで、Vueインスタンスで使うデータを用意できます。
JavaScriptの文法では、「{」と「}」で囲まれたデータは、オブジェクト（連想配列）になります。
つまり、dataオプションで用意するデータの構造は、オブジェクト（連想配列）にしておけばOKということですね。

データ部分は、普通のJavaScriptオブジェクト（連想配列）なので、

{
  プロパティ名1: 値1 ,
  プロパティ名2: 値2 ,
  プロパティ名3: 値3
}

のように、プロパティ名と値の組をカンマで区切って並べればOKです。
末尾の組にはカンマは不要なので注意。

data: {
  name: "山田太郎",
  age: 25,
  message: "こんにちは"
}

みたいな形になります。

↑

JavaScriptのオブジェクト†

（参考）

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インスタンスを作る例†

これが普通のやり方みたいです。

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インスタンスを作る例†

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インスタンスの主なオプション†

elオプションやdataオプションの他にも、Vueインスタンスに設定できるオプションがいろいろあります。

オプション名	内容
el	どのHTML要素とつながるのか
data	どんなデータがあるのか
methods	どんな処理を行うのか
computed	どのデータを使って別の計算をするのか
watch	どのデータを監視するのか

Introduction-to-Vuejs-Development_2-01 の履歴(No.2)

01 Vue インスタンスを作る：new Vue†

Vueインスタンス作成の書式†

elオプション†

dataオプション†

JavaScriptのオブジェクト†

new Vue()でVueインスタンスを作る例†

var 変数名 = new Vue()でVueインスタンスを作る例†

Vueインスタンスの主なオプション†

01　Vue インスタンスを作る：new Vue†