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與后臺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])
配置信息命令
響應
源碼
下面我將以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":"李四"
}
]
}
結果
分析
上面的代碼實現的功能是在頁面中通過點擊button按鈕來觸發一個getData的click響應事件，而該事件實現的功能是發送一個url請求（盡管說其請求的是本地的json文件數據，不過其請求后臺的方法和該方法是一模一樣的，所以說其用于請求后臺的數據也是同樣的用法。），該請求返回url鏈接所響應的數據。而該返回數據將會在then()回調函數中進行相應的處理，比如說我們的json文件中就返回了status響應狀態碼，其中0代表成功，否則失敗。而一旦響應成功，則調用body.message，將相應的數據主體綁定到data數據域中的list中，由于list中的數據有變動，因而Vue會自定的刷新li的v-for中的頁面信息，進而完成頁面信息的更新操作。
總結
以上所述是小編給大家介紹的Vue中的vue-resource示例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
