實習專案開發總結

sub_dance發表於2018-10-29

本文來自於自己的經驗總結，並不一定是最好的，或最規範的。如果你有任何建議十分歡迎提出

非父子元件間的通訊

  1. 在src中建立一個eventbus.js作為eventbus的中轉站
  2. 使用emit與on來在不同元件中監聽事件
import Vue from `vue`
export default new Vue();
//建立eventBus中轉站 

import EVENTBUS from `@/eventBus`
//在需要用到的元件中匯入eventbus
updateList(){
        EVENTBUS.$emit(`updateList`, 1)
      }
//註冊事件，並傳遞引數
activeGetSpliter() {
        EVENTBUS.$on(`activeGetSpliter`, reg => {
          this.isLoading = true;
          this.isActive = false;
          this.getSpliter(reg);
          });
      },
//監聽事件，處理引數

在Vue中操作DOM

其實如果使用了VUE，個人認為不與DOM打交道是最好的：)

@click=`changeSpliter(spliterIndex, $event)`
//在函式中傳遞一個叫$event的引數
var spliterDOM = $event.target.parentNode.previousElementSibling.childNodes[0];
//如此便可以獲取DOM
console.log($event.target)
//可以如此來觀察所選取的是何元素

v-for巢狀迴圈

想象下列場景，從後端得到的json物件裡有一backUp陣列，陣列由數個物件組成，每個物件裡包含一個字串型別的spliter_id，和一個brand_arr的陣列。brand_arr陣列中有數個物件，每個物件包brand_id和一些其他的brand基本資訊。現在要將數個spliter_id展示，且在其下方展示其包含的brand_id。

<div>
<div
  v-for=`(spliter, spliterIndex) in backUp`
  :key=`spliterIndex`
  ><!--單個spliter-->
  {{ spliter.spliter_id}}
</div>
<div
  v-for=`(brand, brandIndex) in spliter.brand_arr`
  :key=`brandIndex`
  ><!--單個brand-->
  {{ brand.brand_id }}
</div>
</div>

注意兩個v-for中的引數使用。使用合適的引數可以很快捷的完成迴圈巢狀，來展示包含多個層級關係的資料

vue開發環境跨域代理配置

在config/index.js中寫入以下內容

moudle.exports =  {
  dev: {
    assetsSubDirectory: `static`,
    assetsPublicPath: `/`,
    proxyTable: {
      `/GetSpliterAndBrandBySite`: {
        target: `https://wpc-product.earth.xpas.dell.com`,
        changeOrigin: true,
        secure: false,
        pathRewrite: {
          `^/GetSpliterAndBrandBySite`: `/GetSpliterAndBrandBySite`
        }
      },
    },
  }
}

接下來，如果想使用GetSpliterAndBrandBySite這個api，只需在請求中寫入

var url = `/GetSpliterAndBrandBySite`;

就行了。

相關文章