vue中jsonp插件的使用方法示例


Posted in Javascript onSeptember 10, 2020

通过jsonp简单获取接口数据,对了,注意下jsonp方法会自动添加callback

<template>
	<div class="sky">
		<h3>获取城市:</h3>
		<div class="skycon"></div>
	</div>
</template>

<script>
//导入jsonp插件
import jsonp from 'jsonp';

export default{
	data(){
		return {
			
		}
	},
	created(){
		//jsonp请求数据
		this.getLocation()
	},
	methods:{
		getLocation(){
			let url = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1599182599164"
			//jsonp方法会自动添加callback
			jsonp(url,{},(err,data)=>{
				//url地址 //{}参数 //(err,data)错误信息,获取的数据
				console.log(data)
			})
		}
	}
}
</script>

<style>
</style>

总结

到此这篇关于vue中jsonp插件的使用的文章就介绍到这了,更多相关vue中jsonp插件使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript编程起步(第五课)
Feb 27 Javascript
js如何判断不同系统的浏览器类型
Oct 28 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
Angular.JS通过指令操作DOM的方法
May 10 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 #Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 #Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 #Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
Sep 10 #Javascript
vue 导出文件,携带请求头token操作
Sep 10 #Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 #Javascript
jquery实现简单每周轮换的日历
Sep 10 #jQuery
You might like
php5中类的学习
2008/03/28 PHP
php遍历目录viewDir函数
2009/12/15 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php实现常见图片格式的水印和缩略图制作(面向对象)
2016/06/15 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
PHP实现将base64编码字符串转换成图片示例
2018/06/22 PHP
js 提交和设置表单的值
2008/12/19 Javascript
jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
2013/12/02 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
jQuery自定义多选下拉框效果
2017/06/19 jQuery
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python range实例用法分享
2020/02/06 Python
Python 解析xml文件的示例
2020/09/29 Python
python xlsxwriter模块的使用
2020/12/24 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
利用HTML5中的Canvas绘制一张笑脸的教程
2015/05/07 HTML / CSS
ALEX AND ANI:手镯,项链,耳环和更多
2017/04/20 全球购物
Omio意大利:全欧洲低价大巴、火车和航班搜索和比价
2017/12/02 全球购物
What is view? why do we have view?
2012/06/22 面试题
总会计师岗位职责
2014/02/19 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
商铺租房协议书范本
2014/12/04 职场文书
雨花台导游词
2015/02/06 职场文书
电影雨中的树观后感
2015/06/15 职场文书