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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
jquery入门—数据删除与隔行变色以及图片预览
Jan 07 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
整理Javascript基础语法学习笔记
Nov 29 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
js正则取值的结果数组调试方法
Oct 10 Javascript
详解在HTTPS 项目中使用百度地图 API
Apr 26 Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 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
理解php依赖注入和控制反转
2016/05/11 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
加载 Javascript 最佳实践
2011/10/30 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python简单生成8位随机密码的方法
2017/05/24 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python实现旋转和水平翻转的方法
2018/10/25 Python
logging level级别介绍
2020/02/21 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
表达自我的市场:Society6
2018/08/01 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
军训自我鉴定
2014/01/22 职场文书
党员岗位承诺书
2014/03/25 职场文书
环保口号大全
2014/06/12 职场文书
自我推荐信格式模板
2015/03/24 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
德生2P3收音机开箱评测
2022/04/30 无线电