VUE Vue资源实例详解

虚拟资源的特征

vue-resource插件具有以下特征：

1.小尺寸vue-resource非常小，压缩后只有12KB左右，服务器上启用gzip压缩后只有4.5KB，比jQuery小很多。

2.支持主流浏览器和Vue.js一样，vue-resource不支持IE 9以下的浏览器，但其他主流浏览器支持。

3.支持承诺应用编程接口和URI模板承诺是ES6的一个特性。Promise的中文意思是“先知”，promise对象用于异步计算。URI模板代表URI模板，类似于ASP.NET MVC的路由模板。

4.支持拦截器拦截器是全局的，拦截器可以在发送请求之前和之后做一些处理。拦截器在某些情况下非常有用，例如在发送请求之前在标头中设置access_token，或者在请求失败时提供通用的处理方法。

让我们通过一个例子来看看vue中的Vue资源

版本：vue-resource v1.2.1功能：vue与后台Api的交互通常是使用vue-resource来实现的，它本质上是通过http来完成AJAX请求。

用法：

Vue实例对象注册了这个。$HTTP服务，可以发送HTTP请求。解析请求返回的结果。此外，Vue实例将绑定到它所在的回调函数。

{ //GET /someUrl这个。$http.get('/someUrl ')。然后(响应={ //成功回调}，响应={ //错误回调})；}快捷方式列表

Get (URL，[config]) head (URL，[config]) delete (URL，[config]) jsonp (URL，[config]) post (URL，[body]，[config]) put (URL，[body]) patch (URL，[body]

反应

源代码

我将通过使用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 . name } }/Li/Ul button @ click=' GetDATa ' get request/button/div script src=' http 3360./././js/vue/1.0/vue . js '/script script src=' http 3360././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 '；这个。$http.get(url)。然后(函数(RES){ var body=RES . body；If(body.status){ alert('请求错误！');} this . list=body . message；});} } });JSON文件中的/script/body/html源代码

{ '状态' :0，'消息' : [{'id' :1，'姓名' : '张三' }，{ 'id':2，'姓名' : '李四' }]结果}

分析

上述代码实现的功能是通过点击页面上的按钮触发getData的click response事件，这个事件实现的功能是发送url请求(虽然它请求本地json文件数据，但是它请求后台数据的方法和这个方法完全一样，所以是用同样的方式请求后台数据。)，它返回url链接响应的数据。返回的数据将在then()回调函数中处理。例如，状态响应状态代码在我们的json文件中返回，其中0表示成功，否则表示失败。一旦响应成功，调用body.message将相应的数据体绑定到数据字段中的列表。由于列表中的数据发生变化，Vue会自行刷新li的v-for中的页面信息，然后完成页面信息更新操作。

摘要

以上是边肖介绍的Vue中Vue-resource例子的详细说明。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！