8.vue-resource 数据请求基本实现
1.vue-resource 实现 get, post, jsonp请求：https://github.com/pagekit/vue-resource
注意： 除了 vue-resource 实现数据 Ajax 请求之外，还可以使用 `axios` 的第三方包实现实现数据的请求
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<!-- 注意：vue-resource 依赖于 Vue，所以先后顺序要注意 -->
<!-- 在Vue上挂载了一些属性，比如：this.$http.post -->
<script src="./lib/vue-resource-1.3.4.js"></script>
</head> <body>
<div id="app">
<input type="button" value="get请求" @click="getInfo">
<input type="button" value="post请求" @click="postInfo">
<input type="button" value="jsonp请求" @click="jsonpInfo">
</div> <script>
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {
getInfo() { // 发起get请求
//当发起get请求之后， 通过 .then 来设置成功的回调函数
this.$http.get('http://vue.studyit.io/api/getlunbo').then(function (result) {
//通过 result.body 拿到服务器返回成功的数据
//console.log(result.body)
})
},
postInfo() { // 发起 post请求,服务器接收表单数据格式的数据：application/x-wwww-form-urlencoded
//手动发起的 Post 请求，默认没有表单格式，所以，有的服务器处理不了
//第二个参数为提交给服务器的参数
//通过 post 方法的第三个参数， { emulateJSON: true } 设置提交的内容类型为普通表单数据格式
this.$http.post('http://vue.studyit.io/api/post', {}, { emulateJSON: true }).then(result => {
console.log(result.body)
})
},
jsonpInfo() { //发起JSONP 请求
this.$http.jsonp('http://vue.studyit.io/api/jsonp').then(result => {
console.log(result.body)
})
}
}
});
</script>
</body>
</html>
8.vue-resource 数据请求基本实现的更多相关文章
- vue axios数据请求get、post方法的使用
我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...
- vue中数据请求的三种方法
注意请求可能存在跨域问题,需要去配置好 这三种建议使用axios 1.resource Vue 要实现异步加载需要使用到 vue-resource 库. Vue.js 2.0 版本推荐使用 axios ...
- vue axios 数据请求实现
1.安装nginx npm install axios --save-dev cnpm install axios --save-dev 使用淘宝镜像 保存依赖文件到本地 装好了.packjson.j ...
- vue---发送数据请求的一些列的问题
使用vue做数据请求,首先考虑的是封装请求方法request.js import axios from 'axios' import Qs from 'qs' // 创建一个axios实例 const ...
- 02 Vue之vue对象属性功能&axios数据请求实现
1.过滤器的声明和使用 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 1 使用Vue.filter()进行全局定义 2 在v ...
- day 74 vue 2 axios数据请求 以及组件的学习
前情提要: vue 学习二: 一: 通过axios实现数据请求 1:json数据语法 json数据对象类似于JavaScript中的对象,但是它的键对应的值里面是没有函数方法的,值可以是普通变量, ...
- VUE 数据请求和响应(axios)
1. 概述 1.1 简介 axios是一个基于Promise(本机支持ES6 Promise实现) 的HTTP库,用于浏览器和 nodejs 的 HTTP 客户端.具有以下特征: 从浏览器中创建 XM ...
- vue中Axios请求豆瓣API数据并展示到Swipe中
vue中Axios请求豆瓣API数据并展示到Swipe中 1.首先是安装Axios: 安装方法cnpm install axios --save 等待npm安装完毕: 2.在main.js中引入axi ...
- vue数据请求显示loading图
一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...
- vue resource 携带cookie请求 vue cookie 跨域
vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...
随机推荐
- 如何使用 AWS Auto Scaling 按需动态增加和减少实例
目录 一.背景需求 二.配置步骤 2.1.创建 AMI 2.2.创建负载均衡目标组 2.3.创建 Classic Load Balancer 2.4.创建启动配置 2.5.创建 Auto Scalin ...
- 最新 乐游网络java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.乐游网络等10家互联网公司的校招Offer,因为某些自身原因最终选择了乐游网络.6.7月主要是做系统复习.项目复盘.Leet ...
- FCM实现手机推送，推送的方式，真机调试
FCM实现手机 1 下载Androidstudio 3.2 版本,之后新建一个项目 2 创建完项目之后查找文件AndroidMainifest.xml 3 访问网站注册一个自己的firebase的 ...
- python中文编码 - python基础入门(5)
python到目前为止,一共有两个版本,分别是2.x和3.x版本,根据官方正式通知2020年停止对python更新和维护,距离今天还有110天左右,所以正在学习python的小伙伴应该暗中庆幸一波. ...
- java--demo之图书馆管理系统
aaarticlea/jpeg;base64,/9j/4AAQSkZJRgABAQEAkACQAAD/4RDQRXhpZgAATU0AKgAAAAgABAE7AAIAAAADTXkAAIdpAAQAA ...
- PHP和Memcached - 在PHP中的应用 - Memcached类介绍 - 封装自己的Memcached类库
1.Memcached类的介绍 详见PHP官方文档:点击访问. 2.封装自己的Memcached类库 <?php namespace Cache\Lib; class MemCache { /* ...
- linux下添加用户并将文件夹授权给某一个用户
### linux下添加用户并将文件夹授权给某一个用户 背景:在做一个项目时,需要外包的前端人员调试测试环境的页面,但是又不能给他服务器的账号信息,就在服务器上新添加一个子账户,再给这个账户项目文件的 ...
- Python 中集合使用
集合在使用中由于自动虑重,而且效率特高,故在提取数据时用上,但是由于集合没有切片功能没有取第几个元素的功能,但是一直使用集合切片不报错,但是执行不下去,导致一直存在问题. 修改为list后正常 例如: ...
- 二、点亮LED
接着上一章,本章来实现控制LED的亮灭操作: 一.驱动框架 #include <linux/fs.h> #include <linux/init.h> /* 定义文件内私有结构 ...
- spring cloud微服务实践五
本篇我们来看看怎么实现spring cloud的配置中心. 在分布式系统中,特别是微服务架构下,可能会存在许多的服务,每个服务都会存在一个或多个的配置文件.那怎么多的配置文件的管理就会成为一个大问题. ...