需要知道的VUE知識點

VUE

VUE中使用很多，很常用的方法，但是缺在用的時候不會寫，各種翻代碼，這裏給大家整理一些我遇到的，有用的小知識點，後期有的還會繼續更新。

監聽

監聽路由，數據變化等是常用的監聽方式，話不多說，上代碼：

watch: {
		// 1、路由監聽，適用於同一個頁面參數不同時，不需要重新打開頁面，監聽地址的參數不同就可重新加載數據
        $route () {
            if (this.$route.query.id === 2) {
                this.state = true
            }else if (this.$route.query.id === 1){
            	this.state = false
            }
            //加載數據
            this.findInteger()
        },
        //2、監聽某個對象值發生變化
        state () {
            //加載數據
            this.findInteger()
        }
        注意方法1和方法2不要同時使用，否則會陷入死循環。。。。
    }

日期

1、js中日期控制顯示樣式

export function formatDate (date, fmt) {
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
    }
    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    }
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + ''
            fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str))
        }
    }
    return fmt
}

function padLeftZero (str) {
    return ('00' + str).substr(str.length)
}

說明	顯示	js代碼
年-月-日	2020-03-01	formatDate(new Date(), ‘yyyy-MM-dd’)
年.月.日	2020.03.01	formatDate(new Date(), ‘yyyy.MM.dd’)
年/月/日	2020/03/31	formatDate(new Date(), ‘yyyy/MM/dd’)
月.日 時:分	03.31 11:08	formatDate(new Date(), ‘MM.dd hh:mm’)
月.日 時:分:秒	03.31 11:12:07	formatDate(new Date(), ‘MM.dd hh:mm:ss’)
年.月.日 時:分:秒	2020.03.31 11:13:14	formatDate(new Date(), ‘yyyy.MM.dd’)

*以上格式可自由組合出自己想要的時間日期樣式

路由傳參

// id 爲參數名   ：後爲參數值
<router-link tag="div" :to="{path:'/Teamsizeroom',query:{id:1}}">
傳參跳轉頁面
</router-link>

例如：

調用後臺接口

findInteger () {
    findInteger({
    	//參數，多個參數用,隔開
        id: 1,
        id2: 2,
        id3: 3
    }).then(res => {
    	//接口調用成功返回值
        console.log(res)
    }).catch(err => {
    	//接口調用事變返回值
        console.log(err)
    })
}