需要知道的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)
    })
}