Vue案例:利用jsonp跨域做百度下拉菜单
今天又是充满希望的一天,就跟着案例教程做了一个vue的小项目,但是虽然说很简单,但是在学习的过程中,对于没有多少js的基础的人来说
是比较困难的,项目的关键的地方就是用了vue的三个进行交互的方法,get,post,jsonp
--语法
引入vue交互模块,resource.js,然后直接在方法中this.$http.get(post(jsonp)) 第一个参数是url路径,第二个参数是数据,然后通过then.funcition,分别是成功返回的方法,和失败返回的方法
--需要特别提示一点的就是在post的提交的时候需要把emulateJSON:true,加入到第三个参数中并且用{}包裹起来
--在jsonp跨域中,callback的默认名字就是callback,但是在百度中,默认的名字为cb,所以在调用接口的时候,需要声明callback的名字为cb,所以要在第三个参数中声明jsonp:'cb',这样我们就可以正常调用了。
po一下代码,代码的功能就是简单的百度搜索功能,输入东西按回车也会直接跳到一个百度搜素结果页中,调用了windows.open配合百度的搜索接口,把
参数换成输入框中的数据即可。
<!DOCTYPE html>
<meta charset="UTF-8">
<title>百度下拉菜单</title>
<script src="bootstrap.js"></script>
<script src="bootstrap.min.css"></script>
<script src="vue.js"></script>
<script src="vue-resource.js"></script>
.grey{
background: #ccc;
}
<div id="box">
<input type="text" class="input-group" v-model="text" @keyup="get($event)" @keydown.down="down()" @keydown.up.prevent="up()" @keydown.enter="enter()">
<ul>
<li class="list-group" v-for="(li,$index) in mydata" :class="{grey:$index==now}">{{li}}</li>
</ul>
<p v-show="mydata.length==0">暂无数据。。。</p>
</div>