- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- Introduction-to-Vuejs-Development_2-01 へ行く。
- 1 (2019-08-10 (土) 16:28:18)
- 2 (2019-08-10 (土) 16:28:18)
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 | どのデータを監視するのか |