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