![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Vue.js開発入門 ＞ Chapter 2 データを表示するとき
Vue.jsでWebアプリ（SPA、シングルページアプリケーション）を作るには、まずJavaScriptでVueインスタンスを作るところから始めます。
Vueインスタンスにいろいろなオプション（設定値）を指定することで、Webアプリの機能が用意できます。
new Vue()
または
var 変数名 = new Vue()
Vueインスタンスを作成するコンストラクター関数「Vue()」には、Vueインスタンスに設定するデータを引数として渡します。
Vueが動作するために最低限必要なデータとして、
elオプションで、「どのHTML要素とつながるのか」を指定します。
HTMLの中に「<タグ名 id="ID名">と書いた要素」を用意しておけば、elオプションで「el: "#ID名"」と指定することで、その要素とつながります（紐付けられます）。
dataオプションで、「どんなデータがあるのか」を指定します。
「data: { データ部分 }」と指定することで、Vueインスタンスで使うデータを用意できます。
JavaScriptの文法では、「{」と「}」で囲まれたデータは、オブジェクト（連想配列）になります。
つまり、dataオプションで用意するデータの構造は、オブジェクト（連想配列）にしておけばOKということですね。
データ部分は、普通のJavaScriptオブジェクト（連想配列）なので、
{
プロパティ名1: 値1 ,
プロパティ名2: 値2 ,
プロパティ名3: 値3
}
のように、プロパティ名と値の組をカンマで区切って並べればOKです。
末尾の組にはカンマは不要なので注意。
data: {
name: "山田太郎",
age: 25,
message: "こんにちは"
}
みたいな形になります。
（参考）
全てのオブジェクトは連想配列である。以下は全て同じ連想配列。
#code(javascript){{{
var obj = { hoge: 'hoge' };
var obj = { 'hoge': 'hoge' };
var obj = {};
obj.hoge = 'hoge';
var obj = {};
obj['hoge'] = 'hoge';
var obj = new Object();
obj.hoge = 'hoge';
}}}
これの1番目の形式ですね。
これが普通のやり方みたいです。
#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>
}}}
Vueインスタンスを変数に代入しておけば、後でいろいろな形で扱うことができますね。
#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の意）
elオプションやdataオプションの他にも、Vueインスタンスに設定できるオプションがいろいろあります。
| オプション名 | 内容 |
| el | どのHTML要素とつながるのか |
| data | どんなデータがあるのか |
| methods | どんな処理を行うのか |
| computed | どのデータを使って別の計算をするのか |
| watch | どのデータを監視するのか |
ここでは、Vueインスタンスのオプションがどんな風に書けるのか？のサンプルコードを示します。
ただのハリボテなので、実際には動きません。
#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などというプロパティー名のオプションも設定できるよ！というお話でした。
