// 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的時(shí)候，vue的官方推薦HTTP請(qǐng)求工具是vue-resource，但是在vue2.0的時(shí)候?qū)⑼扑]工具改成了axios。

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

Vue.prototype.$http = axios;

通過(guò) this.$http.get 來(lái)定義通過(guò)vue實(shí)例來(lái)發(fā)送get請(qǐng)求，然后通過(guò)then后面的回調(diào)函數(shù)將請(qǐng)求成功的數(shù)據(jù)接收，通過(guò)狀態(tài)碼來(lái)判斷是否成功以及復(fù)制給vue的數(shù)據(jù)對(duì)象。由于這里是用的mock數(shù)據(jù)（模擬后臺(tái)數(shù)據(jù)），所以用的模擬狀態(tài)碼。

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

vue是組件式開(kāi)發(fā)，所以組件間通訊是必不可少的

父?jìng)髯? props

子傳父: $emit

兄弟通訊: 1. event bus: 利用一個(gè)中間組件來(lái)作為信息傳遞中介；2. vuex: 信息樹(shù)

vue提供了一種方式，即在子組件定義 props 來(lái)接受父組件傳遞來(lái)的數(shù)據(jù)對(duì)象。

// 父組件


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

如果是子組件想傳遞數(shù)據(jù)給父組件，需要派發(fā)自定義事件，使用 $emit 派發(fā)，
父組件使用v-on接收監(jiān)控（v-on可以簡(jiǎn)寫(xiě)成@）

// 子組件 RatingSelect.vue，派發(fā)自定義事件isContent，將this.onlyContent數(shù)據(jù)傳給父級(jí)

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

// 父組件 foodInfo.vue 在子組件的模板標(biāo)簽里，使用v-on監(jiān)控isContent傳過(guò)來(lái)的數(shù)據(jù)

大型項(xiàng)目可以用 Vue官方推薦的vuex

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

子組件A $emit 派發(fā)具體事件，由父組件 @ 監(jiān)聽(tīng)得到數(shù)據(jù)

父組件再利用 $refs 直接訪問(wèn)子組件B的方法，間接實(shí)現(xiàn)數(shù)據(jù)從子組件A傳遞至子組件B

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

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

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

//在router的index.js文件中設(shè)置，要多寫(xiě)一個(gè)對(duì)象，指向目標(biāo)組件

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");

生成一個(gè)動(dòng)畫(huà)小球的div,并且生成五個(gè)小球,五個(gè)是為了生成一定數(shù)量的小球來(lái)作為操作使用,按照小球動(dòng)畫(huà)的速度,一般來(lái)說(shuō)五個(gè)也可以保證有足夠的小球數(shù)量來(lái)運(yùn)行動(dòng)畫(huà)

動(dòng)畫(huà)的內(nèi)容分別是外層和內(nèi)層,外層控制動(dòng)畫(huà)小球的軌道和方向,內(nèi)層控制動(dòng)畫(huà)小球自身的運(yùn)行狀態(tài)

動(dòng)畫(huà)使用vue的js鉤子實(shí)現(xiàn)

因?yàn)樾∏騽?dòng)畫(huà)只有一個(gè)方向(只執(zhí)行單方向從上到下滾落),所以只用了before-enter,enter,after-enter

用v-show控制小球的可見(jiàn)性,在動(dòng)畫(huà)執(zhí)行期間可見(jiàn),其余時(shí)候隱藏

    

      

      //用了兩種方式的動(dòng)畫(huà),css和js鉤子
        
        //外層動(dòng)畫(huà)
          

          //內(nèi)層動(dòng)畫(huà)
            

          
        
      
    

設(shè)置了balls數(shù)組來(lái)代表五個(gè)小球

設(shè)置了dropBalls數(shù)組正在運(yùn)行的小球

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

只要觸發(fā)了drop事件,不止是drop事件里面的代碼會(huì)執(zhí)行,另外幾個(gè)vue的js監(jiān)聽(tīng)鉤子也會(huì)一起按順序執(zhí)行

觸發(fā)了 drop 事件

beforeDrop 開(kāi)始執(zhí)行

dropping 開(kāi)始執(zhí)行

afterDrop 開(kāi)始執(zhí)行

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

這么做的目的是實(shí)現(xiàn)，在子組件 cartcontrol 點(diǎn)擊之后，可以將具體點(diǎn)擊的 dom 傳給父組件 goods 然后再傳給子組件 shopcart，（因?yàn)槟壳八麄冎g的通道就是這樣，shopcart子組件并沒(méi)有導(dǎo)入cartcontrol子組件，所以沒(méi)有直接通訊）這樣就實(shí)現(xiàn)了多個(gè)組件之間的通訊（也可以使用 EventBus 和 vuex），從而可以實(shí)現(xiàn)需求，例如這里就是實(shí)現(xiàn)點(diǎn)擊子組件 cartcontrol 后添加一個(gè)動(dòng)畫(huà),將小球滑落到另外一個(gè)組件shopcart

$emit 是觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。

methods: {
      drop(el) { 
      //觸發(fā)一次事件就會(huì)將所有小球進(jìn)行遍歷
        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; //設(shè)置小球的el屬性為一個(gè)dom對(duì)象
            this.dropBalls.push(ball); 
            return;
          }
        }
      },

      beforeDrop(el){ //這個(gè)方法的執(zhí)行是因?yàn)檫@是一個(gè)vue的監(jiān)聽(tīng)事件
        let count = this.balls.length;
        while (count--) {
          let ball = this.balls[count];
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect(); //獲取小球的相對(duì)于視口的位移(小球高度)
            let x = rect.left - 32;
            let y = -(window.innerHeight - rect.top - 22); //負(fù)數(shù),因?yàn)槭菑淖笊辖峭碌牡姆较?            el.style.display = ""; //清空display
            el.style.webkitTransform = `translate3d(0,${y}px,0)`; 
            el.style.transform = `translate3d(0,${y}px,0)`;
            //處理內(nèi)層動(dòng)畫(huà)
            let inner = el.getElementsByClassName("inner-hook")[0]; //使用inner-hook類來(lái)單純被js操作
            inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
            inner.style.transform = `translate3d(${x}px,0,0)`;
          }
        }
      },

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

      afterDrop(el) { //這個(gè)方法的執(zhí)行是因?yàn)檫@是一個(gè)vue的監(jiān)聽(tīng)事件
        let ball = this.dropBalls.shift(); //完成一次動(dòng)畫(huà)就刪除一個(gè)dropBalls的小球
        if (ball) {
          ball.show = false;
          el.style.display = "none"; //隱藏小球
        }
      }
    }

關(guān)于 transitionend

關(guān)于drop方法,是實(shí)現(xiàn)每一個(gè)ball的show屬性和el屬性處理,并且點(diǎn)擊一次會(huì)自動(dòng)將一個(gè)小球放到 dropBalls 數(shù)組里面,放到里面就代表的是一個(gè)小球已經(jīng)被開(kāi)始執(zhí)行動(dòng)畫(huà),但是由于動(dòng)畫(huà)是異步的,所以先主動(dòng)設(shè)置.

關(guān)于 getBoundingClientRect (位移的計(jì)算是從左上角開(kāi)始)

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

使用 getBoundingClientRect 獲取到當(dāng)前元素的坐標(biāo),然后需要當(dāng)前屏幕的高度減去元素的 top 再減去元素本身的高度獲取到真正的最終位移 y 坐標(biāo),并且這個(gè)是負(fù)數(shù),因?yàn)槭菑淖笊辖峭碌姆较?/p>

關(guān)于html重繪

因?yàn)闉g覽器對(duì)于重繪是有要求并且是有隊(duì)列完成的,這是主要為了性能,雖然動(dòng)畫(huà)隱藏了小球display none,但沒(méi)有觸發(fā)html重繪,或者說(shuō)沒(méi)有立即觸發(fā)html重繪,所以需要手動(dòng)

let rf = el.offsetHeight; 這是一個(gè)手動(dòng)觸發(fā)html重繪的方法

網(wǎng)頁(yè)性能管理詳解

高性能JavaScript 重排與重繪

    .ball-container
      .ball
        position: fixed //小球動(dòng)畫(huà)必須脫離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

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

整個(gè)流程是:

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

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

一個(gè)span代表一個(gè)星星項(xiàng)目,并且使用v-for循環(huán)將星星項(xiàng)目輸出

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

設(shè)置常量是為了方便解耦

星星計(jì)算比較巧妙(根據(jù)分?jǐn)?shù)轉(zhuǎn)換為星星數(shù))

對(duì)于分?jǐn)?shù)score進(jìn)行乘以2然后向下取整，然后再除以2，是為了獲取所有星星的數(shù)量，并且這個(gè)數(shù)量是0.5倍數(shù)的,例如4.6 2就是9.2，然后向下取整是9，然后再除以2就是4.5，那么就可以得到一個(gè)0.5倍數(shù)的星星數(shù)，可以轉(zhuǎn)換為4個(gè)全星+一個(gè)半星

對(duì)于非整數(shù)的星星算作是半個(gè)星星，需要知道是否有存在這種情況，所以分?jǐn)?shù)score%1 ，例如 8 % 1是0，8.5 % 1就不是0，并且這個(gè)半星只會(huì)出現(xiàn)一次，因?yàn)榘胄菭顟B(tài)就只要一個(gè)

沒(méi)有星星的部分是要補(bǔ)全的，這里使用while循環(huán)來(lái)處理這種情況

引入mixin.styl是為了使用bg-image的mixin,因?yàn)橹白隽艘粋€(gè)mixin是專門(mén)處理2x和3x圖片的轉(zhuǎn)換

因?yàn)檫@里有3種類型的星星圖片,分別是48尺寸,36尺寸,24尺寸,所以對(duì)于每一個(gè)類別的圖片分別使用一種class做對(duì)應(yīng)

每一種星星的尺寸都是有一種相對(duì)應(yīng)的圖片的,例如48尺寸的星星就會(huì)有,并且圖片放在相對(duì)應(yīng)的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傳入的數(shù)據(jù)

方法有：@select="selectRating" @toggle="toggleContent"，通過(guò)將字組件的方法和父組件的方法進(jìn)行關(guān)聯(lián)，這樣就能夠?qū)崿F(xiàn)跨組件通訊和操作

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

  

  
    

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

      
      只看有內(nèi)容的評(píng)價(jià)
    
  

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

:class="{"active":selectType ===2}" 根據(jù)類型來(lái)確定顯示的class,實(shí)現(xiàn)不同類型顯示不同樣式的目的

positives.length 使用計(jì)算屬性自動(dòng)計(jì)算類型數(shù)組的長(zhǎng)度,用來(lái)顯示不同類型的數(shù)量

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

toggleContent 控制是否展示有內(nèi)容的rate,也是在methods里面調(diào)用父組件的方法,實(shí)現(xiàn)子組件控制父組件的目的

綁定on這個(gè)class來(lái)控制該按鈕的樣式

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

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

v-for使用已經(jīng)很常見(jiàn)了,不過(guò)這里需要了解，vue1和2有區(qū)別,現(xiàn)在是用vue2,所以index變量傳遞會(huì)變成現(xiàn)在這種模式 (item,index) in goods

vue傳遞原生事件使用$event

:class="{"current":currentIndex === index}" 是vue的綁定class的使用方法，通過(guò)綁定一個(gè)class變量來(lái)直接操作，并且這里的邏輯會(huì)跟js代碼里面對(duì)應(yīng)

通過(guò)currentIndex和index做對(duì)比，來(lái)確認(rèn)是否添加current類，他們之間的對(duì)比關(guān)系也就是 menu 區(qū)域和 foods 區(qū)域的顯示區(qū)域的對(duì)比關(guān)系

通過(guò)添加current類來(lái)實(shí)現(xiàn)當(dāng)前頁(yè)面的區(qū)域的樣式變化

currentIndex是一個(gè)計(jì)算屬性，可以隨時(shí)變化并且直接反應(yīng)到dom上(看js里面邏輯)

v-show 和 v-if 的區(qū)別官網(wǎng)已經(jīng)說(shuō)過(guò)

v-if 是“真正的”條件渲染，因?yàn)樗鼤?huì)確保在切換過(guò)程中條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件適當(dāng)?shù)乇讳N毀和重建。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——直到條件第一次變?yōu)檎鏁r(shí)，才會(huì)開(kāi)始渲染條件塊。

一般來(lái)說(shuō)， v-if 有更高的切換開(kāi)銷，而 v-show 有更高的初始渲染開(kāi)銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運(yùn)行時(shí)條件不太可能改變，則使用 v-if 較好。

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

ref 被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。

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

hook鉤子類的使用,需要結(jié)合js里面的語(yǔ)法來(lái)看,這個(gè)類只是用來(lái)操作,不會(huì)產(chǎn)生dom的渲染,方便js控制清晰.

是通過(guò)selectFood方法寫(xiě)入到vue實(shí)例里面,然后傳給子組件food

這里selectFoods被自動(dòng)添加了count屬性,是為了讓購(gòu)物車更加簡(jiǎn)單的計(jì)算已選擇的food

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

import "common/css/index.scss";

克隆項(xiàng)目到本地
git clone git@github.com:nanyang24/eleme-vue.git

安裝依賴
npm install

本地開(kāi)發(fā)，開(kāi)啟服務(wù)器，瀏覽器訪問(wèn)http://localhost:8080
npm run dev

構(gòu)建生產(chǎn)
npm run build

運(yùn)行打包文件
node prod.server.js 

會(huì)看到 Listening at http://localhost:9000 在瀏覽器中打開(kāi)即可