Vue仿百度搜索功能
阿新 • • 發佈:2020-12-28
簡述
學習vue的第二節,由於2.0版本並不向下相容,視訊中的不少內不能實現。下面列出一些主要知識點
// v-on 可簡寫為@ // 事件冒泡是指當點選div內部的button觸發show1()時,必然會冒泡到div上執行show2(),這才層級div中很常見 // 阻止冒泡,原生js法,設定事件物件的cancelBubble屬性為true // vue方法@click.stop // 阻止預設行為,原生js法,設定事件物件的preventDefault屬性為true // vue方法@contextmenu.prevent // 鍵盤事件獲取鍵碼,原生js法,使用事件物件的keyCode屬性 // vue方法@keyup.鍵碼或鍵名,如獲取按下回車@keydown.13 或 @keydown.enter // 繫結屬性v-bind:src,簡寫 :src 只繫結一次使用v-once,將繫結內容轉義成html使用v-html
基本知識:
vue
$http.jsonp().then()
:class
@keyup
@keydown
配置庫檔案
<script src="lib\vue.js"></script> <!-- vue本身不支援資料互動,必須引入vue-resource.js,現在vue官方也推薦axios.js--> <script src="lib\vue-resource.js"></script>
Script
<script> window.onload = function() { new Vue({ el: '#box',data: { myData: [],content: '',now: -1,},methods: { get: function(ev) { // 這裡的鍵碼只能通過事件物件$event傳進來,因為輸入大多數鍵都應該可以進行搜素,我們要排除的就是up(38)和down(40) if (ev.keyCode == 38 || ev.keyCode == 40) { return; } // 這裡當按下的鍵是Enter時,應實現搜尋跳轉功能 if(ev.keyCode == 13) { window.open('https://www.baidu.com/s?wd=' + this.content); this.content = ''; } this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=' + this.content,{ jsonp: 'cb' }).then(function(res) { this.myData = res.data.s; },function() { alert("搜尋失敗"); }) },changeDown: function() { this.now++; if(this.now == this.myData.length) { this.now = -1; } // 這裡實現輸入框中也顯示同樣的內容 this.content = this.myData[this.now]; },changeUp: function() { this.now--; if (this.now == -2) { this.now = this.myData.length; } this.content = this.myData[this.now]; } },}) } </script>
三個方法:get()用於對百度進行資料互動;cheangeDown()用於實現選中區域下移;changeUp()用於實現選中區域上移
HTML
<body> <div id="box"> <input type="text" name="" id="" v-model="content" @keyup="get($event)" @keydown.down="changeDown()" @keydown.up="changeUp()"> <ul> <!-- 這裡注意給class新增屬性的時候採用的是{屬性:true/false}的形式 --> <li v-for="(item,index) in myData" :class="{grey: index==now}"> {{item}} </li> </ul> <p v-show="myData.length == 0">暫無資料...</p> </div> </body>
效果
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。