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 相关文章推荐
nicejforms——美化表单不用愁
Feb 20 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
Mar 24 Javascript
JS实现简易图片轮播效果的方法
Mar 25 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
jquery表单验证插件formValidator使用方法
Apr 01 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
angular2+node.js express打包部署的实战
Jul 27 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
js实现列表按字母排序
Aug 11 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 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格式化工具Beautify PHP小小BUG
2008/04/24 PHP
phpMyAdmin2.11.6安装配置方法
2008/08/24 PHP
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP 多任务秒级定时器的实现方法
2018/05/13 PHP
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
Vue基于localStorage存储信息代码实例
2020/11/16 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[34:56]Ti4冒泡赛LGD vs Liquid 1
2014/07/14 DOTA
使用python实现扫描端口示例
2014/03/29 Python
python通过ssh-powershell监控windows的方法
2015/06/02 Python
Python Property属性的2种用法
2015/06/21 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
QML用PathView实现轮播图
2020/06/03 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
澳大利亚Mocha官方网站:包、钱包、珠宝和配饰
2019/07/18 全球购物
我未来的职业规划范文
2014/01/11 职场文书
自强之星事迹材料
2014/05/12 职场文书
通知函的格式
2015/04/27 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python