Vue中的vue-resource示例详解


Posted in Javascript onNovember 02, 2018

vue-resource特点

vue-resource插件具有以下特点:

1. 体积小 vue-resource非常小巧,在压缩以后只有大约12KB,服务端启用gzip压缩后只有4.5KB大小,这远比jQuery的体积要小得多。

2. 支持主流的浏览器 和Vue.js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。

3. 支持Promise API和URI Templates Promise是ES6的特性,Promise的中文含义为“先知”,Promise对象用于异步计算。 URI Templates表示URI模板,有些类似于ASP.NET MVC的路由模板。

4. 支持拦截器 拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用,比如请求发送前在headers中设置access_token,或者在请求失败时,提供共通的处理方式。

下面通过示例看下Vue中的vue-resource一起看看吧

  • 版本:vue-resource v1.2.1
  • 作用:

  Vue与后台Api进行交互通常是利用vue-resource来实现的,本质上vue-resource是通过http来完成AJAX请求相应的。

用法:

  Vue实例对象注册this.$http服务,可以发送HTTP请求。解析请求所返回的结果。此外,Vue实例将会自定绑定到this所在的回调函数中。

{
 // GET /someUrl
 this.$http.get('/someUrl').then(response => {
  // success callback
 }, response => {
  // error callback
 });
}

快捷方法列表

get(url, [config])
head(url, [config])
delete(url, [config])
jsonp(url, [config])
post(url, [body], [config])
put(url, [body], [config])
patch(url, [body], [config])

配置信息命令

Vue中的vue-resource示例详解

响应

Vue中的vue-resource示例详解

源码

下面我将以get请求访问json文件的方式来展示vue-resource的用法。

html中的源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-router</title>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="item in list">{{item.name}}</li>
    </ul>
    <button @click="getData">get请求</button>
  </div>
<script src="../../../js/vue/vue/1.0/vue.js"></script>
<script src="../../../js/vue/vue-resource/1.2.1/vue-resource.js"></script>
<script type="application/javascript">
  var vm = new Vue({
    el:'#app'
    ,data:{
      list:[]
    }
    ,methods:{
      getData(){
        var url = '../json/get.json';
        this.$http.get(url).then(function(res){
          var body = res.body;
          if(body.status){
            alert('请求出错!');
          }
          this.list = body.message;
        });
      }
    }
  });
</script>
</body>
</html>

json文件中的源码

{
 "status":0
 ,"message":[
  {
   "id":1
   ,"name":"张三"
  }
  ,{
   "id":2
   ,"name":"李四"
  }
 ]
}

结果

Vue中的vue-resource示例详解

分析

上面的代码实现的功能是在页面中通过点击button按钮来触发一个getData的click响应事件,而该事件实现的功能是发送一个url请求(尽管说其请求的是本地的json文件数据,不过其请求后台的方法和该方法是一模一样的,所以说其用于请求后台的数据也是同样的用法。),该请求返回url链接所响应的数据。而该返回数据将会在then()回调函数中进行相应的处理,比如说我们的json文件中就返回了status响应状态码,其中0代表成功,否则失败。而一旦响应成功,则调用body.message,将相应的数据主体绑定到data数据域中的list中,由于list中的数据有变动,因而Vue会自定的刷新li的v-for中的页面信息,进而完成页面信息的更新操作。

总结

以上所述是小编给大家介绍的Vue中的vue-resource示例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
Jun 02 Javascript
jquery 1.3.2 IE8中的一点点的小问题解决方法
Jul 10 Javascript
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
关于JavaScript 原型链的一点个人理解
Jul 31 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 #Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 #Javascript
element ui table 增加筛选的方法示例
Nov 02 #Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 #Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 #Javascript
如何使用vuex实现兄弟组件通信
Nov 02 #Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 #Javascript
You might like
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
jQuery实现长按按钮触发事件的方法
2015/02/02 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
javascript自定义右键弹出菜单实现方法
2015/05/25 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
详解Vue.js和layui日期控件冲突问题解决办法
2019/07/25 Javascript
vue移动端模态框(可传参)的实现
2019/11/20 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
js实现时间日期校验
2020/05/26 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
基于TensorFlow中自定义梯度的2种方式
2020/02/04 Python
python梯度下降算法的实现
2020/02/24 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
阿里健康大药房:阿里自营网上药店
2017/08/01 全球购物
网络工程师的自我评价
2013/10/02 职场文书
生产管理的三大手法
2013/11/11 职场文书
厂长助理岗位职责
2013/12/27 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
保证书范文大全
2014/04/28 职场文书
初中新生军训方案
2014/05/13 职场文书
就业意向书范本
2015/05/11 职场文书
7个关于Python的经典基础案例
2021/11/07 Python
Vue实现跑马灯样式文字横向滚动
2021/11/23 Vue.js
剖析后OpLog订阅MongoDB的数据变更就没那么难了
2022/02/24 MongoDB
Python使用pandas导入csv文件内容的示例代码
2022/12/24 Python