// app.vue
 
home
about

// router: index.js

import Vue from "vue";
import Router from "vue-router";
import goods from "components/goods/goods.vue";
import ratings from "components/ratings/ratings.vue";
import seller from "components/seller/seller.vue";

Vue.use(Router);

const routes = [{
  path: "/",
  redirect: "/goods"
}, {
  path: "/goods",
  component: goods
}, {
  path: "/ratings",
  component: ratings
}, {
  path: "/seller",
  component: seller
}];

export default new Router({
  routes,
  linkActiveClass: "active"
});

在vue1.x的時候，vue的官方推薦HTTP請求工具是vue-resource，但是在vue2.0的時候將推薦工具改成了axios。

如果想像以前使用 vue-resource 那樣 this.$http.get 調用，要這樣定義：

Vue.prototype.$http = axios;

通過 this.$http.get 來定義通過vue實例來發送get請求，然后通過then后面的回調函數將請求成功的數據接收，通過狀態碼來判斷是否成功以及復制給vue的數據對象。由于這里是用的mock數據（模擬后臺數據），所以用的模擬狀態碼。

const ERR_OK = 0;//表示沒有錯誤信息，即獲取數據成功
this.$http.get("/api/seller").then((response) => {
  response = response.data;
  if (response.errno === ERR_OK) {
    this.seller = Object.assign({}, this.seller, response.data);
  }
});

vue是組件式開發，所以組件間通訊是必不可少的

父傳子: props

子傳父: $emit

兄弟通訊: 1. event bus: 利用一個中間組件來作為信息傳遞中介；2. vuex: 信息樹

vue提供了一種方式，即在子組件定義 props 來接受父組件傳遞來的數據對象。

// 父組件


// 子組件 header.vue
props: {
  seller: {
    type: Object
  }
}

如果是子組件想傳遞數據給父組件，需要派發自定義事件，使用 $emit 派發，
父組件使用v-on接收監控（v-on可以簡寫成@）

// 子組件 RatingSelect.vue，派發自定義事件isContent，將this.onlyContent數據傳給父級

this.$emit("isContent", this.onlyContent);
this.$emit("selRatings", this.selectType);

// 父組件 foodInfo.vue 在子組件的模板標簽里，使用v-on監控isContent傳過來的數據

大型項目可以用 Vue官方推薦的vuex

EventBus ：https://n-y.io/vue-eventbus/

子組件A $emit 派發具體事件，由父組件 @ 監聽得到數據

父組件再利用 $refs 直接訪問子組件B的方法，間接實現數據從子組件A傳遞至子組件B

將相同樣式或功能的區塊多帶帶提出來，作為一個組件。
另外組件中用到的圖片等資源就近維護，即可以考慮在組件文件夾中新建images文件夾。

抽離組件遵循原則：
要盡量遵循單一職責原則，復用性更高，不要設置額外的margin等影響布局的東西

想要達到這種目的，有兩種方法，一種是利用重定向，另一種是利用vue-router的導航式編程。

//在router的index.js文件中設置，要多寫一個對象，指向目標組件

Vue.use(Router);

const routes = [{
  path: "/",
  redirect: "/goods"   // 重定向
}, {
  path: "/goods",
  component: goods
}, {
  path: "/ratings",
  component: ratings
}, {
  path: "/seller",
  component: seller
}];

export default new Router({
  routes,
  linkActiveClass: "active"
});

router.push("/Goods");

生成一個動畫小球的div,并且生成五個小球,五個是為了生成一定數量的小球來作為操作使用,按照小球動畫的速度,一般來說五個也可以保證有足夠的小球數量來運行動畫

動畫的內容分別是外層和內層,外層控制動畫小球的軌道和方向,內層控制動畫小球自身的運行狀態

動畫使用vue的js鉤子實現

因為小球動畫只有一個方向(只執行單方向從上到下滾落),所以只用了before-enter,enter,after-enter

用v-show控制小球的可見性,在動畫執行期間可見,其余時候隱藏

    

      

      //用了兩種方式的動畫,css和js鉤子
        
        //外層動畫
          

          //內層動畫
            

          
        
      
    

設置了balls數組來代表五個小球

設置了dropBalls數組正在運行的小球

 data(){
      return {
        balls: [
          {show: false},
          {show: false},
          {show: false},
          {show: false},
          {show: false}
        ],
        dropBalls: []
      }
    },

只要觸發了drop事件,不止是drop事件里面的代碼會執行,另外幾個vue的js監聽鉤子也會一起按順序執行

觸發了 drop 事件

beforeDrop 開始執行

dropping 開始執行

afterDrop 開始執行

drop 事件的觸發可以通過點擊 cartcontrol 組件的添加小球按鈕 addCart 事件觸發使用 $emit ，也可以父組件 this.$refs.shopcart.drop(target); 直接觸發

這么做的目的是實現，在子組件 cartcontrol 點擊之后，可以將具體點擊的 dom 傳給父組件 goods 然后再傳給子組件 shopcart，（因為目前他們之間的通道就是這樣，shopcart子組件并沒有導入cartcontrol子組件，所以沒有直接通訊）這樣就實現了多個組件之間的通訊（也可以使用 EventBus 和 vuex），從而可以實現需求，例如這里就是實現點擊子組件 cartcontrol 后添加一個動畫,將小球滑落到另外一個組件shopcart

$emit 是觸發當前實例上的事件。附加參數都會傳給監聽器回調。

methods: {
      drop(el) { 
      //觸發一次事件就會將所有小球進行遍歷
        for (let i = 0; i < this.balls.length; i++) {
          let ball = this.balls[i];
          if (!ball.show) { //將false的小球放到dropBalls
            ball.show = true;
            ball.el = el; //設置小球的el屬性為一個dom對象
            this.dropBalls.push(ball); 
            return;
          }
        }
      },

      beforeDrop(el){ //這個方法的執行是因為這是一個vue的監聽事件
        let count = this.balls.length;
        while (count--) {
          let ball = this.balls[count];
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect(); //獲取小球的相對于視口的位移(小球高度)
            let x = rect.left - 32;
            let y = -(window.innerHeight - rect.top - 22); //負數,因為是從左上角往下的的方向
            el.style.display = ""; //清空display
            el.style.webkitTransform = `translate3d(0,${y}px,0)`; 
            el.style.transform = `translate3d(0,${y}px,0)`;
            //處理內層動畫
            let inner = el.getElementsByClassName("inner-hook")[0]; //使用inner-hook類來單純被js操作
            inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
            inner.style.transform = `translate3d(${x}px,0,0)`;
          }
        }
      },

      dropping(el, done) { //這個方法的執行是因為這是一個vue的監聽事件
        /* eslint-disable no-unused-vars */
        let rf = el.offsetHeight; //觸發重繪html
        this.$nextTick(() => { //讓動畫效果異步執行,提高性能
          el.style.webkitTransform = "translate3d(0,0,0)";
          el.style.transform = "translate3d(0,0,0)";
          //處理內層動畫
          let inner = el.getElementsByClassName("inner-hook")[0]; //使用inner-hook類來單純被js操作
          inner.style.webkitTransform = "translate3d(0,0,0)";
          inner.style.transform = "translate3d(0,0,0)";
          el.addEventListener("transitionend", done); //Vue為了知道過渡的完成，必須設置相應的事件監聽器。
        });
      },

      afterDrop(el) { //這個方法的執行是因為這是一個vue的監聽事件
        let ball = this.dropBalls.shift(); //完成一次動畫就刪除一個dropBalls的小球
        if (ball) {
          ball.show = false;
          el.style.display = "none"; //隱藏小球
        }
      }
    }

關于 transitionend

關于drop方法,是實現每一個ball的show屬性和el屬性處理,并且點擊一次會自動將一個小球放到 dropBalls 數組里面,放到里面就代表的是一個小球已經被開始執行動畫,但是由于動畫是異步的,所以先主動設置.

關于 getBoundingClientRect (位移的計算是從左上角開始)

使用 getBoundingClientRect 獲取到當前元素的坐標,然后需要位移的left減去元素的寬獲取真正的最終位移x坐標

使用 getBoundingClientRect 獲取到當前元素的坐標,然后需要當前屏幕的高度減去元素的 top 再減去元素本身的高度獲取到真正的最終位移 y 坐標,并且這個是負數,因為是從左上角往下的方向

關于html重繪

因為瀏覽器對于重繪是有要求并且是有隊列完成的,這是主要為了性能,雖然動畫隱藏了小球display none,但沒有觸發html重繪,或者說沒有立即觸發html重繪,所以需要手動

let rf = el.offsetHeight; 這是一個手動觸發html重繪的方法

網頁性能管理詳解

高性能JavaScript 重排與重繪

    .ball-container
      .ball
        position: fixed //小球動畫必須脫離html布局流
        left: 32px
        bottom: 22px
        z-index: 200 
        transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
        .inner
          width: 16px
          height: 16px
          border-radius: 50%
          background: rgb(0, 160, 220)
          transition: all 0.4s linear

關于cubic-bezier(0.49, -0.29, 0.75, 0.41),是動畫拋物曲線(貝塞爾曲線)的配置，基于css3實現，參考貝塞爾曲線與CSS3動畫、SVG和canvas的基情 ,至于拋物線放在外層就是為了控制內層的元素的軌道和方向的.

整個流程是:

綁定星星類型的class(48,36,24尺寸),使用starType

使用class來顯示星星,有3種類型,全星,半星,無星,使用star-item代表星星本身,然后分別使用on,off,half代表三種不同類型的星星

一個span代表一個星星項目,并且使用v-for循環將星星項目輸出

最后形成的星星html就類似這樣

設置常量是為了方便解耦

星星計算比較巧妙(根據分數轉換為星星數)

對于分數score進行乘以2然后向下取整，然后再除以2，是為了獲取所有星星的數量，并且這個數量是0.5倍數的,例如4.6 2就是9.2，然后向下取整是9，然后再除以2就是4.5，那么就可以得到一個0.5倍數的星星數，可以轉換為4個全星+一個半星

對于非整數的星星算作是半個星星，需要知道是否有存在這種情況，所以分數score%1 ，例如 8 % 1是0，8.5 % 1就不是0，并且這個半星只會出現一次，因為半星狀態就只要一個

沒有星星的部分是要補全的，這里使用while循環來處理這種情況

引入mixin.styl是為了使用bg-image的mixin,因為之前做了一個mixin是專門處理2x和3x圖片的轉換

因為這里有3種類型的星星圖片,分別是48尺寸,36尺寸,24尺寸,所以對于每一個類別的圖片分別使用一種class做對應

每一種星星的尺寸都是有一種相對應的圖片的,例如48尺寸的星星就會有,并且圖片放在相對應的vue文件目錄下

star48_half@2x.png
star48_half@3x.png
star48_off@2x.png
star48_off@3x.png
star48_on@2x.png
star48_on@3x.png

備注:父組件food.vue傳入的數據

方法有：@select="selectRating" @toggle="toggleContent"，通過將字組件的方法和父組件的方法進行關聯，這樣就能夠實現跨組件通訊和操作

屬性有：:selectType="selectType":onlyContent="onlyContent" :desc="desc":ratings="food.ratings"，這是通過pros傳入到子組件的屬性，將父組件的數據傳到子組件里面，也帶有一種通過父組件來初始化子組件屬性的意思.

  

  
    

    
      {{desc.all}}{{ratings.length}}
      {{desc.positive}}{{positives.length}}
      {{desc.negative}}{{negatives.length}}
    
    
    

      
      只看有內容的評價
    
  

@click="select(2,$event)" select方法傳入類型和事件,然后在methods里面調用父組件的方法,實現子組件控制父組件的目的

:class="{"active":selectType ===2}" 根據類型來確定顯示的class,實現不同類型顯示不同樣式的目的

positives.length 使用計算屬性自動計算類型數組的長度,用來顯示不同類型的數量

@click="toggleContent" :class="{"on":onlyContent}"

toggleContent 控制是否展示有內容的rate,也是在methods里面調用父組件的方法,實現子組件控制父組件的目的

綁定on這個class來控制該按鈕的樣式

  const POSITIVE = 0; //設置顯示常量
  const NEGATIVE = 1;
  const ALL = 2;

  export default{
    props: {
      ratings: { //傳入ratings數組,跟food.ratings關聯
        type: Array,
        default(){
          return [];
        }
      },
      selectType: { //跟selectType關聯,通過在父組件里面設置這3個值來實現控制子組件的操作
        type: Number,
        default: ALL
      },
      onlyContent: { //跟onlyContent關聯
        type: Boolean,
        default: true
      },
      desc: { //跟desc關聯
        type: Object,
        default(){
          return {
            all: "全部",
            positive: "滿意",
            negative: "不滿意"
          }
        }
      }
    },
    computed: {
      positives(){ //自動過濾rateType(正面的rate)
        return this.ratings.filter((rating) => { //js的filter函數會返回一個處理后的(為true)結果的結果數組
          return rating.rateType === POSITIVE;
        })
      },
      negatives(){ //自動過濾rateType(反面的rate)
        return this.ratings.filter((rating) => {
          return rating.rateType === NEGATIVE;
        })
      }
    },
    methods: {
      select(type, event) { // 選擇rateType并且通知父組件
        if (!event._constructed) {
          return;
        }
        this.$emit("select", type); // 派發事件，父組件監聽此事件
      },
      toggleContent(event) { // 選擇是否顯示有內容的rate,并且通知父組件
        if (!event._constructed) {
          return;
        }
        this.$emit("toggle");
      }
    }
  }

v-for使用已經很常見了,不過這里需要了解，vue1和2有區別,現在是用vue2,所以index變量傳遞會變成現在這種模式 (item,index) in goods

vue傳遞原生事件使用$event

:class="{"current":currentIndex === index}" 是vue的綁定class的使用方法，通過綁定一個class變量來直接操作，并且這里的邏輯會跟js代碼里面對應

通過currentIndex和index做對比，來確認是否添加current類，他們之間的對比關系也就是 menu 區域和 foods 區域的顯示區域的對比關系

通過添加current類來實現當前頁面的區域的樣式變化

currentIndex是一個計算屬性，可以隨時變化并且直接反應到dom上(看js里面邏輯)

v-show 和 v-if 的區別官網已經說過

v-if 是“真正的”條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——直到條件第一次變為真時，才會開始渲染條件塊。

一般來說， v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件不太可能改變，則使用 v-if 較好。

$refs 的使用是vue操作dom的一種方式:

ref 被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的 $refs 對象上。

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子組件上，引用就指向組件實例:

hook鉤子類的使用,需要結合js里面的語法來看,這個類只是用來操作,不會產生dom的渲染,方便js控制清晰.

是通過selectFood方法寫入到vue實例里面,然后傳給子組件food

這里selectFoods被自動添加了count屬性,是為了讓購物車更加簡單的計算已選擇的food

@import "./base";
@import "./mixin";
@import "./icon.css";

import "common/css/index.scss";

克隆項目到本地
git clone git@github.com:nanyang24/eleme-vue.git

安裝依賴
npm install

本地開發，開啟服務器，瀏覽器訪問http://localhost:8080
npm run dev

構建生產
npm run build

運行打包文件
node prod.server.js 

會看到 Listening at http://localhost:9000 在瀏覽器中打開即可