vue学习笔记（三）---- vue-resource
一、使用vue-resource发起get请求
github仓库地址：https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
<body>
<div id="app">
<input type="button" value="get请求" @click="vueget()"/>
</div>
<script src="../lib/vue-resource-1.3.4.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods:{
vueget(){
console.log(this.$http)
})
}
}
})
</script>
</body>
如果在没有导入vue-resource的时候
console.log(this.$http) ====> undefined
如果导入了vue-resource
那么console.log(this.$http) 结果如下
<div id="app">
<input type="button" value="get请求" @click="vueget()"/>
</div>
methods:{
vueget(){
// console.log(this.$http)
this.$http.get('http://api.cms.liulongbin.top/api/getlunbo').then(function (data) {
console.log(data)
console.log(data.body)
console.log(data.body.message)
})
}
}
来吧展示：
二、使用async和awite来修饰实现数据请求的异步方法
methods:{
async vueget(){
//这样一修饰，在内部就可以使用await
//使用await去修饰法异步请求的方式
//这样后面就不用点then了
// await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')
//定义一个变量去接收一下请求的数据
var result = await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')
console.log(result)
//这个方法不用.then 直接await调用this.$http.get()，然后输入返回值
}
}
来吧展示：
从一个对象中使用结构赋值 {} 拿到对应的属性
var { body } = await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')
console.log(body)
console.log(body.message)
来吧展示：
三、使用vue-resource发起post请求
<input type="button" value="post请求" @click="vuepost()"/>
async vuepost(){
var {body} = await
// post 方法接收三个参数：
// 参数1： 要请求的URL地址
// 参数2： 要发送的数据对象
// 参数3： 指定post提交的编码类型为 application/x-www-form-urlencoded
this.$http.post('http://api.cms.liulongbin.top/api/post',{
name:'千夏',age:18,hobbies:'吃饭睡觉敲代码'
})
console.log(body)
}
来吧展示：
四、使用vue-resource发起jsonp请求
<input type="button" value="jsonp请求" @click="vuejsonp()"/>
async vuejsonp(){
var {body} = await this.$http.jsonp('http://api.cms.liulongbin.top/api/jsonp')
console.log(body)
}
来吧展示：
五、使用axios结合vue发起get请求
- 导入axios文件
<script src="../lib/axios-v0.17.1.js"></script>
- 在vm区域中，触发点击事件
<div id="app">
<input type="button" value="get请求" @click="vueget()"/>
</div>
- 使用axios结合vue发起get请求
methods:{
async vueget(){
const result = await axios.get('http://api.cms.liulongbin.top/api/getlunbo')
//也可以写成
//const {data} = await axios.get('http://api.cms.liulongbin.top/api/getlunbo')
//console.log(data)
console.log(result)
}
}
来吧展示：
如果想要axios和vue-resource中的get一样使用this.$http.get()去发送请求，方法如下：
//把axios挂载到vue构造函数的原型上
Vue.prototype.$http = axios
var vm = new Vue({
el: '#app',
data: {
},
methods:{
async vueget(){
const {data} = await this.$http.get('http://api.cms.liulongbin.top/api/getlunbo')
console.log(data)
}
}
})
六、 JSONP的实现原理
- 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
- 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
- 具体实现过程：
- 先在客户端定义一个回调方法，预定义对数据的操作；
- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
- 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
vue学习笔记（三）---- vue-resource的更多相关文章
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
- Vue学习笔记三：v-bind，v-on的使用
目录 v-bind:绑定属性值,内容相当于js,缩写: v-on:绑定方法,缩写@ 总结 v-bind:绑定属性值,内容相当于js,缩写: 我添加了一个input标签,如下 <input typ ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记：vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- VUE 学习笔记 三 模板语法
1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...
- vue学习笔记(三)：vue-cli脚手架搭建
一:安装vue-cli脚手架: 1:为了确保你的node版本在4.*以上,输入 node -v 查看本机node版本,低于4请更新. 2:输入: npm install -g vue-cli ...
- vue学习笔记三：常见的表单绑定
<template> <div id="app"> <input type="checkbox" id="checked ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
随机推荐
- Python基础之函数：4、二分法、三元表达式、生成/推导式、匿名函数、内置函数
目录 一.算法简介之二分法 1.什么是算法 2.算法的应用场景 3.二分法 二.三元表达式 1.简介及用法 三.各种生成式 1.列表生成式 2.字典生成式 3.集合生成式 四.匿名函数 五.常见内置函 ...
- 论文笔记 - PRISM: A Rich Class of Parameterized Submodular Information Measures for Guided Subset Selection
Motivation 与 Active Learning 类似,Target Learning 致力于 挑选外卖更"感兴趣"的数据,即人为为更重要的数据添加 bias.例如我们当前 ...
- python中展示json数据不换行(手动换行)
https://blog.csdn.net/chichu261/article/details/82784904 Settings ->keymap -> 在搜索框输入 wraps -&g ...
- prefetch和preload
前面的话 基于VUE的前端小站改造成SSR服务器端渲染后,HTML文档会自动使用preload和prefetch来预加载所需资源,本文将详细介绍preload和prefetch的使用 资源优先级 在介 ...
- Golang 实现时间戳和时间的转化
何为时间戳: 时间戳是使用数字签名技术产生的数据,签名的对象包括了原始文件信息.签名参数.签名时间等信息.时间戳系统用来产生和管理时间戳,对签名对象进行数字签名产生时间戳,以证明原始文件在签名时间之前 ...
- 深度学习之logistics回归
在开始之前,事先声明本文参考[中文][吴恩达课后编程作业]Course 1 - 神经网络和深度学习 - 第二周作业_何宽的博客-CSDN博客_吴恩达课后编程作业 加上自己的理解,希望可以不用重复看吴恩 ...
- 抓包整理————ip 协议四[十五]
前言 简单了解一下ip 协议选路问题. 正文 比如host1 到 host2是直接传输,因为host1和 host2 是同一交换机,直接arp表知道对方的mac. 第二种是他们是不同网段之间通信. 第 ...
- 【图像处理笔记】SIFT算法原理与源码分析
[图像处理笔记]总目录 0 引言 特征提取就是从图像中提取显著并且具有可区分性和可匹配性的点结构.常见的点结构一般为图像内容中的角点.交叉点.闭合区域中心点等具有一定物理结构的点,而提取点结构的一般思 ...
- .net 温故知新：【10】.NET ORM框架EFCore使用入门之CodeFirs、DBFirst
前言:本系列是我自己学习.net相关知识,以便跟上.net跨平台的步伐,目前工作原因基本在.net Framework4.7以下,所以才有了这一系列的学习总结,但是并不是从基本的C#语法和基础知识开始 ...
- Ubuntu20.04更换国内镜像源（阿里、网易163、清华、中科大）
更换方法 Ubuntu采用apt作为软件安装工具,其镜像源列表记录在/etc/apt/source.list文件中. 首先将source.list复制为source.list.bak备份,然后将sou ...