先来了解下 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 |
|
| ||
method | string | 请求的HTTP方法,例如:'GET', 'POST'或其他HTTP方法 | ||
body | Object ,FormData string | request body | ||
params | Object | 请求的URL参数对象 | ||
header | Object | request header | ||
timeout | number | 单位为毫秒的请求超时时间 (0 表示无超时时间) | ||
before | function(request) | 请求发送前的处理函数,类似于jQuery的beforeSend函数 | ||
progress |
|
|
如果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>