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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
详解vue渲染从后台获取的json数据
Jul 06 Javascript
基于webpack.config.js 参数详解
Mar 20 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
深入探索VueJS Scoped CSS 实现原理
Sep 23 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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 分页类 扩展代码
2009/06/11 PHP
php生成HTML文件的类方法
2019/10/11 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
微信小程序自定义组件
2017/08/16 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
js神秘的电报密码 哈弗曼编码实现
2019/09/10 Javascript
webpack中的模式(mode)使用详解
2020/02/20 Javascript
使用python统计文件行数示例分享
2014/02/21 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
Python 编码处理-str与Unicode的区别
2016/09/06 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
python对日志进行处理的实例代码
2018/10/06 Python
python生成并处理uuid的实现方式
2020/03/03 Python
Python之字典对象的几种创建方法
2020/09/30 Python
python collections模块的使用
2020/10/16 Python
Python用户自定义异常的实现
2020/12/25 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
最新优秀教师个人先进事迹材料
2014/05/06 职场文书
政工例会汇报材料
2014/08/26 职场文书
爱情保证书
2015/01/17 职场文书
《云雀的心愿》教学反思
2016/02/23 职场文书