How to implement the search box with vuejs

Editor to share with you how to achieve the search box vuejs, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Vuejs to achieve the search box method: 1, create logo and search box part of the component; 2, create an empty Vue object; 3, use "bus.$emit (" change ", index);" trigger the event and pass parameters.

This article operating environment: Windows7 system, vue2.9.6 version, DELL G3 computer.

How does vuejs implement the search box?

Realization of simple search box based on Vue.js

For the exercises you see on github, read the code and then practice it yourself. Put it at the original location: https://github.com/lavyun/vue-demo-search

The main knowledge used is very simple, simple knowledge of vuejs2.0 is enough. The source code uses .vue build and ES6, uses webpack packaging, and so on. My seniority is still inexperienced, first use a simple .js to write.

Let's see the effect first.

There are two components, one for the logo part and one for the search box.

Html

Html is as simple as referencing two components.

/ / js also needs instance # appvar app = new Vue ({el: "# app"})

Logo

Let's analyze it first, the first one

Display search engine pictures, here to be responsive, the following selection of different search engine icons should be changed. So

. The drop-down list is displayed when the inverted triangle is clicked.

Then there is the drop-down box. If you want to have a transitional effect, you have to wrap that in