VUE中使用Vue-resource完成交互
更新时间：2017年07月21日 11:00:41 作者：小之
本篇文章主要介绍了VUE中使用Vue-resource完成交互，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文介绍了VUE中使用Vue-resource完成交互，分享给大家，具体如下
使用vue-resource
引入vue-resource
vue-resource就像jQuery里的$.ajax，是用来跟后端交互数据的，vue-resource是vue的一个插件，所以我们在开始使用vue之前，需要先引入vue-resource.js这个文件
<script src='js/vue.js'></script> <script src='js/vue-resource.js'></script>
基本语法
// 基于全局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方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。
options对象
实例：
GET请求
在下面的实例中，我们做一个求和的功能,效果如下图：
get方法：
this.$http.get('/someUrl', [options]).then(function(response){
// 响应成功回调
}, function(response){
// 响应错误回调
});
在该实例中，我们准备了一个php文件，该文件主要接收前台通过get传过来的参数，并计算两个参数的和，代码如下：
<?php $a=$_GET['a']; $b=$_GET['b']; echo $a+$b; ?>
html代码：
<div class="container" id="box" style="margin-top:100px"> <input type="text" name="" id="" v-model="a" />+ <input type="text" name="" id="" v-model="b" /> = <input type="button" value="求和" class="btn btn-info" @click="add()"/> </div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
a:"",
b:""
},
methods:{
add:function(){
this.$http.get("get.php",{
"a":this.a,
"b":this.b
}).then(function(response){
alert(response.data)
},function(response){
alert(response.status)
}
)
}
}
})
</script>
说明：response是后台返回的参数，它包括以下属性：
POST请求
<?php $a=$_POST['a']; $b=$_POST['b']; echo $a+$b; ?>
new Vue({
el:"#box",
data:{
a:"",
b:""
},
methods:{
add:function(){
this.$http.post("post.php",{
"a":this.a,
"b":this.b
},{
emulateJSON:true //POST请求需要将emulateJSON设置为true
}).then(function(response){
alert(response.data)
},function(response){
alert(response.status)
}
)
}
}
})
JSONP
jsonp的语法跟get，post差不多，只是传递的数据不一样。接下来，我们用jsonp来完成一个百度搜索的功能。
1.首先准备一个实例的接口，这个接口是百度的搜索接口（我们可以自己找一些接口作为测试）,如下：
https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show
2.准备布局
<div class="container" id="box" style="margin-top:100px">
<input type="text" placeholder="请输入搜索内容" />
<ul>
<li >22222</li>
</ul>
<p >暂无数据...</p>
</div>
3.功能描述
当我们在搜索框中输入搜索的内容的时候，下面的列表会显示出根据我们输入的内容联想的词语。按键盘的上下键，可以上下选择列表中的词语，按enter键的时候，会执行搜索
4.代码实现
首先我们准备一个myData数组，存放联想的词语。t1是input框输入的值，如下
<input type="text" placeholder="请输入搜索内容" v-model="t1" />
data:{
myData:[],
t1:""
}
在搜索框中的输入内容的时候，执行一个方法，这个方法主要用于发送一个请求，获取输入内容的联想词语。
<input type="text" placeholder="请输入搜索内容" v-model="t1" @keyup="search()"/>
methods:{
search:function(ev){this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
"wd":this.t1
},{
jsonp:"cb" //callback名字，默认是callback
}).then(function(response){
this.myData=response.data.s
},function(response){
alert(response.status)
}
)
}
}
执行到这一步，列表中已经可以显示出我们搜索的联想词语了，如下图：
下面的我们可以实现，按上下键的时候，选择词语
<div class="container" id="box" style="margin-top:100px">
<input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/>
<ul>
<li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
/*data数据*/
data:{
myData:[],
t1:"",
now:-1
}
/*上下键的方法*/
changeDown:function(){
this.now++;
if(this.now==this.myData.length){
this.now=-1;
}
this.t1=this.myData[this.now];
},
changeup:function(){
this.now--;
if(this.now==-2){
this.now=this.myData.length-1;
}
this.t1=this.myData[this.now];
}
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初识vue</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" rel="external nofollow" />
<style type="text/css">
.gray{
background-color: gray;
}
</style>
</head>
<body>
<div class="container" id="box" style="margin-top:100px">
<input type="text" v-model="t1" @keyup="search($event)" @keydown.down.prevent="changeDown($event)" @keydown.up.prevent="changeup()"/>
<ul>
<li v-for="(value, index) in myData" :class="{gray:index==now}">{{value}}</li>
</ul>
<p v-show="myData.length==0">暂无数据...</p>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//
new Vue({
el:"#box",
data:{
myData:[],
t1:"",
now:-1
},
methods:{
search:function(ev){
if(ev.keyCode==38 || ev.keyCode==40)return;
if(ev.keyCode==13){
window.open('https://www.baidu.com/s?wd='+this.t1);
this.t1='';
}
this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
"wd":this.t1
},{
jsonp:"cb" //callback名字，默认是callback
}).then(function(response){
this.myData=response.data.s
},function(response){
alert(response.status)
}
)
},
changeDown:function(){
this.now++;
if(this.now==this.myData.length){
this.now=-1;
}
this.t1=this.myData[this.now];
},
changeup:function(){
this.now--;
if(this.now==-2){
this.now=this.myData.length-1;
}
this.t1=this.myData[this.now];
}
}
})
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了详解Vue组件之间的数据通信实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Vue3 实现双盒子定位Overlay的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
本文仿照Vue Cookbook 组织形式，对优化 Vue 组件的运行时性能进行阐述。通过基本的示例代码给大家讲解，需要的朋友参考下2018-11-11
这篇文章主要介绍了vue watch监听取不到this指向的数问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
斗鱼直播是比较火的直播视频，想必大家都看过吧。这篇文章主要介绍了Vue-cli-webpack搭建斗鱼直播步骤详解,需要的朋友可以参考下2017-11-11
下面小编就为大家分享一篇vue获取当前激活路由的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue-cli4 配置不同开发环境打包命令,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-07-07
这篇文章主要为大家介绍了VueJs中customRef函数使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
开发项目的时候,用到文件上传的功能很常见,包括单文件上传和多文件上传,下面这篇文章主要给大家介绍了关于vue3+koa实现文件上传功能的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了在vue项目中如何使用emoji表情,包括font-awesome图标,v-emoji-picker,vue-emoji等emoji表情库,需要的可以参考下2025-03-03
最新评论