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>