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 相关文章推荐
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
May 29 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
element-ui使用导航栏跳转路由的用法详解
Aug 22 Javascript
Preload基础使用方法详解
Feb 03 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
Oracle Faq(Oracle的版本)
2006/10/09 PHP
php之字符串变相相减的代码
2007/03/19 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
用jQuery实现检测浏览器及版本的脚本代码
2008/01/22 Javascript
JavaScript 判断指定字符串是否为有效数字
2010/05/11 Javascript
js获取当前页面路径示例讲解
2014/01/08 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
2018/12/03 Javascript
微信小程序生成二维码的示例代码
2019/03/29 Javascript
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
追悼会上的答谢词
2014/01/10 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
大学军训感言300字
2014/03/09 职场文书
四风问题自我剖析材料
2014/10/07 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
校运会宣传稿大全
2015/07/23 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers