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 dom 操作详解 js加强
Jul 13 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
Jun 18 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
通过实例了解js函数中参数的传递
Jun 15 Javascript
js prototype和__proto__的关系是什么
Aug 23 Javascript
Vue指令实现OutClick的示例
Nov 16 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 SRF-22W(33W)的电路分析和维修案例
2021/03/02 无线电
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
javascript实现文字图片上下滚动的具体实例
2013/06/28 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JS实现点击按钮获取页面高度的方法
2015/11/02 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
2016/01/15 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
2016/05/07 Javascript
JavaScript作用域示例详解
2016/07/07 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
浅谈AngularJS中使用$resource(已更新)
2017/09/14 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
从零开始最小实现react服务器渲染详解
2018/01/26 Javascript
jQuery Dom元素操作技巧
2018/02/04 jQuery
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
原生JavaScript实现轮播图
2021/01/10 Javascript
[01:58]DOTA2上海特级锦标赛现场采访:RTZ这个ID到底好不好
2016/03/25 DOTA
python的几种开发工具介绍
2007/03/07 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
图文详解Django使用Pycharm连接MySQL数据库
2019/08/09 Python
keras输出预测值和真实值方式
2020/06/27 Python
屈臣氏越南官网:Watsons越南
2021/01/14 全球购物
幼儿园园长六一致辞
2015/07/31 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python