Vue.js開発入門 > Chapter 2 データを表示するとき
01 Vue インスタンスを作る:new Vue †
Vue.jsでWebアプリ(SPA、シングルページアプリケーション)を作るには、まずJavaScriptでVueインスタンスを作るところから始めます。
Vueインスタンスにいろいろなオプション(設定値)を指定することで、Webアプリの機能が用意できます。
Vueインスタンス作成の書式 †
new Vue()
または
var 変数名 = new Vue()
Vueインスタンスを作成するコンストラクター関数「Vue()」には、Vueインスタンスに設定するデータを引数として渡します。
Vueが動作するために最低限必要なデータとして、
- elオプション
- dataオプション
が挙げられます。
elオプション †
elオプションで、「どのHTML要素とつながるのか」を指定します。
HTMLの中に「<タグ名 id="ID名">と書いた要素」を用意しておけば、elオプションで「el: "#ID名"」と指定することで、その要素とつながります(紐付けられます)。
dataオプション †
dataオプションで、「どんなデータがあるのか」を指定します。
「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
全てのオブジェクトは連想配列である。以下は全て同じ連想配列。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
これの1番目の形式ですね。
new Vue()でVueインスタンスを作る例 †
これが普通のやり方みたいです。
- hello.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
var 変数名 = new Vue()でVueインスタンスを作る例 †
Vueインスタンスを変数に代入しておけば、後でいろいろな形で扱うことができますね。
- hello1.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
ここでは変数の宣言に「var」キーワードを使うのではなく、ES2015の新しい文法の「let」を使ってみました。
変数「config」にVueインスタンスで使うオプション(設定値)を代入しています。
変数「vm」にVueインスタンスを代入しています。(vmは、ViewModelの意)
Vueインスタンスの主なオプション †
elオプションやdataオプションの他にも、Vueインスタンスに設定できるオプションがいろいろあります。
オプション名 | 内容 |
el | どのHTML要素とつながるのか |
data | どんなデータがあるのか |
methods | どんな処理を行うのか |
computed | どのデータを使って別の計算をするのか |
watch | どのデータを監視するのか |
いろいろなオプションを詰め込んだ例 †
ここでは、Vueインスタンスのオプションがどんな風に書けるのか?のサンプルコードを示します。
ただのハリボテなので、実際には動きません。
- hello2.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
|
methods、computed、watchなどというプロパティー名のオプションも設定できるよ!というお話でした。