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弹出层永远居中实现思路及代码
Nov 29 Javascript
node.js中的fs.close方法使用说明
Dec 17 Javascript
javascript常用的方法整理
Aug 20 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
JS验证不重复验证码
Feb 10 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
关于ES6箭头函数中的this问题
Feb 27 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
vue无限轮播插件代码实例
May 10 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
layui 上传图片 返回图片地址的方法
Sep 26 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
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
使用PHP接受文件并获得其后缀名的方法
2015/08/05 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
php实现将HTML页面转换成word并且保存的方法
2016/10/14 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
不一样的文字闪烁 轮番闪烁
2009/11/11 Javascript
从数组中随机取x条不重复数据的JS代码
2013/12/24 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
2016/01/25 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
JavaScript无缝滚动效果的实例代码
2017/03/27 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
微信、QQ、微博、Safari中使用js唤起App
2018/01/24 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
2019/11/14 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
python3中函数参数的四种简单用法
2018/07/09 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
美国50岁以上单身人士约会平台:SilverSingles
2018/06/29 全球购物
企业总经理岗位职责
2014/02/13 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
Python&Matlab实现樱花的绘制
2022/04/07 Python