Vue中的vue-resource示例详解 - 行业资讯 - 肥雀云

vue-resource插件具有以下特点:

1。体积小vue-resource非常小巧,在压缩以后只有大约12 kb,服务端启用gzip压缩后只有4.5 kb大小,这远比jQuery的体积要小得多。

2。支持主流的浏览器和Vue。js一样,vue-resource除了不支持IE 9以下的浏览器,其他主流的浏览器都支持。

3。支持承诺API和URI模板的承诺是ES6的特性,承诺的中文含义为“先知”,承诺对象用于异步计算。URI模板表示URI模板,有些类似于ASP。净MVC的路由模板。

4。支持拦截器拦截器是全局的,拦截器可以在请求发送前和发送请求后做一些处理。拦截器在一些场景下会非常有用,比如请求发送前在标题中设置access_token,或者在请求失败时,提供共通的处理方式。

下面通过示例看下Vue中的vue-resource一起看看吧

　　<李>版本:中的例子vue-resource 是processing v1.2.1 　　<李>作用:李　　　　

& # 8195; & # 8195; Vue与后台Api进行交互通常是利用<代码> vue-resource> 　　

<强>用法:

& # 8195; & # 8195; Vue实例对象注册。美元http服务,可以发送http请求。解析请求所返回的结果。此外,Vue实例将会自定绑定到这所在的回调函数中。

　　　　　　{///someUrl 　　美元。http.get ('/someUrl ')。(反应=比;{//成功回调　　}、响应=比;{//错误回调　　}); 　　} 　　　　

快捷方法列表

　　　　　　get (url(配置)) 　　头(url(配置)) 　　删除(url(配置)) 　　jsonp (url(配置)) 　　帖子(url,(身体),[设置]) 　　put (url,(身体),[设置]) 　　补丁(url,(身体),[设置]) 　　　　

配置信息命令

Vue中的vue-resource示例详解

<强>响应

Vue中的vue-resource示例详解

<>强源码

下面我将以得到请求访问json文件的方式来展示vue-resource的用法。

html中的源码

　　　　　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt; title> vue-router 　　& lt;/head> 　　& lt; body> 　　& lt; div id=坝τ谩北? 　　& lt; ul> 　　& lt;李v=跋钅壳宓ァ痹趝{item.name}} & lt;/li> 　　& lt;/ul> 　　& lt;按钮@click=" getData "祝辞得到请求& lt;/button> 　　& lt;/div> 　　& lt;脚本src=" https://www.yisu.com/js/vue/vue/1.0/vue.js "祝辞& lt;/script> 　　& lt;脚本src=" https://www.yisu.com/js/vue/vue-resource/1.2.1/vue-resource.js "祝辞& lt;/script> 　　& lt;脚本类型=坝τ贸绦?javascript”比; 　　var vm=new Vue ({ 　　埃尔:“#应用” 　　数据:{ 　　列表:[] 　　} 　　方法:{ 　　getData () { 　　var url=? ./json/get.json”; 　　美元。http.get (url)(函数(res) { 　　身体var=res.body; 　　如果(body.status) { 　　alert('请求出错!”); 　　} 　　这一点。列表=body.message; 　　}); 　　} 　　} 　　}); 　　& lt;/script> 　　& lt;/body> 　　& lt;/html> 　　　　

json文件中的源码

　　　　　　{ 　　“状态”:0 　　,“消息”: 　　{ 　　“id”: 1 　　“名称”:“张”三　　} 　　, { 　　“id”: 2 　　“名称”:“李”四　　} 　　] 　　} 　　　　

<强>结果

Vue中的vue-resource示例详解

<>强分析

上面的代码实现的功能是在页面中通过点击按钮按钮来触发一个getData的点击响应事件,而该事件实现的功能是发送一个url请求(尽管说其请求的是本地的json文件数据,不过其请求后台的方法和该方法是一模一样的,所以说其用于请求后台的数据也是同样的用法),该请求返回url链接所响应的数据。而该返回数据将会在那时()回调函数中进行相应的处理,比如说我们的json文件中就返回了状态响应状态码,其中0代表成功,否则失败。而一旦响应成功,则调用<代码>身体。消息> v 中的页面信息,进而完成页面信息的更新操作。