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 相关文章推荐
$()JS小技巧
Jul 21 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
jquery实现submit提交表单
Feb 03 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
Feb 26 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
把vue-router和express项目部署到服务器的方法
Feb 21 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
js代码实现轮播图
May 04 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 Ubb代码编辑器函数代码
2012/07/05 PHP
php获取四位字母和数字的随机数的实现方法
2015/01/09 PHP
PHP SPL标准库之接口(Interface)详解
2015/05/11 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
asm.js使用示例代码
2013/11/28 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
javascript伸缩型菜单实现代码
2015/11/16 Javascript
js 实现一些跨浏览器的事件方法详解及实例
2016/10/27 Javascript
Vue.js创建Calendar日历效果
2016/11/03 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
微信小程序实现一张或多张图片上传(云开发)
2019/09/25 Javascript
vue element-ui实现input输入框金额数字添加千分位
2019/12/29 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
vue单文件组件无法获取$refs的问题
2020/06/24 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
Python 多线程的实例详解
2017/09/07 Python
Python generator生成器和yield表达式详解
2019/08/08 Python
Python底层封装实现方法详解
2020/01/22 Python
python序列类型种类详解
2020/02/26 Python
Python logging模块原理解析及应用
2020/08/13 Python
python 实现的车牌识别项目
2021/01/25 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
十八届三中全会报告学习材料
2014/02/17 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
社区党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
未婚证明格式
2015/06/15 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技