在github上看到的练习，看个遍代码后自己再练一遍，先放原址：
主要用到的知识很简单，简单的vuejs2.0的知识就够了。源码用了.vue构建和ES6，用了webpack打包等等。我资历还浅，先用一个简单的.js的写。
先看效果
这里有两个组件，一个组件是logo部分的，一个是搜索框部分的。
html
html很简单，就是引用两个组件。
//js还要实例#app
var app = new Vue({
el: "#app"
})
在github上看到的练习，看个遍代码后自己再练一遍，先放原址：
主要用到的知识很简单，简单的vuejs2.0的知识就够了。源码用了.vue构建和ES6，用了webpack打包等等。我资历还浅，先用一个简单的.js的写。
先看效果
这里有两个组件，一个组件是logo部分的，一个是搜索框部分的。
html很简单，就是引用两个组件。
//js还要实例#app
var app = new Vue({
el: "#app"
})
logo
先来分析，首先一个显示搜索引擎的图片，这里要响应式的，下面选择了不同的搜索引擎图标就要跟着换。所以
。后面的倒三角点击时显示下拉列表。
然后是下拉框。如果想要有过渡效果，那个就要包裹在
\
',data: function() {
return {
items: [{src:'../src/assets/360_logo.png'},{src:'../src/assets/baidu_logo.png'},{src:'../src/assets/sougou_logo.png'}],now: 0,flagShow: false,hoverindex: -1
}
},methods: {
//显示隐藏图片列表
toggleFlag: function() {
this.flagShow = !this.flagShow;
},//改变搜索引擎
changeFlag: function(index) {
this.now = index;
this.flagShow = false;
bus.$emit("change",index);
},//li hover
flagHover: function(index) {
this.hoverindex = index;
}
}
});
下拉框
input因为要双向绑定，所以要v-model="keyword"，还要绑定键盘事件@keyup，如果按enter就搜索，向下向上就选中给定的返回信息列表。
下面的详情框与
},function() {
});
},//清除内容
clearInput: function() {
this.search = '';
this.get();
},//搜索
searchInput: function() {
alert(this.flag)
window.open(this.logoData[this.flag].searchSrc+this.search);
},//搜索的内容
searchThis: function(index) {
this.search = this.myData[index];
this.searchInput();
},//li hover
selectHover: function(index) {
this.search = this.myData[index];
this.now = index;
},//向下
selectDown: function() {
this.now++;
if(this.now == this.myData.length) {
this.now = 0;
}
this.search = this.myData[this.now];
},//向上
selectUp: function() {
this.now--;
if(this.now == -1) {
this.now = this.myData.length - 1;
}
this.search = this.myData[this.now];
}
},created: function() { //通信
var self = this;
bus.$on('change',function(index) {
self.flag = index;
})
}
})
//search-panel里监听事件是否发生
var self = this;
bus.$on('change',function(index) {
self.flag = index;
})
这里要注意this问题，$on里this指向bus，所以要保存this才能引用search-panel.
本文已被整理到了《》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题进行学习。
