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 相关文章推荐
javascript开发中因空格引发的错误
Nov 08 Javascript
firebug的一个有趣现象介绍
Nov 30 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
Apr 25 Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 Javascript
35个最好用的Vue开源库(史上最全)
Jan 03 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
node.js如何自定义实现一个EventEmitter
Jul 16 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 checkbox 取值详细说明
2010/08/19 PHP
php中is_null,empty,isset,unset 的区别详细介绍
2013/04/28 PHP
php 批量替换html标签的实例代码
2013/11/26 PHP
用PHP代码给图片加水印
2015/07/01 PHP
Thinkphp结合AJAX长轮询实现PC与APP推送详解
2017/07/31 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
thinkphp5修改view到根目录实例方法
2019/07/02 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
详解JavaScript 的变量
2019/03/08 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
2019/08/27 jQuery
vue-resourc发起异步请求的方法
2020/02/11 Javascript
JavaScript通如何过RGraph实现动态仪表盘
2020/10/15 Javascript
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
安装PyInstaller失败问题解决
2019/12/14 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
AJAX的全称是什么
2012/11/06 面试题
中药专业大学生医药工作求职信
2013/10/25 职场文书
敬老文明号事迹材料
2014/01/16 职场文书
物业工程部岗位职责
2015/02/11 职场文书
个人培训总结
2015/03/05 职场文书
2015年暑期社会实践活动总结
2015/03/27 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
Python3中最常用的5种线程锁实例总结
2021/07/07 Python
详解SQL的窗口函数
2022/04/21 Oracle
Nginx利用Logrotate实现日志分割
2022/05/20 Servers