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 相关文章推荐
Javascript匿名函数的一种应用 代码封装
Jun 27 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
node.js中使用q.js实现api的promise化
Sep 17 Javascript
js实现jquery的offset()方法实例
Jan 10 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
解析PHP 使用curl提交json格式数据
2013/06/29 PHP
php使用fputcsv()函数csv文件读写数据的方法
2015/01/06 PHP
php实现的xml操作类
2016/01/15 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
JQuery live函数
2010/12/24 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
几种二级联动案例(jQuery\Array\Ajax php)
2016/08/13 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
2017/07/13 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
2020/03/09 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
2020/06/11 Javascript
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
Django如何将URL映射到视图
2019/07/29 Python
python实现翻转棋游戏(othello)
2019/07/29 Python
python脚本后台执行方式
2019/12/21 Python
Keras自动下载的数据集/模型存放位置介绍
2020/06/19 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
美国转售二手商品的电子商务平台:BLINQ
2018/12/13 全球购物
入党思想汇报
2014/01/05 职场文书
家具促销活动方案
2014/02/16 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年化验室工作总结
2015/04/23 职场文书
升职自荐书
2019/05/09 职场文书
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技