前言
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。以上是对vue官方的解释，通俗地说，vue就是一个比较容易上手，小巧的mvvm(Model-View-ViewModel的简写)框架，和angular类似，指令以v-xxx，一片html代码配合上json，再new出来vue实例。
官网:http://cn.vuejs.org/
手册： http://cn.vuejs.org/api/
百度搜索效果展示
-
无数据时
baiduSearch_1.png
- 有数据时
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){
//判断如果按上下键搜索，则不访问百度接口数据，只显示下拉列表数据
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=''; }
//调用访问百度接口数据 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(){
//判断如果循环超出了整个下拉列表，则从头开始循环
this.now++;
if(this.now==this.myData.length)this.now=-1;
this.tl=this.myData[this.now];
},changeUp:function(){
//判断如果循环超出了整个下拉列表，则从尾开始循环
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);} }
});
实现思路总结
1.编写一个百度搜索静态页面
2.初始化一个vue实例，将下拉列表置空
3.截取百度服务器接口，用jsonp的交互方式从接口中获取数据
4.循环下拉列表并将获取到的数据放入下拉列表中
5.用keydown.down事件实现按键盘下键选中下拉列表当前值并赋予其灰色背景样式
6.用keydown.up事件实现按键盘上键选中下拉列表当前值并赋予其灰色背景样式
7.当按键盘上下键选中下拉列表值时，将选中下拉列表值赋予搜索框。判断如果按上下键搜索，则不访问百度接口数据，搜索框只显示下拉列表数据
8.按enter键进入相应词汇百度搜索页面
9.点击“百度一下”进入相应词汇百度搜索页面
百度云盘链接
相信小伙伴们看完可能还会有不懂的地方，没关系，我把源代码分享出来供大家学习和讨论，http://pan.baidu.com/s/1mipB7AC 密码：95o1
网友评论