vue-resource:jsonp請(qǐng)求百度搜索的接口示例
1. yarn add vue-resource
2. main.js引入vue-resource
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'
import router from './router'
import VueResource from 'vue-resource'
Vue.config.productionTip = false
Vue.use(MintUI)
Vue.use(VueResource)
new Vue({
router,
render: h => h(App)
}).$mount('#app')
3. About.vue
<template>
<mt-button type="primary" size="small" @click="get()">default</mt-button>
</template>
<script>
export default {
name: 'about',
data(){
return{
}
},
methods:{
get(){ //引入vue-resource之后, 相當(dāng)于在vue實(shí)例(this)身上新增了一些方法或?qū)ο?如:$http)
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', //jsonp參數(shù)一: 跨域請(qǐng)求接口;
{
params:{ //jsonp交互走的是get形式(不是post), 傳遞參數(shù)用params
wd:'a'
},
jsonp:'cb' //接口的callback名字, vue默認(rèn)名字為"callback"
}, //jsonp參數(shù)二: 傳到的params和callback類型
).then(function(res){ //固定形式: jsonp('',{params{},jsonp:'cb'}).then(function(){'成功'},function(){'失敗'});
alert(res.data.s);
},function(res){
alert(res.status);
});
}
}
}
</script>
以上這篇vue-resource:jsonp請(qǐng)求百度搜索的接口示例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3如何通過(guò)provide和inject實(shí)現(xiàn)多層級(jí)組件通信
這篇文章主要介紹了vue3如何通過(guò)provide和inject實(shí)現(xiàn)多層級(jí)組件通信,本文通過(guò)實(shí)例代碼給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
vue彈窗里面使用echarts不顯示的問(wèn)題及解決
這篇文章主要介紹了vue彈窗里面使用echarts不顯示的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01
elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法
最近參與web開(kāi)發(fā)時(shí),讓我解決一個(gè)elementui控制內(nèi)容單行顯示,下面這篇文章主要給大家介紹了關(guān)于elementUI中el-table表頭和內(nèi)容全部一行顯示完整的方法,需要的朋友可以參考下2023-06-06
vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息的解決
這篇文章主要介紹了vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-02-02
VUE插件vue-treeselect的使用及說(shuō)明
這篇文章主要介紹了VUE插件vue-treeselect的使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。2023-07-07
Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余字?jǐn)?shù)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)顯示textarea剩余文字?jǐn)?shù)量,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
解決vue-cli單頁(yè)面手機(jī)應(yīng)用input點(diǎn)擊手機(jī)端虛擬鍵盤彈出蓋住input問(wèn)題
今天小編就為大家分享一篇解決vue-cli單頁(yè)面手機(jī)應(yīng)用input點(diǎn)擊手機(jī)端虛擬鍵盤彈出蓋住input問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue第三方庫(kù)中存在擴(kuò)展運(yùn)算符報(bào)錯(cuò)問(wèn)題的解決方案
這篇文章主要介紹了vue第三方庫(kù)中存在擴(kuò)展運(yùn)算符報(bào)錯(cuò)問(wèn)題,本文給大家分享解決方案,通過(guò)結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue3+elementui plus創(chuàng)建項(xiàng)目的方法
這篇文章主要介紹了Vue3+elementui plus創(chuàng)建項(xiàng)目的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12

