<div id="App">
        <h1>n的值為:{{ n }}</h1>
        <button @click="add">按鈕</button>
        <!-- add 也可以寫成 add() -->
</div>
-----------------------------------------------------
data: {
    n: 1
},
methods: {
    add(e){
    	// console.log(e) 這里的第一個形參e 是事件對象
        this.n++
    }
},     

<div id="App">
        <h1>n的值為:{{ n }}</h1>
        <button @click="add(5)">點我加5</button>
        <button @click="add(10)">點我加10</button>
</div>
------------------------------------------------------
data: {
    n: 1
},
methods: {
    add(x){
    	// 但這種情況下，我們拿不到 事件對象e 了
    	// 但是，在模板傳參的過程中，我們可以通過$event將事件對象傳入
        this.n += x
    }
},

data: {
    firstName: '張',
    lastName: '三',
}
--------------------------------------------------------
computed: {
    // 簡寫 函數式(只讀不可寫，默認寫法)    只有getter 無setter
    fullName() {
        return this.firstName + this.lastName
    }
}

data: {
    firstName: '張',
    lastName: '三',
}
------------------------------------------------------------
computed: {
    // 完整寫法 對象式(可讀可改)    有getter和setter
    fullName:{
        get(){
            return this.firstName + this.lastName
        },
        set(value){
            const arr = value.split('-')
            this.firstName = arr[0]
            this.lastName = arr[1]
        }
    }
}

watch: {
    // 完整寫法 對象式
    lastName:{
        immediate: true,    // 初始化時，先調用一次handler函數
        deep: true,         // 深度監(jiān)聽，可監(jiān)聽多層對象
        handler(newValue,oldValue){
            console.log(newValue,oldValue)
        }
    }
}

watch: {
    // 簡寫 函數式        當不需要 immediate: true,deep: true,時
    lastName(newValue, oldValue){
        console.log(newValue, oldValue)
    }
}