Vue全家桶+SSR+Koa2全栈开发美团网⑦——首页开发

首页header组件开发

pages目录下的index.vue组件页面默认引用layouts目录下的default.vue模板，所以我们在default.vue模板中直接使用element模板

default.vue为我们页面展示的入口文件，接下来写header组件部分页面

在components下形成下列目录结构，header目录下的index为header组件的入口文件

geo.vue中写入

user.vue中写入

navbar也同理，这里不再写了

topbar为上面三个组件的父组件，写入

search.vue中写入

index.vue为header的入口组件，由上面2个子组件组成，写入

总结：

输入框的获得焦点触发事件 @focus = ‘focus’，失去焦点触发事件 @blur = ‘blur’，获得输入框内容改变时触发事件 @input = ‘input’

v-model可以绑定输入框的内容，与data中的search数据双向绑定

当搜索列表被点击时，输入框先失去焦点，会造成搜索列表内没有被点击的假象，使用setTimeOut延时点击

首页菜单组件Emenu开发

首页中header和footer都是模板，所以在default.vue中开发

但菜单组件唯一 ，所以在pages目录下的index.vue中导入菜单组件，写入

菜单组件Emenu.vue中写入

总结：

鼠标进入时触发事件@mouseenter="enter"，鼠标离开时触发事件@mouseleave="mouseleave"

定义vue实例中的全局变量可以使用this.变量，如上面this.timer = setTimeout(() => {this.kind = ''}, 150)，this.timer就可以在其他方法中使用，清除setTimeout可以使用clearTimeout(this.timer)