Vue2.0仿外卖APP（五）

Vue-resource应用(当时的我还不知道axios..)

vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。另外，vue-resource还提供了非常有用的inteceptor功能，使用inteceptor可以在请求前和请求后附加一些行为，比如使用inteceptor在ajax请求时显示loading界面。

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

体积小

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

支持主流的浏览器

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

支持Promise API和URI Templates

Promise是ES6的特性，Promise的中文含义为“先知”，Promise对象用于异步计算。
URI Templates表示URI模板，有些类似于ASP.NET MVC的路由模板。

支持拦截器

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

关于vue-resource更详细的介绍:
http://www.cnblogs.com/keepfool/p/5657065.html

获取数据

如图,Header组件里的商家数据，是通过异步请求后端的数据接口获得的，header组件就负责接受这样的数据并渲染。在app.vue组件（header的父组件），通过发送一个AJAX请求去获取商家的相关数据，取回来的数据放进app.vue里的<header>标签,然后这些数据通过header组件里的prop属性设置一下后,数据就在header组件里,就可以调用这些数据来做我们想做的事情

父子组件间的通信

组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：父组件要给子组件传递数据，子组件需要将它内部发生的事情告知给父组件。然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

在 Vue.js 中，父子组件的关系可以总结为 props down, events up 。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

使用 Prop 传递数据

组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。
prop 是父组件用来传递数据的一个自定义属性。子组件需要显式地用 props 选项声明 “prop”：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

然后向它传入一个普通字符串：

结果输出“hello”。

回到项目中来

首先我们需要给app.vue定义一个seller的对象：可以通过data()方法。在vue.js中，这个data属性是一个函数（可查看链接），因为组件是可以被复用的，如果定义一个对象然后修改某一个组件的话会影响另外的组件，所以这里定义成一个函数。这个函数return一个对象，对象里面有seller对象，先定为空，然后我们通过发送AJAX请求去拿到一个seller对象，然后send给它。这样就可以拿到seller对象的数据。

Vue.js社区有个第三方插件：vue-resource，用来处理一些前后端请求数据交互的。

示例：

{
  // GET /someUrl
  this.$http.get('/someUrl').then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });
}

同样的，需要在package.json添加它的依赖：

第三方插件import引用时需要注册，用Vue.use(vueResource)把这个注册。在main.js注册

然后回到app.vue，在这里我们需要通过一个vue.resource去发送一个AJAX请求，需要在什么时序去发起呢？

我们知道每个vue实例化的时候都有一个生命周期，其中有个钩子叫created().

关于钩子：
https://segmentfault.com/q/1010000004335505

关于实例的生命周期：
https://cn.vuejs.org/v2/guide/instance.html#实例生命周期

这是它的一个生命周期钩子函数，就是一个vue实例被生成后调用这个函数。一个vue实例被生成后还要绑定到某个html元素上，之后还要进行编译，然后再插入到document中。每一个阶段都会有一个钩子函数，方便开发者在不同阶段处理不同逻辑。

一般可以在created函数中调用ajax获取页面初始化所需的数据,如下图:

去chrome的network查看,看到请求已经发出去了

vue-resource就介绍完了，seller对象已经拿到，接下来就把seller对象传递给header组件，让header渲染即可。

这里还有一个坑!!

Vue-resource 1.0的时候,右侧的response就能直接拿到seller字段

但是2.0时,resource封装的方法变了,需要response.body,才能拿到seller,不加body,只会拿到一个Object