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代码压缩器
Oct 12 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
Dec 01 Javascript
javascript实现10个球随机运动、碰撞实例详解
Jul 08 Javascript
基于JavaScript实现类似于百度学术高级检索功能
Mar 02 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
Oct 18 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
总结4个方面优化Vue项目
Feb 11 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 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/08/05 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
javascript中的变量是传值还是传址的?
2010/04/19 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
vue+VeeValidate 校验范围实例详解(部分校验,全部校验)
2018/10/19 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
Python 文件重命名工具代码
2009/07/26 Python
Python实现的数据结构与算法之基本搜索详解
2015/04/22 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
用Python将一个列表分割成小列表的实例讲解
2018/07/02 Python
Python爬虫框架scrapy实现的文件下载功能示例
2018/08/04 Python
Python函数any()和all()的用法及区别介绍
2018/09/14 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python 获取字典键值对的实现
2020/11/12 Python
哈利波特商店:Harry Potter Shop
2018/11/30 全球购物
《胡杨》教学反思
2014/02/16 职场文书
婚内房产协议书范本
2014/10/02 职场文书
单位委托书
2014/10/15 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
培训班通知
2015/04/25 职场文书
今日说法观后感
2015/06/08 职场文书
运动会宣传稿50字
2015/07/23 职场文书
小学教师教学反思
2016/02/24 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers