1、vue-resouce实现ajax请求

  vue1中主要用vue-resouce实现ajax请求,

 2.1 引用vue-resouce

  引入axios,直接在index.html文件中引入;

  

  或者在main.js文件中引入vue-resouce.js,并use  vue-resouce;

  

 2.1 使用vue-resouce

  三种ajax请求的方式

 

2、axios实现ajax请求

 2.1 引用axios

  vue2.0版本已不推荐使用vue-resouce发送ajax请求,推荐使用axios发送请求;

  一:直接在index中引入vue.js和axios.js文件,

     <script src="js/vue.min.js"></script>

    <script src="js/axios.min.js"></script>

  或者在main.js文件中导入axios,import axios from ‘axios’,将axios设置在vue中的原型中Vue.prototype.axios = axios;

 2.2 使用axios

  在组件中需要发送ajax请求的地方(后一种方法引入的axios改为this.axios):

  axios.type(url, params).then(function(res){

    成功回调

  }).catch(function(res){

    失败回调

  });

  或者:

  axios({

    method: type,

    url: '',

    data: {}

  }).then(function(res){

    成功回调

  }).catch(function(res){

    失败回调

  });

  axios不支持跨域请求,如果要进行跨域请求,那么使用vue-resouce获取jquery发送ajax请求。

  注: axios是一个基于Promise的HTTP请求;关于Promise示例:

  

vue实现ajax请求(vue-resource和axios)的更多相关文章

  1. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. Vue处理ajax请求

    Ajax请求 1>解决跨域问题 1.1前端解决.只需要在vue.config.js中增加devServer节点增加代理: const path = require("path" ...

  3. vue 发送ajax请求

    一. 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客 ...

  4. vue发送ajax请求

    一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...

  5. vue中ajax请求发送

    示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  6. vue的ajax请求之axios

    axios.get(this.apiUrl+'good/info',{params:{'goodsid':'sp441153'}}) .then(function(response){ console ...

  7. Vue(七)发送Ajax请求

    发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue ...

  8. Vue的Ajax(vue-resource/axios)

    一 简介 1.vue本身不支持发送AJAX请求,需要使用vue-resource(vue1.0版本).axios(vue2.0版本)等插件实现 2.axios是一个基于Promise的HTTP请求客户 ...

  9. vue实现ajax滚动下拉加载,同时具有loading效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. [BZOJ2829] 信用卡 (凸包)

    [BZOJ2829] 信用卡 (凸包) 题面 信用卡是一个矩形,唯四个角做了圆滑处理,使他们都是与矩形两边相切的1/4园,如下图所示,现在平面上有一些规格相同的信用卡,试求其凸包的周长.注意凸包未必是 ...

  2. HDU 4549题解 & luogu【模板】矩阵加速(数列)

    M斐波那契数列 此题对数学基础要求较高 来源矩阵乘法_百度百科 一个m*n的矩阵是一个由m行n列元素排成的矩形阵列.矩阵里的元素可以是数字符号或者数学式. 形如[acbd][abcd]的数表称为二阶矩 ...

  3. 持续集成工具——Jenkins

    一.jenkins简介 1.持续集成工具 2.基于JAVA环境 二.环境搭建 1.安装JDK 2.安装配置git 3.安装配置tomcat Tomcat是针对Java的一个开源中间件服务器(容器),基 ...

  4. 11、 机器学习系统的设计(Machine Learning System Design)

    11.1 首先要做什么 在接下来的视频中,我将谈到机器学习系统的设计.这些视频将谈及在设计复杂的机器学习系统时,你将遇到的主要问题.同时我们会试着给出一些关于如何巧妙构建一个复杂的机器学习系统的建议. ...

  5. 关于Python程序的运行方面,有什么手段能提升性能?

    1.使用多进程,充分利用机器的多核性能 2.对于性能影响较大的部分代码,可以使用C或C++编写 3.对于IO阻塞造成的性能影响,可以使用IO多路复用来解决 4.尽量使用Python的内建函数 5.尽量 ...

  6. vue中对于图片是否正常加载的思考

    问题:由于业务需要,我们需要判断图片能否正常的加载,如果未正常加载的话,需要显示一张默认图片: 方案:1,由于后台返回的是一个图片id数组,例如 imgList=['343313131','21333 ...

  7. SQLZOO 习题

    https://sqlzoo.net 8. 美國.印度和中國(USA, India, China)是人口又大,同時面積又大的國家.排除這些國家. 顯示以人口或面積為大國的國家,但不能同時兩者.顯示國家 ...

  8. 关于webpack高版本向低版本切换 如何切换?

    卸载:npm uninstall webpack -g 重新安装:npm install webpack@3.7.1 -g 直接安装指定版本就行了,如安装 2.4.1 版:cnpm install w ...

  9. NASA CEA 安装指南

    有用的网站: http://www.engr.colostate.edu/~marchese/combustion08/cec.html 1 把三个压缩包解压到同一个Ubuntu文件夹CEAexec下 ...

  10. hdu 4845 : 拯救大兵瑞恩 (bfs+状态压缩)

    题目链接 #include<bits/stdc++.h> using namespace std; typedef long long LL; int n,m,p,s,k; ,,,-}; ...