vue2.0，jsonp仿百度搜索页面，请求百度数据

看了那么多别人的东西，是觉得自己也该贡献点什么！
简单的调用百度搜索框的方法我就不说了，下面给大家详细讲一下用vue、vue-resource请求百度搜索的数据简单的仿百度首页...

访问地址：http://www.lzsfe.cn/project/baidu ，最近用Vue写了一个简单的个税计算器，喜欢的可以看看 https://www.lzsfe.cn

1 页面搭建

首先，我们先把页面写好，具体的html+css就不讲解了

注意：引用vue、vue-resource,可以下载到本地引用，也可以直接引用cndjs官网上的，当然也可以使用npm下载安装

2 实例化vue

简单的实例化一个vue，然后el就直接绑定到#app上面就是了，这里有个坑:不能绑定在body或者html上，否则会没效果，就绑定body里面的一个div上就好了。

data里面用到两个数据，一个searchList用来存储百度搜索请求来的数据，一个t1用来双向绑定输入框里面的内容，我们将数据也渲染到页面上，当然要通过输入值调用get方法获取百度数据，接着往下看...

3 获取百度数据

通过http跨域请求百度搜索数据，再赋给之前我们data数据里面的searchList渲染到页面，这样当输入一个值的时候就会跟新下面弹出的列表了,附上效果图

这里百度请求的路径可以在百度首页f12调试，点击Network，复制请求路径然后进行删减后：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su

methods: {
      get: function() {
        this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{//跨域请求数据
            params: {
                wd: this.t1//输入的关键词
            },
            jsonp: 'cb'//这里是callback
        }).then((res) => {//请求成功回调，请求来的数据赋给searchList数组
            this.searchList = res.body.s
        },(res) => {//失败显示状态码
            alert(res.status)
        })
      }
    }

输入a效果图

3 实现按上下键选择搜索内容

很显然给输入框添加按上下键的事件keydown.down和keydown.up，我们现在添加一个数据now用来保存当前所选中的值，按上键now值++反之则--；再给选择项添加.active类使其背景变成灰色，当v-for循环的索引值index==当前now值就给这个列表项加上类名active(灰色背景标记)。

此处有几个需要注意的地方：
1. 按上键的时候光标会移动到输入值的前面，这是默认事件导致的，所以要在keydown.up后面加上.prevent清除默认事件
2. 上下选择的时候选中的值肯定是要赋给输入框的值的，但是每次按上下键的时候又会触发之前的keyup事件，所以这里要判断按下的键是不是上下键keyup="get($event)" ，if（ev.keyCode == 38 || ev.keyCode == 40 ）return；

4 最后一步回车实现搜索

也就是判断当按下的键为enter的时候跳转到搜索页keyCode == 13，键码值（keyCode）可以百度一下。

百度搜索页面的地址也是同上，搜索之后f12—>Network—>js复制地址，删减之后变成 https://www.baidu.com/s?wd="搜索值"，再用window.open()跳转

if (evt.keyCode == 13) {
    window.open('https://wwww.baidu.com/s?wd=' + this.t1)
    this.t1 = ''
}

5 附加鼠标点击选择跳转

给li添加一个鼠标点击事件点击相应的li获取其索引index赋给now同时将对应的值赋给t1再跳转

searchLink: function(index) {//鼠标点击跳转
        this.t1 = this.searchList[index]
        this.now = index
        window.open('https://www.baidu.com/s?wd=' + this.t1)
        this.t1 = ''
      }

最后给上效果访问地址：http://www.lzsfe.cn/project/baidu ，最近用Vue写了一个简单的个税计算器，喜欢的可以看看 https://www.lzsfe.cn