看了那么多别人的东西，是觉得自己也该贡献点什么！
简单的调用百度搜索框的方法我就不说了，下面给大家详细讲一下用vue、vue-resource请求百度搜索的数据简单的仿百度首页...
访问地址：http://www.lzsfe.cn/project/baidu ，最近用Vue写了一个简单的个税计算器，喜欢的可以看看 https://www.lzsfe.cn
1 页面搭建
首先，我们先把页面写好，具体的html+css就不讲解了
注意：引用vue、vue-resource,可以下载到本地引用，也可以直接引用cndjs官网上的，当然也可以使用npm下载安装
<body>
<div class="searchBox" id="app">
<div class="search-wrapper">
<input class="searchInput" type="text">
<button>百度一下</button>
</div>
<ul>
<li>这里是数据列表</li>
</ul>
<p>暂无数据...</p>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
</html>
2 实例化vue
简单的实例化一个vue，然后el就直接绑定到#app上面就是了，这里有个坑:不能绑定在body或者html上，否则会没效果，就绑定body里面的一个div上就好了。
data里面用到两个数据，一个searchList用来存储百度搜索请求来的数据，一个t1用来双向绑定输入框里面的内容，我们将数据也渲染到页面上，当然要通过输入值调用get方法获取百度数据，接着往下看...
<body>
<div class="searchBox" id="app">
<div class="search-wrapper">
<input class="searchInput" type="text" v-model="t1" @keyup="get">
<button>百度一下</button>
</div>
<ul>
<li v-for="value in searchList">{{value}}</li>
</ul>
<p v-show="searchList.length == 0">暂无数据...</p>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
searchList: [
![`G]W$@HOKPLJBZ]T~K05}`G.png](http://upload-images.jianshu.io/upload_images/6756377-a56aeb2b447f2a4c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/600)
],
t1: ''
},
methods: {
get: function() {
}
}
})
</script>
</html>
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)
})
}
}
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；
<body>
<div class="searchBox" id="app">
<div class="search-wrapper">
<input class="searchInput" type="text" v-model="t1" @keyup="get($event)" @keydown.down="next" @keydown.up.prevent="last">>
<button>百度一下</button>
</div>
<ul>
<li v-for="(value, index) in searchList" :class="{active: index == now}">{{value}}</li>
</ul>
<!-- <p v-show="searchList.length == 0">暂无数据...</p> -->
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.3.4/vue-resource.min.js"></script>
<script>
new Vue({
el: "#app",
data: {
searchList: [],//搜索弹出列表
t1: '',//输入框里面的值
now: -1//输入框里面的值的索引，0为列表第一项
},
methods: {
get: function(evt) {
if(evt.keyCode == 38 || evt.keyCode == 40) return
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)
})
},
next: function() {//向下选择
this.now ++
if(this.now == this.searchList.length){//判断是否超出
this.now = 0
}
this.t1 = this.searchList[this.now]
},
last: function() {//向上选择
this.now --
if(this.now < 0){
this.now = this.searchList.length -1
}
this.t1 = this.searchList[this.now]
}
}
})
</script>
</html>
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
