vueインスタンス

Vueインスタンス
概要
いずれのVueプログラムも、少なくとも1つのVueインスタンスオブジェクトを必要とし、内部にさまざまな属性と方法、およびライフサイクルの制御を設定します.
Vueの作成例

let vm = new Vue({
    el: '#app',
    data: {},
    methods: {}
})

el対応するラベルルートノード
セレクタを配置します.idとは限りません.classまたは他の

new Vue({
    el: '.app'
});

dataインスタンス対応データ
注:ここでdataはデータオブジェクトです

data: {
    message: 'abc'，
    people: [
        { name: 'xiaoming' },
        { name: 'xiaohong' },
        { name: 'xiaoli' }
    ],
    person: {
        name: 'xiaohong',
        age: 18,
        gender: 'M'
    }
}

methodsインスタンスに対応する方法
方法の書き方が違うので、内部のthisは違います

methods: {
    test1: function () {
        console.log(this); // vm
    },
    test2 () { //     
        console.log(this); // vm
    },
    test3: () => {
        console.log(this); // window
    }
}

computed計算プロパティ
文法的には関数に対応しているように見えますが、実は を表しています.

let vm = new Vue({
    el: '#app',
    data: { a: 10 },
    methods: {
        doubleAFunc () {
            console.log('doubleAFunc'); //     ，    
            return this.a * 2;
        },
        change () {
            this.a += 10; //         ，     N ，        
        }
    },
    computed: { //     
        doubleA: function () {
            console.log('doubleA'); //        ，       
            return this.a * 2;
        }
    }
});

{{ doubleA }}
{{ doubleAFunc() }}
{{ doubleA }}
{{ doubleAFunc() }}
{{ doubleA }}
{{ doubleAFunc() }}

ウォッチプロパティ値
値が変更されると、新しい値と古い値が最初に取得されます.

watch: {
    a (newValue, oldValue) {
        console.log('a changed');
        console.log(newValue, oldValue);
    }
}

ろ過フィルター
指定したデータのフィルタ

{{ msg | upper }}
{{ people | students(18) }}

filters: {
    upper (str) {
        return str.toUpperCase();
    }, 
    students (people, age) { //      
        const arr = [];
        people.map(item => {
            item.age >= age && arr.push(item);
        });
        return arr;
    }
}