vue.js开发外卖App项目的vue-resource总结(六)

在vue.js中，data属性是一个函数，因为组件可以被复用，data定义为对象时，修改某个组件，会影响另一个组件，所以data要被定义为一个函数。

ES6的风格规范：data()后面需要添加空格

 export default{
    data() {
    }
 }

vue社区有个比较火的插件：vue-resource，用来处理前后端请求数据交互的。它支持XMLHttpRequest和JSONP的支持。

vue-resource的使用

在package.json中配置vue-resource，在package.json中声明完依赖后，然后npm install安装vue-resource

 "dependencies": {
    "vue": "^1.0.21",
    "vue-resource":"^1.0.1",
    "vue-router":"^0.7.13",
    "babel-runtime": "^6.0.0",
    "better-scroll": "^0.1.7"
  }

vue-resource和vue-router一样都是第3方插件，第三方插件通过模块的方式引用的时候，需要注册，

这块在main.js文件中
import Vue from 'vue';
import VueResource from 'vue-resource';//模块化引入
Vue.use(VueResource);//全局注册

以下是vue-resource的使用，this指代vue的实例，用了vue-resource，相当于给每个vue实例扩展了一个$http属性，

需要vue-resource发起一个ajax请求，什么时候发起呢？每个vue实例都有一个生命周期，有个created钩子函数，我们在created函数中发起请求。
在vue-resourve的1.0版本，

//在app.vue文件中
export default{
 created() {
      //以下代码为发送ajax请求
      this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
        response = response.body; //通过body获取object对象
        if (response.errno === ERR_OK) {//ERR_OK为状态码
          this.seller = Object.assign({}, this.seller, response.data);
          // console.log(this.seller.id);
        }
      });
    },
}

其中vue-resource支持promise的api的写法，promise支持通过同步链式的写法支持一些异步操作。

在以上打印出的对象 this.seller 可以发现，该object的每个字段都有一个get和set方法，vue在实例化过程中，自动给字段添加了get和set方法，其中observer监听这些对象，实现了如果修改这些对象，修改可以自动映射到dom上

以上代码中，then方法的第一个参数为一个成功的回调，在vue-resource中response为一个属性，而在ajax或者jquery中为Json对象。其中以上拿到的response 为

{
    errno:0,
    data:seller
}

该数据在dev-server.js中
apiRoutes.get('/seller',function (req,res) {
   res.json({
    errno:0,
    data:seller
  });
});

可以在network面板看ajax请求是否发送，

eslint在箭头函数两侧必须加空格，() => {}

只要将eslint规则配置为0，则不去检测它

数据传递给组件

 <v-header :seller="seller"></v-header>
export default{
    data() {
      return {
        seller: {
          id: (() => {
            let queryParam = urlParse();
            return queryParam.id;
          })()
        }
      };
    },
    created() {
      this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.seller = Object.assign({}, this.seller, response.data);
          // console.log(this.seller.id);
        }
      });
    },
    components: {
      'v-header': header
    }
  };

其中v-bind指令简写为:

而在header组件中，通过props属性接收传过来的数据

export default{
   props: {
     seller: {
       type: Object
     }
   },
}

插件postcss是根据caniuse官网去写的代码。

flex布局的应用

以下布局应用到flex

 <div class="title">
     <div class="line"></div> //应用span可能在某些安卓浏览器下会有兼容性问题
     <div class="text">优惠信息</div>
     <div class="line"></div>
</div>

css样式如下：

          .title
              display: flex
              width: 80%
              margin: 28px auto 24px auto
              .line
               flex:1
               position: relative
               top: -6px
               border-bottom:1px solid rgba(255,255,255,0.2)
              .text
               padding: 0 12px
               font-size: 14px
               font-weight: 700