【Vue.js】オブジェクト、オプション、プロパティ、プロパティ名の違い

【Vue.js】オブジェクト、オプション、プロパティ、プロパティ名の違い

呼び名で迷うことがあるのでメモ。

＜条件＞
・変数appに生成したVueインスタンスを格納。
・入れ子構造のデータが存在。

.js

var app = new Vue({
    el: "#app",
    data:{
        user:{
            age:27,
            lastName:'Toroki',
            firstName:'Takashi'
        },
        product:{
            serise: 'iphone10',
            price: 110000
        }
    },
    methods:{
        onClick:function(){
            alert('Clicked!')
        }
    }
})

オブジェクト

一つの塊。（複数の）プロパティから成る。
appがオブジェクト。

オプション

正式名称はコンポーネントオプション。用途毎にオプションを指定する。

オプションの中身は（複数の）プロパティになっているため、各オプションのデータをオプションオブジェクトと呼ぶ。

▼主なオプション

オプション	内容
el	テンプレートと紐付けるid名を記述。.html(DOM)にVueインスタンスを与える
data	データオブジェクト
filters	書式の設定
methods	イベント発生時の処理

・コンポーネントオプション公式ページ
https://012-jp.vuejs.org/api/options.html

プロパティ

プロパティ名:値のセットの呼び名。
入れ子構造をとる。

el: "#app"
data:{ }
user:{ }
age:27
LastName: 'Todoroki'
method:{ }

▼入れ子の例（プロパティ３つ）
dataプロパティの中の、userプロパティの中の、ageプロパティのプロパティ名がage, 値が27。

.js

data:{
        user:{
            age:27,
        }
    }