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

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• 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

  全てのオブジェクトは連想配列である。以下は全て同じ連想配列。

#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番目の形式ですね。

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インスタンスに設定できるオプションがいろいろあります。