VUE中使用Vue-resource完成交互


Posted in Javascript onJuly 21, 2017

本文介绍了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对象

VUE中使用Vue-resource完成交互

实例:

GET请求

在下面的实例中,我们做一个求和的功能,效果如下图:

VUE中使用Vue-resource完成交互

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是后台返回的参数,它包括以下属性:

VUE中使用Vue-resource完成交互

 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>

VUE中使用Vue-resource完成交互

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)
          }
          )




}
        }

执行到这一步,列表中已经可以显示出我们搜索的联想词语了,如下图:

VUE中使用Vue-resource完成交互

下面的我们可以实现,按上下键的时候,选择词语 

<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
intro.js 页面引导简单用法 分享
Aug 06 Javascript
node.js中格式化数字增加千位符的几种方法
Jul 03 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
学习vue.js计算属性
Dec 03 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
使用JavaScript通过前端发送电子邮件
May 22 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 #Javascript
js图片轮播插件的封装
Jul 21 #Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 #Javascript
AngularJS中使用three.js的实例详解
Jul 21 #Javascript
Axios学习笔记之使用方法教程
Jul 21 #Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 #Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 #Javascript
You might like
一段php加密解密的代码
2006/10/09 PHP
php中的观察者模式
2010/03/24 PHP
PHP连接SQLSERVER 注意事项(附dll文件下载)
2012/06/28 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
使用js操作cookie的一点小收获分享
2013/09/03 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
2015/04/12 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
JavaScript实现省市区三级联动
2020/02/13 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
Python2.X/Python3.X中urllib库区别讲解
2017/12/19 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python 字典套字典或列表的示例
2019/12/16 Python
python如何绘制疫情图
2020/09/16 Python
Python调用飞书发送消息的示例
2020/11/10 Python
python实现KNN近邻算法
2020/12/30 Python
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
小加工厂管理制度
2014/01/21 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
新农村建设汇报材料
2014/08/15 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Hive HQL支持2种查询语句风格
2022/06/25 数据库