Vue-resource 仿百度下拉菜單

時間 2019-11-17

標籤 vue resource 百度下拉菜單简体版

原文原文鏈接

先來了解下 Vue自己也能夠處理，可是有一個包裝過的模塊很好用，就是 vue-resource,如今官方推薦是javascript

官方推薦使用 axios 來代替原來的vue-resource ，可是二者真的很像，這裏就先說下vue-resource。css

//引入vue-resource
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
//基於全局的Vue對象使用http，也能夠基於某個Vue實例使用http
// 基於全局Vue對象使用http
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// 在一個Vue實例內使用$http
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

在發送請求後，使用then方法來處理響應結果，then方法有兩個參數，第一個參數是響應成功時的回調函數，第二個參數是響應失敗時的回調函數。html

then方法的回調函數也有兩種寫法，第一種是傳統的函數寫法，第二種是更爲簡潔的ES 6的Lambda寫法：vue

// 傳統寫法
this.$http.get('/someUrl', [options]).then(function(response){
	// 響應成功回調
}, function(response){
	// 響應錯誤回調
});


// Lambda寫法
this.$http.get('/someUrl', [options]).then((response) => {
	// 響應成功回調
}, (response) => {
	// 響應錯誤回調
});

vue-resource的請求API是按照REST風格設計的，它提供了7種請求API：java

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

option對象的詳解jquery

參數類型描述

url

string

請求的URL

method string 請求的HTTP方法，例如：'GET', 'POST'或其餘HTTP方法

body Object,FormDatastring request body

params Object 請求的URL參數對象

header Object request header

timeout number 單位爲毫秒的請求超時時間 (0 表示無超時時間)

before function(request) 請求發送前的處理函數，相似於jQuery的beforeSend函數

progress

function(event)

ProgressEvent回調處理函數

若是Web服務器沒法處理PUT, PATCH和DELETE這種REST風格的請求，你能夠啓用enulateHTTP現象。啓用該選項後，請求會以普通的POST方法發出，而且HTTP頭信息的X-HTTP-Method-Override屬性會設置爲實際的HTTP方法。ios

Vue.http.options.emulateHTTP = true;

若是Web服務器沒法處理編碼爲application/json的請求，你能夠啓用emulateJSON選項。啓用該選項後，請求會以application/x-www-form-urlencoded做爲MIME type，就像普通的HTML表單同樣。json

Vue.http.options.emulateJSON = true;

在最後附上vue+vue-resource實現的仿百度下拉搜索bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>right-click</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
    <style>
        .gray{
            background:#ccc;
        }
    </style>
    <script src="lib/jquery-1.7.2.js"></script>
    <script src="lib/vue.js"></script>
    <script src="lib/vue-resource.js"></script>
    <script type="text/javascript">
       $(document).ready(function () {
           var vue = new Vue({
               el: '.box',
               data: {
                   searchData:[],
                   keyword:'',
                   nowIndex:-1,

               },
               methods: {
                   inputkeyword:function (ev) {
                       //上下方向鍵不作處理
                       if(ev.keyCode==38 ||ev.keyCode==40){
                           return;
                       }
                       //捕獲回車鍵,跳轉相應搜索結果頁面
                       if(ev.keyCode ==13){
                           window.open('https://www.baidu.com/s?wd='+this.keyword);
                           this.keyword='';
                       }
                       this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',{
                           wd:this.keyword,
                       },{
                           jsonp:'cb'
                       }).then(function (res){
                        this.searchData=res.data.s;
                           },function () {
                                         });
                   },
                   changeDown:function(){
                       this.nowIndex++;
                       if(this.nowIndex==this.searchData.length){this.nowIndex=-1;}

                   },
                   changeUp:function(){
                       this.nowIndex--;
                       if(this.nowIndex==-2){this.nowIndex=this.searchData.length-1;
                       this.keyword=this.searchData[this.nowIndex];}
                   }

               }
           });
       });




    </script>
</head>
<body>

<div class="box text-center" >
<input type="text" class="text-info" v-model="keyword" @keyup="inputkeyword($event)"  @keydown.down="changeDown()" @keydown.up.prevent="changeUp()" placeholder="請輸入關鍵字">
    <button type="button" value="搜索"@click="inputkeyword()">搜索</button>
    <ul class="text-center text-info">
        <li v-for="item in searchData" :class="{gray:$index==nowIndex}" style="list-style:none">{{item}}</li>

    </ul>

</div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。