码迷,mamicode.com
首页 > 移动开发 > 详细

vue项目中使用axios发送ajax

时间:2019-06-16 12:03:27      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:table   实例化   最好   码云   本地   ajax   home   引入   接收   

 

 

首先使用npm安装axios:

技术图片

安装好后可以去package.json中查看相关依赖

技术图片

在HOME.VUE中引入axios

技术图片

在static目录下新建一个文件夹mock,在里面存放各种模拟数据

定义一个获取首页数据的方法,把获取到的数据打印出来

技术图片

获取成功:

技术图片

在本地测试的时候需要使用mock数据,但是在正式上线或者和服务器联调的时候需要把本地的地址改成获取数据api的地址,有时候请求很多,批量修改就可能出现麻烦

 技术图片

在config目录中index.js中proxyTable做如下修改就可以实现

 技术图片

接下来把获取到的数据转发到各个子组件中去

技术图片

 

技术图片

父组件传值

技术图片

子组件通过props接收

技术图片

 传值

 技术图片

 完成动态绑定:

技术图片

接下来组件的数据依样画葫芦绑定即可

技术图片

技术图片

需要注意的是SWIPER组件最好在获取到数据之再实例化轮播图

技术图片

 

 到此为止首页的数据就绑定完成了

技术图片

把完成的提交到码云上https://gitee.com/delisteam/Travel

技术图片

 

vue项目中使用axios发送ajax

标签:table   实例化   最好   码云   本地   ajax   home   引入   接收   

原文地址:https://www.cnblogs.com/rmty/p/11030255.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!