Introduction-to-Vuejs-Development_2-01 - プログラミング探して！

「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
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

<!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

<!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

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

01　Vue インスタンスを作る：new Vue †

Vueインスタンス作成の書式 †

elオプション †

dataオプション †

JavaScriptのオブジェクト †

new Vue()でVueインスタンスを作る例 †

var 変数名 = new Vue()でVueインスタンスを作る例 †

Vueインスタンスの主なオプション †

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

メニュー

まとめ

最新の10件

人気の10件

01 Vue インスタンスを作る：new Vue †

Vueインスタンス作成の書式 †

elオプション †

dataオプション †

JavaScriptのオブジェクト †

new Vue()でVueインスタンスを作る例 †

var 変数名 = new Vue()でVueインスタンスを作る例 †

Vueインスタンスの主なオプション †

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

メニュー

まとめ

最新の10件

人気の10件

01　Vue インスタンスを作る：new Vue †