Comment implémenter le champ de recherche dans vuejs

Comment implémenter le champ de recherche dans vuejs : 1. Créez les composants du logo et du champ de recherche ; 2. Créez un nouvel objet Vue vide ; 3. Utilisez "bus.$emit("change",index);" déclencher l'événement et lui transmettre des paramètres.

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment implémenter le champ de recherche dans vuejs ?

Implémentation d'un champ de recherche simple basé sur Vue.js

J'ai vu les exercices sur github Après avoir lu le code, répétez-le vous-même. Mettez d'abord l'adresse d'origine : https://github.com/lavyun/. vue-demo -Search

Les principales connaissances utilisées sont très simples, une simple connaissance de vuejs2.0 suffit. Le code source utilise .vue pour construire et ES6, l'empaquetage webpack, etc. Je suis encore relativement inexpérimenté, je vais donc d'abord utiliser un simple .js pour écrire.

Jetons d'abord un coup d'œil à l'effet

Il y a deux composants ici, un composant est la partie logo et l'autre est la partie champ de recherche.

html

html est très simple, il fait simplement référence à deux composants.

<p id="app">
 <logo-picture></logo-picture>
 <search-panel></search-panel>
</p>

//js还要实例#app
var app = new Vue({
 el: "#app"
})

logo

Analysons-le d'abord. Tout d'abord, un 6ed09268cbdd0015bce8dcbbdfa9bfe4 affiche l'image du moteur de recherche. Il doit être réactif ici. il faudra le changer en conséquence. Donc e431342b2894783f54b33740f33c93c1. Lorsque vous cliquez sur le triangle inversé à l'arrière, la liste déroulante 914942ce123cf770f7ea92723ad87555
Ensuite, il y a la liste déroulante. Si vous souhaitez avoir un effet de transition, vous devez l'envelopper dans un ab9ad691ac2a0c0e5e7c345d0fc15281
Si vous effectuez une recherche, vous utilisez principalement $http.jsonp, et utilisez également la syntaxe ES6 ? La solution de secours semble être le .then() de Promise.

Vue.component('search-panel',{
 template:'\
 <p class="search-input">\
 <input v-model="search" @keyup="get($event)" @keydown.enter="searchInput()" @keydown.down="selectDown()" @keydown.up.prevent="selectUp()"/>\
 <span @click="clearInput()" class="search-reset">&times;</span>\
 <button @click="searchInput()" class="search-btn">搜一下</button>\
 <p class="search-select">\
 <transition-group tag="ul" mode="out-in">\
 <li v-for="(value,index) in myData" :class="{selectback:index==now}" :key="index" @click="searchThis" @mouseover="selectHover(index)" class="search-select-option search-select-list">\
  {{value}}\
 </li>\
 </transition-group>\
 </p>\
 </p>&#39;,
 data: function() {
 return {
 search: &#39;&#39;,
 myData: [],
 flag: 0,
 now: -1,
 logoData: [
 {
  &#39;name&#39;: "360搜索",
  searchSrc: "https://www.so.com/s?ie=utf-8&shb=1&src=360sou_newhome&q="
 },
 {
  &#39;name&#39;: "百度搜索",
  searchSrc: "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=0&rsv_idx=1&tn=baidu&wd="
 },
 {
  &#39;name&#39;: "搜狗搜索",
  searchSrc: "https://www.sogou.com/web?query="
 }
 ]
 }
 },
 methods: {
 get: function(event) {
 if(event.keyCode == 38 || event.keyCode == 40){ //向上向下
 return ;
 }
 this.$http.jsonp(&#39;https://sug.so.360.cn/suggest?word=&#39; + this.search + &#39;&encodein=utf-8&encodeout=utf-8&#39;).then(function(res) {
 this.myData = res.data.s;

 }, function() {

 });
 },
 //清除内容
 clearInput: function() {
 this.search = &#39;&#39;;
 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(&#39;change&#39;,function(index) {
 self.flag = index;
 })
 }
})

Le problème de communication entre deux composants frères

fd098b03a0046905b4f34a14f2cba3c4Si vous changez de moteur de recherche, 04a43090e6cbf1462a77fdb864c1f813 Ici, nous devons créer un nouvel objet Vue vide au milieu, car les deux composants ne sont pas dans une relation parent-enfant.

var bus = new Vue();

//logo-picture里触发事件，并传递参数
bus.$emit("change",index);

//search-panel里监听事件是否发生
var self = this;
bus.$on('change',function(index) {
 self.flag = index;
})

Faites attention à ce problème ici. Ceci dans $on points to bus, vous devez donc l'enregistrer dans le panneau de recherche de référence.

Apprentissage recommandé : "tutoriel vue"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!