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


Posted in Javascript onNovember 09, 2019

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之后, 相当于在vue实例(this)身上新增了一些方法或对象(如:$http)
   this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', //jsonp参数一: 跨域请求接口;
   {
    params:{  //jsonp交互走的是get形式(不是post), 传递参数用params
     wd:'a'
    },
    jsonp:'cb' //接口的callback名字, vue默认名字为"callback"
   }, //jsonp参数二: 传到的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请求百度搜索的接口示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI API 中文文档 - Tree树使用介绍
Nov 19 Javascript
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 #Javascript
解决vue组件中click事件失效的问题
Nov 09 #Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 #Javascript
Vue根据条件添加click事件的方式
Nov 09 #Javascript
浅谈vuex中store的命名空间
Nov 08 #Javascript
解决$store.getters调用不执行的问题
Nov 08 #Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 #Javascript
You might like
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP的面试题集
2006/11/19 PHP
URL Rewrite的设置方法
2007/01/02 PHP
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php表单加入Token防止重复提交的方法分析
2016/10/10 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
JS下载文件|无刷新下载文件示例代码
2014/04/17 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
jQuery选择器源码解读(三):tokenize方法
2015/03/31 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
从vue基础开始创建一个简单的增删改查的实例代码(推荐)
2018/02/11 Javascript
原生JS实现的轮播图功能详解
2018/08/06 Javascript
JS函数动态传递参数的方法分析【基于arguments对象】
2019/06/05 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
Python处理Excel文件实例代码
2017/06/20 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
python滑块验证码的破解实现
2019/11/10 Python
pytorch 求网络模型参数实例
2019/12/30 Python
python异常处理try except过程解析
2020/02/03 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
积极分子思想汇报
2014/01/04 职场文书
初婚初育证明
2014/01/14 职场文书
机关领导查摆四风思想汇报
2014/09/13 职场文书
2016年教师节慰问信
2015/12/01 职场文书