遇到別人在我的部落格下留言，按照我的方法在他那裡出現了問題，我的回答本意只是讓他檢查一下是否是自己那邊的問題導致的，N長時間之後，回覆說我答非所問，說了等於沒說云云。其實學習就是一個發現問題，解決問題的過程。別人給出的答案只是針對別人遇到的情況，你去嘗試的時候，也許有用，也許沒用。沒用就繼續去尋找答案唄，不斷嘗試，說不定什麼時候問題就解決了。好了，言歸正傳了，這幾天在看慕課網上的仿餓了麼專案，學習的過程中對我覺得有必要總結的知識點總結了一下。

1. 載入路由模組的預設選中狀態
2. 使用了一些之前沒有用過的屬性：
   filter:blur(10px);backdrop-filter:blur(10px);
3. 結合transform實現動畫效果
4. flex佈局的使用
5. 自定義元件及元件間通訊
6. 事件冒泡

export default new Router({

  linkActiveClass:'active',//選中時新增類名
  routes: [

    {
      path: '/',
      // component: Goods
      redirect:'/goods' //定義的初始路由路徑
    },
    ...
 ]
 })

使用vue-cli工具自動生成的router/index.js檔案中，當path為‘／’時載入元件Goods，這種寫法元件也加載出來了，但是沒有預設選中效果。使用重定向有選中效果。
linkActiveClass:’active’這句程式碼會給當前選中的item新增類名active,所以自己在style標籤中寫樣式即可起作用。

.tab-item .active{
  color: orange;
}

2、使用了filter:blur(10px);實現頭部背景圖片的模糊效果
菜鳥教程上有對此屬性的詳細介紹：CSS3 filter(濾鏡) 屬性

使用了backdrop-filter:blur(10px)屬性給彈出框

backdrop-filter CSS applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.
//backdrop-filter作用於它後面的元素，要看到效果得讓它的background有一定透明度

3、使用vue的過渡屬性transition實現過渡動畫效果


在寫購物車彈出購物列表這個過渡效果的時候遇到了問題，購物列表是購物車中的元素，採用絕對定位，
第一次寫的時候是採用top:0;進行的定位

所以購物列表在顯示的時候需要在y軸方向向上移動自身高度。

.fold-enter-active,.fold-leave-active{
        opacity: 1;
        transform: translate3d(0,－100%,0);
        transition: all 0.5s linear;
    }

    /*v-enter:定義初始狀態*/
    .fold-enter,.fold-leave-to{
        opacity: 0;
        transform: translate3d(0,0,0);
    }

這種寫法最終不能夠停留在y:－100%的位置，後來就換了一種寫法，採用bottom:100%進行定位，
這樣位置本身就是對的，只需要將初始位置在y軸方向向下移動100%；

.fold-enter-active,.fold-leave-active{
        opacity: 1;
        transform: translate3d(0,0,0);
        transition: all 0.5s linear;
    }

    /*v-enter:定義初始狀態*/
    .fold-enter,.fold-leave-to{
        opacity: 0;
        transform: translate3d(0,100%,0);
    }

具體什麼情況還不太懂…

4、對於左右佈局，一邊寬度固定，另一邊自適應，使用flex佈局真是很簡單，還有導航欄中的平均分配寬度也很適合使用flex佈局。