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. 《剑指offer》面试题14 调整数组顺序使奇数位于偶数前面 Java版

    (输入整数数组,使所有奇数位于前半部分,所有偶数位于后半部分.) 我的方法:想到用两个下标分别表示奇数和偶数的界线,一个在开头,一个在末尾,判断每一个数字的类别,然后将它放入对应的范围内,移动下标,直 ...

  2. 20、前端知识点--html5和css3特性(一)

    [html5/css3]css中的flex弹性布局学习总结 https://blog.csdn.net/Umbrella_Um/article/details/99490209 用CSS/CSS3 实 ...

  3. js—input框中输入数字,动态生成内容的方法

    项目中需要在前端实现: 用户输入数字n,动态生成n个元素,删除n,自动清空n个元素(如图一): 用户输入数字n,失焦生成n个元素,再聚焦修改n,自动清空n个元素(如图二): 图一: 图二: 需求一实现 ...

  4. 【转】WebRTC之RTCP

    转自:https://blog.csdn.net/momo0853/article/details/88051312#RTPFBTransport_layer_FB_messagesNACKTrans ...

  5. hdu 4625 Dice(概率DP)

    Dice Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total Submi ...

  6. 【LeetCode】二叉查找树 binary search tree(共14题)

    链接:https://leetcode.com/tag/binary-search-tree/ [220]Contains Duplicate III (2019年4月20日) (好题) Given ...

  7. 三条路线告诉你如何掌握Spring IoC容器的核心原理

    原文链接:https://blog.csdn.net/bntx2jsqfehy7/article/details/78977178

  8. python 小工具 重命名当前文件夹内所有的文件,升序命名

    背景:一个朋友想升序重命名他的照片,但是太多了不想手动所以,emememem os这个模块,不用说,rename,filedir等 #conding=utf8 import os path = os. ...

  9. MYSQL数据库类型与JAVA类型对应表

    MYSQL数据库类型与JAVA类型对应表   MYSQL数据库类型与JAVA类型对应表 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型 索引(int) VARCHAR L+N VARCHA ...

  10. 036:DTL常用过滤器(5)

    slice过滤器: 类似于 Python 中的切片操作.示例代码如下: {{ some_list|slice:"2:" }} 以上代码将会给 some_list 从 2 开始做切片 ...