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>