文档章节

Vue-resource 仿百度下拉菜单

杜宝
 杜宝
发布于 2017/08/30 15:47
字数 804
阅读 15
收藏 0

先来了解下 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>

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 2
博文 33
码字总数 16488
作品 0
兰州
Vue2.0笔记——Ajax,JSONP跨域

Ajax实现 vue本身不支持发送AJAX请求,需要使用vue-resource、axios等插件实现。 axios是一个基于Promise的HTTP请求客户端,用来发送请求,也是vue2.0官方推荐的,同时不再对vue-resource进行...

逝岁月
04/16
0
0
使用vue-resource库发送请求获取数据

使用vue-resource库发送请求获取数据 大家一定知道,在jquery中,我们使用$.ajax()方法,来发送请求获取数据, 在vue中,我们使用vue-resource或者axios来向接口发送请求,获取数据,官方推荐...

不负好时光
2017/10/20
0
0
可能是github上第一款Vue全家桶+Typescript的完整项目

vue-ts-daily 基于Vue.js的2.5.13版本和TypeScript编写的模仿原生应用的WebApp. 👉项目演示地址欢迎star✨ ps: 服务器不在内地,加载可能慢点... 建议直接添加到主屏幕(ios端体验差一些). ...

寻找海蓝96
05/17
0
0
Spring中formdata方式提交json对象和file之一

问题 想使用vue-resource表单提交方式到spring,这个表单中包含json对象和file对象。 思路 将json对象和file对象都放到表单提交方式里面的中,并在中指定内容格式。 步骤 Spring实现和配置 ...

亚林瓜子
06/12
0
0
Vue调试神器vue-devtools安装

前言 vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools的安装。 chrome商店直接安装 vue-devtools可以从chr...

kisshua
07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iOS开发用到的图片尺寸汇总

启动图 型号 竖屏 横屏 iPhone SE 640px × 1136px 1136px × 640px iPhone 6s 750px × 1334px 1334px × 750px iPhone 6s Plus 1242px × 2208px 2208px × 1242px iPhone 7 750px × 1334......

业界小白
23分钟前
0
0
浅谈redis

redis是一个开源,内存式的健值存储数据库,也被称为健值存储的字典服务器。健值类型有字符串,hash(哈希类型),set(集合),list(列表) 和有序集合 特征细节: 内存式:redis将健值存储在主...

拐美人
31分钟前
0
0
无限扩容,按需使用!ZStack推出基于阿里云NAS的文件存储服务

日前,ZStack发布2.6.0版本,正式宣布推出基于阿里云NAS的文件存储服务。得益于业界领先的阿里云分布式存储架构,融合NAS后的ZStack 2.6.0拥有高性能、高可靠、容量无限扩展、一键操作、按需...

ZStack社区版
33分钟前
1
0
崛起于Springboot2.X之Mongodb多数据源处理(35)

多数据源:4个mongodb库! 目录结构图: 1、添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId>......

木九天
39分钟前
0
0
如何获取显示器的EDID信息

Q1: 为什么要写这篇文章? A1:在最近的工作中遇到了不少问题,其中很多都是和EDID相关的。可以说,作为一家以“显示”为生的企业,我们时时刻刻在与EDID打交道。EDID这东西很简单,但是如果...

DB_Terrill
39分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部