文档章节

Vue-resource 仿百度下拉菜单

杜宝
 杜宝
发布于 2017/08/30 15:47
字数 804
阅读 27
收藏 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>

 

© 著作权归作者所有

共有 人打赏支持
杜宝
粉丝 3
博文 38
码字总数 30525
作品 0
兰州
私信 提问
Vue2.0笔记——Ajax,JSONP跨域

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

逝岁月
2018/04/16
0
0
仿有赞后台+vue+ts+vuecli3.0+elementUi

前言 最近尝试了vue+ts的组合个人感觉vue对于ts并没有特别的像angular2这样的友好,但是对于ts和js之间个人还是选择ts的。语法糖来说es6简直舒爽,下面我详细介绍下怎么使用ts+vue。ts+vue的...

粘贴复制大前端
2018/10/31
0
0
vue通过ajax获取数据踩坑笔记

跨屏网专注一句话JS解决网站移动适配问题,所以除了前端以外,还需要涉及程序开发的部分,而最近流行的vue框架也在内,初次使用vue的时候难免出问题,比如vue通过ajax获取数据的时候,如果不...

蓬门网
2017/12/24
0
0
前端与移动开发之vue-day6(4)

App.vue 组件的基本设置 头部的固定导航栏使用 Mint-UI 的 Header 组件; 底部的页签使用 mui 的 tabbar; 购物车的图标,使用 icons-extra 中的 mui-icon-extra mui-icon-extra-cart,同时,...

czbkzmj
2018/11/21
0
0
vue.js(vue-resource) ---jsonp跨域

之前的笔记说axios没有办法处理跨域问题,所以就引入了vue-resource。使用jsonp来解决跨域问题. vue-resource的基本用法: get(url, [options]) head(url, [options]) delete(url, [options])...

bluefrankey
01/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

ToolBar控件在C#开发APP中的使用方式【附案例源码】——Smobiler移动开发平台

控件说明 底部工具栏控件。 效果演示 其他效果 该界面为仿淘宝UI制作的一个简单的UI模板,源码获取方式请拉至文章末尾。 特色属性 属性 属性说明 Direction(相对布局) 容器主轴方向。 Flex...

amanda112
19分钟前
0
0
模块

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等...

gtandsn
25分钟前
1
0
代码之外的生存指南,这6本书助你提升软实力

上期盟主向大家推荐了6本技术类书籍,引起了热烈反响。那么,工作之余,还有哪些好书能够为你打开更多的精彩世界呢?本期,多位知名企业的技术大咖将继续为您带来好书推荐,在新的一年里,为...

安卓绿色联盟
29分钟前
3
0
5分钟用Jitpack发布开源库

作者: 菜刀文 Demo:https://github.com/helen-x/JitPackReleaseDemo 项目开发中会用到很多开源库, 他们一般通过Maven/Gradle依赖进来的. 演而优则唱,开发越来越溜以后, 你是否也蠢蠢欲动,想发...

SuShine
34分钟前
2
0
状态码 301 与 302的区别

302重定向只是暂时的重定向,搜索引擎会抓取新的内容而保留旧的地址,因为服务器返回302,所以,搜索搜索引擎认为新的网址是暂时的。 而301重定向是永久的重定向,搜索引擎在抓取新的内容的同...

小草先森
40分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部