前言
Vue.js（讀音 /vju?/, 類似于 view） 是一套構建用戶界面的漸進式框。Vue 只關注視圖層安岂， 采用自底向上增量開發(fā)的設計轻猖。Vue 的目標是通過盡可能簡單的 API 實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。以上是對vue官方的解釋域那，通俗地說蜕依，vue就是一個比較容易上手，小巧的mvvm(Model-View-ViewModel的簡寫)框架琉雳，和angular類似，指令以v-xxx友瘤，一片html代碼配合上json翠肘，再new出來vue實例。
官網(wǎng):http://cn.vuejs.org/
手冊： http://cn.vuejs.org/api/
百度搜索效果展示
-
無數(shù)據(jù)時
baiduSearch_1.png - 有數(shù)據(jù)時
baiduSearch_2.png
部分代碼演示
1.引入vue辫秧，這里加上了bootsrap前端框架寫前端頁面
baiduSearchCode_1.png
2.html代碼綁定頁面
baiduSearchCode_2.png
3.new一個實例束倍，js綁定頁面
new Vue({
el:"body",
data:{ myData:[], tl:'', now:-1//從頭搜索 },
methods:{
get:function(ev){
//判斷如果按上下鍵搜索，則不訪問百度接口數(shù)據(jù)盟戏，只顯示下拉列表數(shù)據(jù)
if(ev.keyCode==38||ev.keyCode==40)return;
//按enter鍵進入相應詞匯百度搜索頁面
if(ev.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.tl);
this.tl=''; }
//調用訪問百度接口數(shù)據(jù) this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{ wd:this.tl },{ jsonp:'cb'
}).then(function(res){
this.myData = res.data.s;
},function(res){ });
},changeDown:function(){
//判斷如果循環(huán)超出了整個下拉列表绪妹，則從頭開始循環(huán)
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.tl=this.myData[this.now];
},changeUp:function(){
//判斷如果循環(huán)超出了整個下拉列表，則從尾開始循環(huán)
this.now--;
if(this.now==-2)this.now=this.myData.length-1;
this.tl=this.myData[this.now];
},clickBaiDu:function(){
//點擊“百度一下”進入相應詞匯百度搜索頁面
window.open('https://www.baidu.com/s?wd='+this.tl);} }
});
實現(xiàn)思路總結
1.編寫一個百度搜索靜態(tài)頁面
2.初始化一個vue實例柿究，將下拉列表置空
3.截取百度服務器接口邮旷，用jsonp的交互方式從接口中獲取數(shù)據(jù)
4.循環(huán)下拉列表并將獲取到的數(shù)據(jù)放入下拉列表中
5.用keydown.down事件實現(xiàn)按鍵盤下鍵選中下拉列表當前值并賦予其灰色背景樣式
6.用keydown.up事件實現(xiàn)按鍵盤上鍵選中下拉列表當前值并賦予其灰色背景樣式
7.當按鍵盤上下鍵選中下拉列表值時，將選中下拉列表值賦予搜索框蝇摸。判斷如果按上下鍵搜索婶肩，則不訪問百度接口數(shù)據(jù)，搜索框只顯示下拉列表數(shù)據(jù)
8.按enter鍵進入相應詞匯百度搜索頁面
9.點擊“百度一下”進入相應詞匯百度搜索頁面
百度云盤鏈接
相信小伙伴們看完可能還會有不懂的地方貌夕，沒關系律歼，我把源代碼分享出來供大家學習和討論，http://pan.baidu.com/s/1mipB7AC 密碼：95o1
