文档章节

Vue-resource 仿百度下拉菜单

杜宝
 杜宝
发布于 2017/08/30 15:47
字数 804
阅读 25
收藏 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
Vue-cli下的开发模式 三

//创建一个项目 目录 {{message}} 文本 v-html 输出html v-if v-show 显示和隐藏 v-bind v-model //双向绑定 GET POT vue-resource 1、npm install vue-resource --save 2、router/index.js......

大灰狼wow
09/25
0
0
10、手把手教 Vue--Mint UI 使用

PS:转载请注明出处 作者: TigerChain 地址: https://www.jianshu.com/p/db776b507065 本文出自 TigerChain 简书 手把手教 Vue 系列 教程简介 1、阅读对象 本篇教程适合新手阅读,老手直接略...

TigerChain
10/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一个可能的NEO链上安全随机数解决方案

0x00 困境 链上安全随机数生成应该算是一个比较蛋疼的问题,哪怕你的系统再牛逼,合约程序困在小小的虚拟机里,哪怕天大的本事也施展不开。 更悲催的是,交易执行的时候,是在每一个节点都执...

暖冰
今天
1
0
【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部