Vue:(四)Ajax(Vue-Resource)
Vue 要实现异步加载需要使用到 vue-resource 库。(挂载到vue实例上)
(一)Vue-Resource引入
- <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
- npm install vue-resource --save
(二)基础API
- get(url, [options])
- head(url, [options])
- delete(url, [options])
- jsonp(url, [options])
- post(url, [body], [options])
- put(url, [body], [options])
- patch(url, [body], [options])
(三)参数
(四)使用
- Get请求
- Post请求
- JSONP请求
- Http请求
- 全局拦截器使用
//methods外写全局地址,则请求中地址写文件名即可
http:{
root:"http://xxxxxx"
}
(五)Get请求
methods:{
get:function(){
this.$http.get("package.json",{
params:{
userId:"101"
},
headers:{
token:"abcd"
}
}).then(res=>{
this.msg=res.data;
},error=>{
this.msg=error;
});
}
}
(六)Post请求
methods:{
post:function(){
this.$http.post("package.json",{
userId:"102"
},{
headers:{
access_token:"abc"
}
}).then(function(res){
this.msg=res.data;
});
}
}
(七)JSONP请求
methods:{
jsonp:function(){
this.$http.jsonp("http://xxxxxx", {
this.msg=res.data;
});
}
}
(八)Http请求
methods:{
http:function(){
url:"package.json",
methods:'GET',
params:{
userId:"103"
},
headers:{
token:"123"
},
timeout:50,
before:function(){
console.log("before init")
}
}).then(function(res){
this.msg=res.data;
});
}
(九)全局拦截器使用
mount:function(){
Vue.http.interceptors.push(function(request,next){
console.log("request init.");
next(function(response){
console.log("response init.");
return response;
});
});
}
Vue:(四)Ajax(Vue-Resource)的更多相关文章
- 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- vue实现ajax滚动下拉加载,同时具有loading效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- vue学习笔记(四)——Vue实例以及生命周期
1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) | |-------el (提供一个在页面上已存在的 DOM 元素作为 V ...
- Vue中ajax返回的结果赋值
这是第二次在项目中遇到此问题,ajax请求成功后在success函数中为Vue实例data里的变量赋值,却失败了 new Vue({ el:'#app', data:{ msg:'' }, creat ...
- 四: 使用vue搭建网站前端页面
---恢复内容开始--- 在搭建路由项目的时候的基本步骤 一:创建项目 安装好vue 搭好环境 (步骤在上篇博客中) 进入项目目录 cd 目录路径/ 目录名 创建项目 ...
- vue实战(一):利用vue与ajax实现增删改查
vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...
- vue的ajax
vue的ajax常见的有两种 ,一种是 vue-resource,一种是axios vue-resource: 是vue的插件,非官方库, vue1.x 使用广泛 如何使用: 先在vue的脚本架上安装 ...
- Vue基础系列(四)——Vue中的指令(上)
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- vue发送ajax请求
一.vue-resource 1.简介 一款vue插件,用于处理ajax请求,vue1.x时广泛应用,现不被维护. 2.使用流程 step1:安装 [命令行输入] npm install vue-re ...
- 编程小白入门分享四:Vue的安装及使用快速入门
一.VUE简介 vue是一个JavaMVVM库,是一套用于构建用户界面的渐进式框架,是初创项目的首选前端框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.它是轻量级的,它有很多独立 ...
随机推荐
- Gym 101775B - Scapegoat - [贪心+优先队列]
题目链接:http://codeforces.com/gym/101775/problem/B Aori is very careless so she is always making troubl ...
- Win7升Windows10有获取通知,但是就不推送的解决方法
1. 删除“C:\Windows\SoftwareDistribution\Download”下所有文件2. 以管理员身份运行命令提示符,输入“wuauclt.exe /updatenow”并回车(注 ...
- 15.3-uC/OS-III资源管理(多值信号量)
多值信号量是 uC/OS 操作系统的一个内核对象, 主要用于标志事件的发生和共享资源管理. 1.如果想要使用多值信号量,就必须事先使能多值信号量. 多值信号量的使能位于“os_cfg.h”. 2.OS ...
- xutils android studio引用问题
然后rebuild--->关闭项目-->重启,ok public class MyApplication extends Application { @Override public vo ...
- 用git如何把单个文件回退到某一版本
暂定此文件为a.jsp 1.首先到a.jsp所在目录: 通过 git log a.jsp 查看a.jsp的更改记录 2.找到想要回退的版本号:例如 fcd2093 通过 git reset fcd ...
- this inspection detects names that should resolved but don't. Due to dynamic dispatch and duck typing, this is possible in a limited but useful number of cases. Top-level and class-level items are sup
输入第一行代码:import logging;logging.basicConfig(level==logging.INFO) 提示:this inspection detects names tha ...
- postman 做接口测试之学习笔记
Postman 之前是作为Chrome 的一个插件,现在要下载应用才能使用. 以下是postman 的界面: 各个功能区的使用如下: 快捷区: 快捷区提供常用的操作入口,包括运行收藏夹的一组测试数据, ...
- git bash支持中文
打开Git Bash窗口-->右键-->Options-->text Locale:设置为zh_CN Charachter set:设置为UTF-8 保存,重新打开Git Bash, ...
- day03 Python字典dict的增删查改及常用操作
字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据.python对key进行哈希函数运算,根据计算的结果决定value的存储地址,所以字典是无序存储的,且key必须是可 ...
- zw量化交易·实盘操作·系列培训班
参见: <zw量化交易·实盘操作·系列培训班> http://blog.sina.com.cn/s/blog_7100d4220102w0q5.html