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 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
angularjs指令中的compile与link函数详解
Dec 06 Javascript
jQuery实现复选框成对选择及对应取消的方法
Mar 03 Javascript
jQuery插件制作的实例教程
May 16 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
Jul 23 Javascript
bootstrap table实现合并单元格效果
Dec 24 Javascript
JS使用Dijkstra算法求解最短路径
Jan 17 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 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与已存在的Java应用程序集成
2006/10/09 PHP
php cookis创建实现代码
2009/03/16 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
表单提交验证类
2006/07/14 Javascript
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
JQuery中节点遍历方法实例
2015/05/18 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
JS常用的几种数组遍历方式以及性能分析对比实例详解
2018/04/11 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
用C++封装MySQL的API的教程
2015/05/06 Python
python实现的希尔排序算法实例
2015/07/01 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python微信公众号开发平台
2018/01/25 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
详解python项目实战:模拟登陆CSDN
2019/04/04 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
全球烹饪课程的领先预订平台:Cookly
2020/01/28 全球购物
金山毒霸系列的笔试题
2013/04/13 面试题
如何查找和删除数据库中的重复数据
2014/11/05 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
金融专业推荐信
2013/11/14 职场文书
教师学习培训邀请函
2014/02/04 职场文书
MySQL5.7并行复制原理及实现
2021/06/03 MySQL
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python