基于Vue.js实现简单搜索框

在github上练习，看完代码再练习，先放原址：https://github.com/lavyun/vue-demo-search

使用的主要知识很简单，简单的vuejs2.0知识就够了。源代码是用。vue和ES6，用webpack打包等等。我是大三学生，所以我用简单的。js优先。

先看效果

这里有两个组件，一个是logo部分，另一个是搜索框部分。

超文本标记语言

Html很简单，就是指两个组件。

Div id=' app '徽标-图片/徽标-图片搜索-面板/搜索-面板/div//js还需要一个# app var app=new vue({ El : ' # app ' })徽标的实例

首先，一个img/显示一个搜索引擎的图片，这里应该是有响应的。如果您在下面选择不同的搜索引擎图标，您应该相应地更改它们。img : src=' http : items[now]。src'/。单击后倒三角时，会显示下拉列表span @click='toggleFlag' /span。然后是下拉框。如果你想有一个过渡效果，把它包装在过渡组中，然后遍历li，记住元素应该被分配一个唯一的键。要想有悬停效果，用数据驱动的思维，就是比较index和悬停index是否相等，相等就加类。

Vue.component('logo-picture '，{ template : ' \ div class=' main-logo ' \ img : src=' http : items[now])。src ' @ click=' toggleFlag '/\ span @ click=' toggleFlag ' class=' logo list-arrow '/span \ transition-group tag=' ul ' v-show=' flag show ' class=' logo list ' \ Li v-for=' item，index ' in items ' : key=' index ' @ click=' change flag(index)' @ mouse over=' flag hover(index)' : class=' { selectback 3: index==hover index } ' \ img./src/assets/360_logo.png'}，{src: './src/assets/baidu_logo.png'}，{src: './src/assets/sougou_logo.png'}]，now: 0，flagShow: false，悬停索引： -1 } }，Methods: {//显示隐藏图片列表Toggle flag : function () {this。标志显示=！this.flagShow}，//更改搜索引擎changeflag:函数(index) {this。now=indexthis.flagShow=false公共汽车。$emit('change '，index)；}，//li hover flagHover:函数(index){ this . hover index=index；} }});下拉框

输入应该是双向绑定的，所以应该是v-model=' keyup '，用keyboard event @keyup绑定。如果您按回车键，您将进行搜索，然后向下和向上选择给定的退货信息列表。以下详细信息框类似于徽标-图片下拉列表。搜索主要使用$http.jsonp和ES6语法？这似乎是诺言的。然后()。

Vue.component('search-panel '，{ template : ' \ div class=' search-input ' \ input v-mode=' search ' @ key up=' get($ event)' @ key down。enter=' search input()' @向下键。down=' selectDown()' @向下键。起来。防止=' selectUp()'/\ span @ click=' clearInput()' class=' search-reset '/span \ button @ click=' search input()' class=' search-BTN '搜一下/button \ div class=' search-select ' \ transition-group tag=' ul ' mode=' out-in ' \ Li v-for=' myData ' : class=' { selectback : index==now } ' : key=' index ' @ click=' search this ' @ mouseover=' selectHover(index)' class=' search-select-option search-select-select-list ' \ { { value } } \/Li \/transition-group \/div \/div搜索，搜索src : 'https://www.so.com/s？ ie=utf-8 shb=1src=360 sou _ new homeq=' }，{ 'name': '百度搜索，搜索src : 'https://www.baidu.com/s？ie=utf-8f=8rsv _ BP=0rsv _ idx=1tn=Baidu wd=' }，{ 'name': '搜狗搜索，搜索src : 'https://www.sogou.com/web？query=' } ] } }，方法： { get: function(event){ if(event。键码==38 | |事件。键码==40){//向上向下返回；}这个$ http。jsonp(' https://sug。所以。360 .cn/improve？word='这个。搜索“encodein=utf-8 encodeout=utf-8’).然后（函数{这个。mydata=RES . data。s；}，function(){ })；}, //清除内容clearInput:函数(){ this.search=this。get()；}, //搜索searchInput:函数(){ alert(这。标志)窗口。打开这个。logo data[这个。旗帜]).搜索src这个。搜索)；}, //搜索的内容搜索此：函数（索引){这个。搜索=这个。my DATa[index]；这个。搜索输入()；}，//li悬停选择悬停：函数（索引){这个。搜索=这个。my data[index]；this.now=index}，//向下选择向下：函数(){ this.nowif(this。现在==这个。我的数据。长度){这个。now=0；}这个。搜索=这个。my DATa[this。现在]；}, //向上选择Up:函数(){这个。现在-；如果(这个。now==-1){这个。现在=这个。我的数据。长度-1；}这个。搜索=这个。my DATa[this。现在]；} }，created:函数(){ //通信var self=这个；公共汽车$on('change '，function(index){ self。flag=索引；}) }})两个兄弟组件通信的问题

徽标-图片换了搜索引擎的话，搜索面板要换成相应的搜索引擎。这里要新建一个空的某视频剪辑软件对象做中间，因为两个组件不是父子关系。

var bus=new Vue()；//徽标-图片里触发事件，并传递参数公共汽车$emit('change '，index)；//搜索面板里监听事件是否发生var self=这个；公共汽车$on('change '，function(index){ self。flag=索引；})这里要注意这问题，$on里这指向公共汽车，所以要保存这才能引用搜索面板。

本文已被整理到了《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。