vue.js 的插件 vue-resource

vue-resource

Vue.js是數據驅動的，這使得咱們並不須要直接操做DOM，若是咱們不須要使用jQuery的DOM選擇器，就沒有必要引入jQuery。vue-resource是Vue.js的一款插件，它能夠經過XMLHttpRequest或JSONP發起請求並處理響應。也就是說，$.ajax能作的事情，vue-resource插件同樣也能作到，並且vue-resource的API更爲簡潔。另外，vue-resource還提供了很是有用的inteceptor功能，使用inteceptor能夠在請求前和請求後附加一些行爲，好比使用inteceptor在ajax請求時顯示loading界面。

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-resource使用

這裏咱們繼續以前的例子作簡單的描述。

　　1.安裝vue-resource插件       cnpm install  vue-resource --save-dve 

 　　2.在main.js中引入vue-resource      import VueResource from  'vue-resource'   而後在下面使用一下：Vue.use(VueResource)

　　3.在Home.vue中把咱們定義的 users[...] 數組中數據註釋掉。接下來咱們使用網絡的接口----http://jsonplaceholder.typicode.com 這裏面有許多接口提供咱們請求。

生命週期中有個created函數，在頁面沒有加載完成以前，建立的組件完成的鉤子函數。這裏須要在頁面加載以前拿到數據。因此使用

created(){

　　this.$http.get("http://jsonplaceholder.typicode.com/users"）

　　.then((data)) => {

　　this.users = data.body;

}

}

而後在User.vue文件中調用下就能夠了。

<li v-for="user in users">
　　<h2>{{user.name}}</h2>
　　<h3>{{user.message}}</h3>
</li>