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>
<html lang="en">
<head>
<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></head>
<style>
.grey{
background: #ccc;
}</style>
<body>
<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><script>
new Vue({
el:'#box',
data:function () {
return{
text:'',
mydata:[],
now:'-1'
}
},
methods:{
get:function (ev) {
if(ev.keyCode==38 || ev.keyCode==40)return;
this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
wd:this.text
},{
jsonp:'cb'
}).then(function (code) {
this.mydata=code.data.s;
},function (code) {
//失败的返回结果
alert(code.data);
})
},
down:function () {
this.now++;
if(this.now==this.mydata.length){
this.now=-1
};
this.text=this.mydata[this.now]
},
up:function () {
this.now--;
if(this.now==-2){
this.now=this.mydata.length-1;
};
this.text=this.mydata[this.now]
},
enter:function () {
window.open('https://www.baidu.com/s?wd='+this.text);
this.text=''
}
}
})</script>
</body>
</html>
