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 面向对象编程基础:封装
Aug 21 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
js实现常见的工具条效果
Mar 02 Javascript
微信小程序使用input组件实现密码框功能【附源码下载】
Dec 11 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
Angular中sweetalert弹框的基本使用教程
Jul 22 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 Javascript
js实现简单分页导航栏效果
Jun 28 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
关于JavaScript数组去重的一些理解汇总
Sep 10 Javascript
vue vant中picker组件的使用
Nov 03 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
XAMPP安装与使用方法详细解析
2013/11/27 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
win平台安装配置Nginx+php+mysql 环境
2016/01/12 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
javascript跨域刷新实现代码
2011/01/01 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
textarea 控制输入字符字节数(示例代码)
2013/12/27 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
javascript相关事件的几个概念
2015/05/21 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
JS中数组重排序方法
2016/11/11 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
两种简单的跨域方法(jsonp、php)
2017/01/02 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
bootstrap table表格客户端分页实例
2017/08/07 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
2018/04/13 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
JQuery通过后台获取数据遍历到前台的方法
2018/08/13 jQuery
Vue函数式组件的应用实例详解
2019/08/30 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
包装类的功能、种类、常用方法
2012/01/27 面试题
体育专业个人的求职信范文
2013/09/21 职场文书
高中生家长寄语大全
2014/04/03 职场文书
仲裁协议书
2014/09/26 职场文书
评职称个人总结
2015/03/05 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js