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 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
Nov 29 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
IE8中使用javascript动态加载CSS的解决方法
Jun 17 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 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
destoon实现商铺管理主页设置增加新菜单的方法
2014/06/26 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
javascript 字符串连接的性能问题(多浏览器)
2008/11/18 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
Js 导出table内容到Excel的简单实例
2013/11/19 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
vue实现图片上传功能
2020/05/28 Javascript
Python 深入理解yield
2008/09/06 Python
python生成指定长度的随机数密码
2014/01/23 Python
python打开文件并获取文件相关属性的方法
2015/04/23 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
中软国际Java程序员笔试题
2014/07/19 面试题
付款委托书范本
2014/04/04 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
2014年个人业务工作总结
2014/11/17 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
医德医风自我评价2015
2015/03/03 职场文书
文明礼仪倡议书
2015/04/28 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
小学新课改心得体会
2016/01/22 职场文书