vue的ajax常见的有两种 ,一种是 vue-resource,一种是axios
vue-resource:
是vue的插件,非官方库, vue1.x 使用广泛
如何使用:
先在vue的脚本架上安装vue-resorce库
npm install vue-resource --save
 
在我们需要用到ajax的页面上引入,一般我是直接在main.js文件上引入,后面就不需再次引入,直接引用
// 引入模块
import VueResource from 'vue-resource' ,

// 使用插件
Vue.use(VueResource) // 通过 vue/组件对象发送 ajax 请求
this.$http.get('/someUrl').then((response) => {
// success callback
console.log(response.data) //返回结果数据
}, (response) => {
// error callback
})
 
 
axios的用法:
跟vue-resource的用法类似,用之前需要安装axios库
npm install axios --save
 
axios直接引入后,就可直接调用,不用像vue-resource,插入插件()省了一小步)
// 引入模块
import axios from 'axios'
// 发送 ajax 请求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回结果数据
})
.catch(error => {
console.log(error.message)
})

vue的ajax的更多相关文章

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

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

  2. Vue中ajax返回的结果赋值

    这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...

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

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

  4. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  5. jQuery和vue 设置ajax全局请求

    一个很常见的问题,如果用户登录网站session过期,需要用户返回登录页面重新登录. 如果是http请求可以在后台设置拦截器,统一拦截并跳转.但是ajax方法并不能通过后台直接跳转. 所以我们可以写一 ...

  6. vue使用ajax

    1.Vue的Ajax基本用法 在vue中用Ajax需要用到vue.js和vue-resource.js; vue-resource.js的下载地址:https://cdn.staticfile.org ...

  7. vue根据ajax绑定数数。。

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

  8. vue 发送ajax请求

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

  9. vue相关ajax库的使用

    相关库: vue-resource: vue插件, 多用于vue1.x axios: 第三方库, 多用于vue2.x vue-resource使用 // 引入模块 import VueResource ...

随机推荐

  1. socket 释放全过程

    1.close()函数:立即返回到进程 int close(int sockfd);     //返回成功为0,出错为-1. close 一个套接字的默认行为是把套接字标记为已关闭,然后立即返回到调用 ...

  2. i++操作非原子的验证代码

    package incre; public class Incre { public static void main(String[] args) { class Count implements ...

  3. kindedtor的基本使用

    首先需要进入官网下载kineditor相关文件: 然后写代码: <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  4. ListItemType.AlternatingItem 和 ListItemType.Item

    项目中后台绑定Reapter项时,判断 if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.Alte ...

  5. Codeforce-A-Two distinct points(暴力)

    output standard output You are given two segments [l1;r1][l1;r1] and [l2;r2][l2;r2] on the xx-axis. ...

  6. 前端基础------jquer y学习

    一. jquery是什么 快速,简洁,轻量级的JavaScript库(JavaScript框架)使用户可以快速的操作HTML document,实现动画效果,并方便的地为网站提供AJAX交互.文档全面 ...

  7. tomcat+nginx+memcache

    tomcat安装 tar zxf jdk-7u79-linux-x64.tar.gz -C /usr/local/ cd /usr/local/ ln -s jdk1.7.0_79/ java ]# ...

  8. js实现放大镜效果

    原理: 鼠标在小图片上移动时,通过捕捉鼠标在小图片上的位置,定位大图片的相应位置: 放大镜的移动方向和大图片的移动方向:横向和纵向都是相反,才可以保证同步: 需要元素:大图和小图,存放大图和小图的容器 ...

  9. TCP/IP协议中几个缩写词的含义 MSL、TTL和RTT 报文最大生存时间 跳数(即生存时间) cs往返时间 MSL要大于TTL知道为什么吗?

    MSL.TTL和RTT简介 1.MSL是Maximum Segment Lifetime英文的缩写,中文可以译为“报文最大生存时间”,他是任何报文在网络上存在的最长时间,超过这个时间报文将被丢弃.因为 ...

  10. python_元组 学习

    一.创建元组 代码: name=(‘chinese’,’gansu’,’beijing’) 创建空元组 name=() 元组中只包含一个元素时,需要在玄素后面加逗号(,)消除歧义: name=(‘ch ...