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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
Javascript的闭包
Dec 31 Javascript
myeclipse安装jQuery插件的方法
Mar 29 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
vue之数据交互实例代码
Jun 16 Javascript
详解用vue编写弹出框组件
Jul 04 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 Javascript
vue.js 2.0实现简单分页效果
Jul 29 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
JS中锚点链接点击平滑滚动并自由调整到顶部位置
Feb 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 注册时输入信息验证器的实现详解
2013/07/05 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
php简单实现MVC
2015/02/05 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
PHP验证码无法显示的原因及解决办法
2017/08/11 PHP
wordpress自定义标签云与随机获取标签的方法详解
2019/03/22 PHP
PHP使用PDO创建MySQL数据库、表及插入多条数据操作示例
2019/05/30 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
JS获取当前网页大小以及屏幕分辨率等
2014/09/05 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
Node.js的Mongodb使用实例
2016/12/30 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
django简单的前后端分离的数据传输实例 axios
2020/05/18 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
基于Python闭包及其作用域详解
2017/08/28 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
django 框架实现的用户注册、登录、退出功能示例
2019/11/28 Python
Python 支持向量机分类器的实现
2020/01/15 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
人力资源作业细则
2014/03/03 职场文书
节电标语大全
2014/06/23 职场文书
好的旅游活动方案
2014/08/19 职场文书
离婚协议书范文2014(夫妻感情破裂)
2014/12/14 职场文书
阿里云ECS云服务器快照的概念以及如何使用
2022/04/21 Servers
SpringCloud超详细讲解Feign声明式服务调用
2022/06/21 Java/Android