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>

 

 

posted @ 2018-08-03 11:44  甘劭  阅读(572)  评论(0编辑  收藏  举报