1. Object對象

基礎用法：給對象添加屬性

const person = {
    name: 'Tom',
    sex: 'boy'
}
Object.defineProperty(person,'age',{
    value:18,
    enumerable:true,    //可枚舉
    writable:true       //可修改
    configurable:true   //可刪除
})

高級用法：給對象動態賦值

cosnt number = 18
const person = {
    name: 'Tom',
    sex: 'boy'
}

//當有人讀取person的age屬性，就會動態去查詢
Object.defineProperty(person,'age',{
    get:function(){
        return number
    }
    set(val){
        number = val
    }
})

2. 頁面綁定方法

template裡面的方法，有參數就帶括號，沒有則可以不攜帶括號
如果帶括號，還想使用event，則需要使用$event占位

<button @click="search(xxxx,$event)" />

const vm = new Vue({
    el: '#root',
    data(){
        return {
        
        }
    },
    methods:{
        search(string,event){
            console.log('xxxxx')
        }
    }
})

3. 事件修飾符

前面說了，方法裡面可以傳事件，如何阻止呢

@click.prevent="xxx" 點擊方法加.prevent
在方法中使用event.preventDefault

vue中的事件修饰符:

prevent:阻止默认事件(常用)
stop:阻止事件冒泡(常用)
once:事件只触发一次(常用)
capture:使用事件的捕获模式
self:只有event.target是当前操作的元素时才触发事件
passive :事件的默认行为立即执行,无需等待事件回调执行完毕

vue中常用的按键别名:

回车 =>enter
删除 =>delete(捕获删除或空格键)
退出 =>esc
空格 =>space
换行 =>tab
上 =>up
下 =>down
左 =>left
右 =>right

如果vue中没有定义想要使用的键的话，可以通过e输出e.key,e.keyCode来查看键盘上按键的名称和编码。

4.Computed

要使用的屬性不存在，要通過計算獲得

get函數什麼時候調用：

第一次加載的時候
監控的數據發生變化的時候

computed會將結果放入到緩存，如果沒有修改則直接讀取緩存

1.完整寫法

computed:{
    fullName:{
        get(){
            return this.firstName + '-' + this.lastName
        },
        set(val){
            const arr = val.split("-"),
            this.firstName = arr[0],
            this.lastName = arr[1]
        }
    }
}

2.簡單寫法，必須只有一個get方法

computed:{
    fullName:function(){
        return this.firstName + '-' + this.lastName
    }
}

3.最簡寫法

computed:{
    fullName(){
        return this.firstName + '-' + this.lastName
    }
}

頁面顯示的時候使用{{fullName}}

5. Watch

注意：watch和computed功能實現都差不多，watch可以進行異步操作

1.完整寫法

watch:{
    numbers:{
        deep:true,
        immediate:true,
        handler(newVal,oldVal){
            console.log('change',newVal,oldVal)
        }
    }
}

2.簡單寫法,不可以有其他屬性deep等

watch:{
    numbers(newVal,oldVal){
        console.log('change',newVal,oldVal)
    }
}

【Vue2.x】Vue基礎知識

1. Object對象

2. 頁面綁定方法

3. 事件修飾符

4.Computed

5. Watch