看了那么多別人的東西，是覺(jué)得自己也該貢獻(xiàn)點(diǎn)什么踏幻！
簡(jiǎn)單的調(diào)用百度搜索框的方法我就不說(shuō)了枷颊，下面給大家詳細(xì)講一下用vue、vue-resource請(qǐng)求百度搜索的數(shù)據(jù)簡(jiǎn)單的仿百度首頁(yè)...
訪問(wèn)地址：http://www.lzsfe.cn/project/baidu 该面，最近用Vue寫了一個(gè)簡(jiǎn)單的個(gè)稅計(jì)算器夭苗，喜歡的可以看看 https://www.lzsfe.cn
1 頁(yè)面搭建
首先，我們先把頁(yè)面寫好隔缀，具體的html+css就不講解了
注意：引用vue题造、vue-resource,可以下載到本地引用，也可以直接引用cndjs官網(wǎng)上的猾瘸，當(dāng)然也可以使用npm下載安裝
<body>
<div class="searchBox" id="app">
<div class="search-wrapper">
<input class="searchInput" type="text">
<button>百度一下</button>
</div>
<ul>
<li>這里是數(shù)據(jù)列表</li>
</ul>
<p>暫無(wú)數(shù)據(jù)...</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 實(shí)例化vue
簡(jiǎn)單的實(shí)例化一個(gè)vue晌梨，然后el就直接綁定到#app上面就是了，這里有個(gè)坑:不能綁定在body或者h(yuǎn)tml上须妻，否則會(huì)沒(méi)效果仔蝌，就綁定body里面的一個(gè)div上就好了。
data里面用到兩個(gè)數(shù)據(jù)荒吏，一個(gè)searchList用來(lái)存儲(chǔ)百度搜索請(qǐng)求來(lái)的數(shù)據(jù)敛惊，一個(gè)t1用來(lái)雙向綁定輸入框里面的內(nèi)容，我們將數(shù)據(jù)也渲染到頁(yè)面上绰更，當(dāng)然要通過(guò)輸入值調(diào)用get方法獲取百度數(shù)據(jù)瞧挤，接著往下看...
<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">暫無(wú)數(shù)據(jù)...</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 獲取百度數(shù)據(jù)
通過(guò)http跨域請(qǐng)求百度搜索數(shù)據(jù)锡宋，再賦給之前我們data數(shù)據(jù)里面的searchList渲染到頁(yè)面，這樣當(dāng)輸入一個(gè)值的時(shí)候就會(huì)跟新下面彈出的列表了,附上效果圖
這里百度請(qǐng)求的路徑可以在百度首頁(yè)f12調(diào)試特恬，點(diǎn)擊Network执俩，復(fù)制請(qǐng)求路徑然后進(jìn)行刪減后：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su
methods: {
get: function() {
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{//跨域請(qǐng)求數(shù)據(jù)
params: {
wd: this.t1//輸入的關(guān)鍵詞
},
jsonp: 'cb'//這里是callback
}).then((res) => {//請(qǐng)求成功回調(diào)，請(qǐng)求來(lái)的數(shù)據(jù)賦給searchList數(shù)組
this.searchList = res.body.s
},(res) => {//失敗顯示狀態(tài)碼
alert(res.status)
})
}
}
3 實(shí)現(xiàn)按上下鍵選擇搜索內(nèi)容
很顯然給輸入框添加按上下鍵的事件keydown.down和keydown.up癌刽，我們現(xiàn)在添加一個(gè)數(shù)據(jù)now用來(lái)保存當(dāng)前所選中的值役首，按上鍵now值++反之則--；再給選擇項(xiàng)添加.active類使其背景變成灰色显拜，當(dāng)v-for循環(huán)的索引值index==當(dāng)前now值就給這個(gè)列表項(xiàng)加上類名active(灰色背景標(biāo)記)衡奥。
此處有幾個(gè)需要注意的地方：
1. 按上鍵的時(shí)候光標(biāo)會(huì)移動(dòng)到輸入值的前面，這是默認(rèn)事件導(dǎo)致的远荠，所以要在keydown.up后面加上.prevent清除默認(rèn)事件
2. 上下選擇的時(shí)候選中的值肯定是要賦給輸入框的值的矮固，但是每次按上下鍵的時(shí)候又會(huì)觸發(fā)之前的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">暫無(wú)數(shù)據(jù)...</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為列表第一項(xiàng)
},
methods: {
get: function(evt) {
if(evt.keyCode == 38 || evt.keyCode == 40) return
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{//跨域請(qǐng)求數(shù)據(jù)
params: {
wd: this.t1//輸入的關(guān)鍵詞
},
jsonp: 'cb'//這里是callback
}).then((res) => {//請(qǐng)求成功回調(diào)邻梆，請(qǐng)求來(lái)的數(shù)據(jù)賦給searchList數(shù)組
this.searchList = res.body.s
},(res) => {//失敗顯示狀態(tài)碼
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 最后一步 回車實(shí)現(xiàn)搜索
也就是判斷當(dāng)按下的鍵為enter的時(shí)候跳轉(zhuǎn)到搜索頁(yè)keyCode == 13辰晕，鍵碼值（keyCode）可以百度一下。
百度搜索頁(yè)面的地址也是同上确虱，搜索之后f12—>Network—>js復(fù)制地址含友，刪減之后變成 https://www.baidu.com/s?wd="搜索值"， 再用window.open()跳轉(zhuǎn)
if (evt.keyCode == 13) {
window.open('https://wwww.baidu.com/s?wd=' + this.t1)
this.t1 = ''
}
5 附加 鼠標(biāo)點(diǎn)擊選擇跳轉(zhuǎn)
給li添加一個(gè)鼠標(biāo)點(diǎn)擊事件點(diǎn)擊相應(yīng)的li獲取其索引index賦給now同時(shí)將對(duì)應(yīng)的值賦給t1再跳轉(zhuǎn)
searchLink: function(index) {//鼠標(biāo)點(diǎn)擊跳轉(zhuǎn)
this.t1 = this.searchList[index]
this.now = index
window.open('https://www.baidu.com/s?wd=' + this.t1)
this.t1 = ''
}
最后給上效果訪問(wèn)地址：http://www.lzsfe.cn/project/baidu 校辩，最近用Vue寫了一個(gè)簡(jiǎn)單的個(gè)稅計(jì)算器窘问，喜歡的可以看看 https://www.lzsfe.cn
