Vue-resource 仿百度下拉菜单

最新推荐文章于 2024-06-21 10:23:19 发布

chengsu1902

最新推荐文章于 2024-06-21 10:23:19 发布

阅读量91

点赞数

文章标签： json javascript ViewUI

原文链接：https://my.oschina.net/u/1031097/blog/1526200

版权

先来了解下 Vue本身也可以处理，但是有一个包装过的模块很好用，就是 vue-resource,现在官方推荐是

官方推荐使用 axios 来代替原来的vue-resource ，但是两者真的很像，这里就先说下vue-resource。

//引入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方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

then方法的回调函数也有两种写法，第一种是传统的函数写法，第二种是更为简洁的ES 6的Lambda写法：

// 传统写法
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：

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对象的详解

参数类型描述

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方法。

Vue.http.options.emulateHTTP = true;

如果Web服务器无法处理编码为application/json的请求，你可以启用emulateJSON选项。启用该选项后，请求会以application/x-www-form-urlencoded作为MIME type，就像普通的HTML表单一样。

Vue.http.options.emulateJSON = true;

在最后附上vue+vue-resource实现的仿百度下拉搜索

<!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>

转载于:https://my.oschina.net/u/1031097/blog/1526200

chengsu1902

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-resource 仿百度下拉菜单

先来了解下 Vue本身也可以处理，但是有一个包装过的模块很好用，就是 vue-resource,现在官方推荐是官方推荐使用 axios 来代替原来的vue-resource ，但是两者真的很像，这里就先说下vue-resource。 //引入vue-resource<script...
复制链接

扫一扫