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 相关文章推荐
QUnit jQuery的TDD框架
Nov 04 Javascript
基于jquery实现的鼠标滑过按钮改变背景图片
Jul 15 Javascript
js中parseInt函数浅谈
Jul 31 Javascript
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
JS实现定时自动关闭DIV层提示框的方法
May 11 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
vue使用Axios做ajax请求详解
Jun 07 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
Javascript 解构赋值详情
Nov 17 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获取网站百度快照日期的方法
2015/07/29 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
js日期相关函数总结分享
2013/10/15 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
图解js图片轮播效果
2015/12/20 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
AngularJS 整理一些优化的小技巧
2016/08/18 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
说说AngularJS中的$parse和$eval的用法
2017/09/14 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
js实现列表按字母排序
2020/08/11 Javascript
[02:49:21]2019完美盛典全程录像
2019/12/08 DOTA
python中循环语句while用法实例
2015/05/16 Python
Python中的日期时间处理详解
2016/11/17 Python
python简单操作excle的方法
2018/09/12 Python
Python读写文件基础知识点
2019/06/10 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
上课看小说检讨书
2014/02/22 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
晚会开场白和结束语
2015/05/29 职场文书
复兴之路展览观后感
2015/06/02 职场文书
Nginx快速入门教程
2021/03/31 Servers
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
JavaScript实现复选框全选功能
2021/04/11 Javascript