vue2.0，jsonp的一个小案例请求百度搜索的接口

我用的是vue-cli，可以自己去下一个试试看！
JSONP(JSON with Padding)是JSON的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的script 元素是一个例外。利用 script 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

这里用的”vue-resource”里的示例；
下面开始了：

#html:

<template>
  <div class="bar">
      <div id="box">
        <h1>jsonp请求百度接口</h1>
        <input type="text" v-model="t1" @keyup="get($event)" placeholder="请输入您要搜索的关键词" class="input_s"  @keydown.down="changeDown()" @keydown.up.prevent="changeUp()">
        <ul class="ul_se">
            <li v-for="(value,$index) in myData" :class="{gray:$index==now}" @click="clickChose($index)">
                {{value}}
            </li>
        </ul>
        <p v-show="myData.length==0">暂无数据...</p>
    </div>
  </div>
</template>

#js:

<script>
    export default {
        data() {
            return {
                myData:[],
                    t1:'',
                    now:-1,
            }
        },
         methods:{
             get(ev){ //键盘操作
                  if(ev.keyCode==38 || ev.keyCode==40)
                        return;
                 if(ev.keyCode==13){
                       window.open('https://www.baidu.com/s?wd='+this.t1);
                       this.t1='';
                }
                this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", //跨域请求接口
                    {
                    params: {
                        wd:this.t1,
                    },
                    jsonp:'cb'
                }).then(function(res){
                    this.myData = JSON.parse(res.bodyText).s
                },function(){
                    console.log("请求失败！！！")
                });
              },
             changeDown(){ //下键选择
                this.now++;
                if(this.now==this.myData.length)this.now=-1;
                this.t1=this.myData[this.now];
            },
            changeUp(){ //上键选择
                this.now--;
                if(this.now==-2)this.now=this.myData.length-1;
                this.t1=this.myData[this.now];
            },
             clickChose($index){  //鼠标选择搜索关键词事件
                this.now = $index;
                this.t1=this.myData[this.now];
                window.open('https://www.baidu.com/s?wd='+this.t1);
            },
       },
    }
</script>

#css:

<style scoped>
.ul_se{ background: #fff; border: 1px solid #ccc; width: 100%;}
.ul_se li{list-style: none; height: 30px; line-height: 30px; cursor: pointer;}
.input_s{width: 400px; height: 30px; padding-left: 10px;}
.gray{background: deepskyblue; color: #fff;}
.ul_se li:hover{background: deepskyblue; color: #fff;}
</style>

最终效果：当你在输入框里输入搜索的关键词的时候，就会自动将联想的词汇显示在下方，按一下“enter”键，即可跳转到搜索结果的页面，同是按“上”，“下”键可以进行选择搜索的关键词，鼠标也可以进行操作选择，跳转！