当前位置: 首页 > 编程笔记 >

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

通令
2023-03-14
本文向大家介绍vue中jsonp插件的使用方法示例,包括了vue中jsonp插件的使用方法示例的使用技巧和注意事项,需要的朋友参考一下

通过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插件使用内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍VUE2.0中Jsonp的使用方法,包括了VUE2.0中Jsonp的使用方法的使用技巧和注意事项,需要的朋友参考一下 本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据。 1.JSONP的用途和原理 使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域。确切地说,AJAX请求由于

  • 本文向大家介绍vue使用video插件vue-video-player的示例,包括了vue使用video插件vue-video-player的示例的使用技巧和注意事项,需要的朋友参考一下 一、安装插件 二、配置插件   在main.js中全局配置插件 三、使用插件   在vue组件中的程序如下: 四、结果   结果如图所示:   vue-video-player的npm社区地址:https://w

  • 本文向大家介绍vue使用laydate时间插件的方法,包括了vue使用laydate时间插件的方法的使用技巧和注意事项,需要的朋友参考一下 之前在做vue项目时使用iviewUI库中的DatePicker组件,发现DatePicker使用起来比较麻烦,尤其是对时间精确度上的限制不尽人意,操作起来也比较繁琐,总之在处理一系列时间组件相互联动上存在一大堆问题,比如 DatePicker时间组件 时间精

  • 本文向大家介绍在vue中使用setInterval的方法示例,包括了在vue中使用setInterval的方法示例的使用技巧和注意事项,需要的朋友参考一下 昨天在用vue开发项目的时候遇到一个坑,在群友的探讨中,成功的解决了这一问题。 具体情形如下:使用vue开发,在页面中有一个人数统计组件,人数统计是要动态变化数据的,由于目前没有真实数据,那么我想的是用随机数和setInterval来改变dat

  • 本文向大家介绍clipboard在vue中的使用的方法示例,包括了clipboard在vue中的使用的方法示例的使用技巧和注意事项,需要的朋友参考一下 简介 页面中用 clipboard 可以进行复制粘贴,clipboard能将内容直接写入剪切板 安装 使用方法一 使用方法二 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍vue使用jsonp抓取qq音乐数据的方法,包括了vue使用jsonp抓取qq音乐数据的方法的使用技巧和注意事项,需要的朋友参考一下 1、安装jsonp npm install jsonp 2、创建jsonp.js文件,内容如下: 3、创建confiig.js文件,内容如下: 3、创建recommend.js文件,内容如下: 4、在组件中使用,如musicHall.vue中 5、总结