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. impala删表,而hdfs上文件却还在异常处理

    Impala/hive删除表,drop后,hdfs上文件却还在处理方法: 问题原因分析,如下如可以看出一个属组是hive,一个是impala,keberas账号登录hive用户无法删除impala用户 ...

  2. 待补 http://acm.hdu.edu.cn/showproblem.php?pid=6602

    http://acm.hdu.edu.cn/showproblem.php?pid=6602 终于能够看懂的题解: https://blog.csdn.net/qq_40871466/article/ ...

  3. sql 时间函数大全

    1.        当前系统日期.时间    select getdate() 2. dateadd  在向指定日期加上一段时间的基础上,返回新的 datetime 值  例如:向日期加上2天  se ...

  4. win32 socket编程(五)——客户端实例(TCP)

    一.客户端操作流程 1.1 加载套接字库(WSAStartup()) 1.2创建套接字(socket()). 1.3向服务器发出连接请求(connect()). 对于客户端来说,它不需要绑定,可以直接 ...

  5. 只要三步,你就可以在github上发布网站了

    今天,看到github推送了一个新的消息,Publishing with GitHub Pages, now as easy as 1, 2, 3.总结起来就是在github将你的文档或者发布网页将会 ...

  6. pg_config - 检索已安装版本的 PostgreSQL 的信息

    SYNOPSIS pg_config {--bindir | --includedir | --includedir-server | --libdir | --pkglibdir | --confi ...

  7. 脚本_查看所有虚拟机磁盘以及 CPU 的使用量

    #!bin/bash#作者:liusingbon#功能:查看所有虚拟机磁盘使用量以及 CPU 使用量信息read -p "按任意键进入查看页面.比如按下Enter键" keyvir ...

  8. 前端每日实战:93# 视频演示如何用纯 CSS 创作一根闪电连接线

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可 ...

  9. Java第二阶段笔记

    抽象类不能创建对象 抽象类可以有构造方法成员变量成员方法静态方法final修饰的方法(只能被子类调用,不能被重写)抽象方法(可以有0个或多个) 抽象方法不能有方法体,只能以:结尾,只能存在于抽象方法中 ...

  10. centos 6.5 安装 nginx

    从nginx官网下载安装包:nginx-1.8.1.tar.gz,解压 tar xvf nginx-1.8.1.tar.gz -C /usr/local 安装依赖 yum install gcc yu ...