vue2.0 練習項目-外賣APP(完)

　　通過今天的努力，終於把這個項目作完了；功能不是不少，就三個頁面這樣子吧！在開發過程當中也有遇到些小問題的。好比我在弄那個star評選星星組件時就遇到一個問題了，在created事件中做數據請求是異步的，而star控制中的created事件也只會執行一次，致使頁面在加載出來時分數值始終是0的。後面思考了下，使用了watch屬性去對數據進行監聽，從而能夠達到效果。

　　截段star控件的代碼看看吧。

 1 <template>
 2     <div class="star-box">
 3         <span class="star" v-for='(item,index) in starGroup' :class='item' ></span>
 4     </div>
 5 </template>
 6 <script>
 7 function matchScore(score) {
 8   let len = parseInt(score),
 9     floor = parseFloat(score) - len,
10     countStar = 5,
11     group = [];
12   for (var i = 0; i < len; i++) {
13     group.push("on");
14   }
15   if (floor > 0) {
16     group.push("half");
17   }
18   let residue = countStar - group.length;
19   if (residue > 0) {
20     for (var j = 0; j < residue; j++) {
21       group.push("off");
22     }
23   }
24   return group;
25 }
26 
27 export default {
28   props: {
29     score: 0
30   },
31   data() {
32     return {
33       starGroup: []
34     };
35   },
36   methods: {},
37   watch: {
38     score: function(newScore) {
39       this.starGroup = matchScore(newScore);
40     }
41   },
42   created() {
43     this.starGroup = matchScore(this.score);
44   }
45 };
46 </script>
47 <style>
48 .star-box {
49   display: inline;
50   vertical-align: sub;
51 }
52 .star:nth-child(1) {
53   margin-left: 0px;
54 }
55 .star {
56   margin-left: 10px;
57   display: inline-block;
58   width: 20px;
59   height: 20px;
60   background-repeat: no-repeat;
61   background-size: 100% 100%;
62 }
63 .on {
64   background-image: url("./star24_on@2x.png");
65 }
66 
67 .half {
68   background-image: url("./star24_half@2x.png");
69 }
70 
71 .off {
72   background-image: url("./star24_off@2x.png");
73 }
74 </style>

　　其實開發過程當中遇到的問題不是不少，vue這個框架真的是挺容易上手的，總結下用到知識點：vue2 + vuex + vue-router + webpack + ES6/7。

　　弄張動圖瀏覽下全部功能點吧：

　　項目demo演示地址：https://codeyoyo.github.io/seller-app/dist/ （請用chrome手機模式預覽）

　　項目源碼地址：https://github.com/codeyoyo/seller-app