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 相关文章推荐
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
微信小程序实现购物页面左右联动
Feb 15 Javascript
对于防止按钮重复点击的尝试详解
Apr 22 Javascript
layui 中select下拉change事件失效的解决方法
Sep 20 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
node.JS路径解析之PATH模块使用方法详解
Feb 06 Javascript
js实现滚动条自动滚动
Dec 13 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
基于PHP实现用户在线状态检测
2020/11/10 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
指定位置如果有图片显示图片,无图片显示广告的JS
2010/06/05 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
JS判断客户端是手机还是PC的2个代码
2014/04/12 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
JS实现点击按钮后框架内载入不同网页的方法
2015/05/05 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
JS类的定义与使用方法深入探索
2016/11/26 Javascript
学好js,这些js函数概念一定要知道【推荐】
2017/01/19 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
js form表单input框限制20个字符,10个汉字代码实例
2019/04/12 Javascript
JavaScript学习教程之cookie与webstorage
2019/06/23 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
对python中的logger模块全面讲解
2018/04/28 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python列表使用实现名字管理系统
2019/01/30 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
Python如何使用OS模块调用cmd
2020/02/27 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
小学生母亲节演讲稿
2014/05/07 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
开学典礼致辞
2015/07/29 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书
详解Spring Boot使用系统参数表提升系统的灵活性
2021/06/30 Java/Android
用JS创建一个录屏功能
2021/11/11 Javascript