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のオブジェクト

(参考)

Everything is expanded.Everything is shortened.
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// 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
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
<!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
  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
<!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どのデータを監視するのか

いろいろなオプションを詰め込んだ例

ここでは、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
<!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などというプロパティー名のオプションも設定できるよ!というお話でした。


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2019-08-10 (土) 16:28:18 (70d)