首先推荐一个个人认为不错的课程吧(声明,不是宣传目的哦,本人秉持着好的东西就要分享出来让更多的人知道,也希望真正的能够帮到需要的朋友):https://ke.qq.com/course/279663
推荐原因:讲的好是肯定的,主要的原因是因为我学习前端很久,(还在学习阶段)一直苦于没有后端数据库支持,想了很多办法,嗯,这个视频可以很好的解决哦
ok,步入正题
总结1:处理从后端获取的数据格式:看下面的代码
{ key1:{k1:val1}, key2:{k2:val2}, key3:{k3:val3}, key4:{k4:val4} } 转为 [ {k1:val1} {k2:val2} {k3:val3} {k4:val4} ]处理方式:如下(axios方式获取的数据都是在data中)
data(){ return { blogs:[] } }, created(){ axios.get("https://wd2977814978jcnbar.wilddogio.com/posts.json") .then((data)=>{ var blogArray = [] for(let key in data.data){ blogArray.push(data.data[key]) this.blogs = blogArray } }) }总结一下:先遍历对象,获取对象中的每一项,将其push到我们新创建的数组中,之后再将这个新的数组赋值给我们的对象
注意:很多时候我们想要对获取到的数据,添加一项新的值,比如添加一个id,也是在这个阶段进行处理哦
总结2:axios中的this指向不是我们的vue实例
解决办法:1、在axios先存储一下this,然后再使用,比如var _this = this
2、在axios中使用箭头函数,因为箭头函数的指向并不指向promise实例,而是指向它创建时候的实例(比较推荐哦)
小知识点总结:
在组件中获取动态路由参数(比如动态参数id):this.$route.params.id
跳转到某一个页面中:除了<router-link>,还可以this.$router.push({path:'/'})