vue-resource:jsonp請求百度搜索的接口示例

更新時間：2019年11月09日 09:41:12 作者：254980080

今天小編就為大家分享一篇vue-resource:jsonp請求百度搜索的接口示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

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實例(this)身上新增了一些方法或?qū)ο?如:$http)
   this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', //jsonp參數(shù)一: 跨域請求接口;
   {
    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請求百度搜索的接口示例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

關(guān)于vuex狀態(tài)刷新網(wǎng)頁時數(shù)據(jù)被清空問題及解決
這篇文章主要介紹了關(guān)于vuex狀態(tài)刷新網(wǎng)頁時數(shù)據(jù)被清空問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實例
這篇文章主要介紹了vue等兩個接口都返回結(jié)果再執(zhí)行下一步的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
利用Vue-cli搭建Vue項目框架的教程詳解
這篇文章主要為大家詳細(xì)介紹了利用Vue-cli搭建Vue項目框架的相關(guān)資料，對大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下
2023-02-02
Vue3從0搭建Vite打包組件庫使用詳解
這篇文章主要為大家介紹了Vue3從0搭建Vite打包組件庫使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
Vue中Mixin&extends的詳細(xì)使用教程
vue提供了mixin、extends配置項,最近使用中發(fā)現(xiàn)很好用,下面這篇文章主要給大家介紹了關(guān)于Vue中Mixin&extends的詳細(xì)使用方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-02-02
詳解webpack打包vue項目之后生成的dist文件該怎么啟動運行
這篇文章主要介紹了詳解webpack打包vue項目之后生成的dist文件該怎么啟動運行,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
詳解Vue 事件修飾符capture 的使用
capture事件修飾符的作用是給元素添加一個監(jiān)聽器，當(dāng)元素發(fā)生冒泡時，先觸發(fā)帶有該修飾符的元素。這篇文章給大家介紹了Vue 事件修飾符capture 的使用，需要的朋友參考下吧
2017-12-12
Vue3子組件向父組件傳值的兩種實現(xiàn)方式
近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2的并沒有太大的區(qū)別,這篇文章主要給大家介紹了關(guān)于Vue3子組件向父組件傳值的兩種實現(xiàn)方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-04-04
Taro+vue3?實現(xiàn)電影切換列表功能
我們做類似于貓眼電影的小程序或者H5?的時候?我們會做到那種?左右滑動的電影列表,這種列表一般帶有電影場次,我這個項目是基于Taro?+vue3?+ts?來寫的用的組件庫也是京東的nut-ui以上的代碼和組件也有的是我二次封裝的組件,對vue3電影切換列表知識,感興趣的朋友一起看看吧
2024-01-01
vue3基礎(chǔ)知識剖析
筆者這篇文章會從vue3基礎(chǔ)的知識點開始剖析，特別是在將composition?API的時候，在代碼示例中不會一上來就使用setup語法糖，而是用早期的setup函數(shù)，這樣方便于初學(xué)的小伙伴們理解跟學(xué)習(xí)
2022-08-08