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
>
4div
>
5template
>
6<
script
>
7function
matchscore(score) 
15if
(floor 
>0) 
18let residue 
=countstar 
-group.length;
19if
(residue 
>0) 
23}24return
group;25}
2627
export 
default,31
data() ;
35},
36methods: {},
37watch: 
41},
42created() 
45};
46script
>
47<
style
>
48.star-box 
52.star:nth-child(1) 
55.star 
63.on 
6667
.half 
7071
.off 
74style
>

弄張**瀏覽下所有功能點吧：

vue2 0 練習專案 外賣APP 2

今天終於把商品頁和購物車功能弄出來了，在這個開發過程中遇到一些小坑，比如購物車和商品頁是分開兩個元件的，沒有利用到vue的雙向資料繫結的特性，導致在操作加減商品數量時兩個元件的資料沒有同步，後來我就重寫了一遍，好好的利用了vuex的狀態保持，這個東西真的很好用。先秀一段我寫的vuex 吧！1 狀態管...

vue2 0 練習專案 外賣APP 1

前言 vue這個框架現在挺流行的，作為乙個專注前端100年的 愛好者，學習下目前流行的框架是必須的！在網上搜尋vue的專案是比較少的，在官網進行了入門學習後，沒有乙個專案練習鞏固下，學了就等於沒學，所以我就決定自己寫乙個專案咯。在這裡我也順便分享下我學習vue的資源。我在github上發現了乙個vu...

vue 2 0 的專案配置

vue 2.0 的專案配置 1 vue腳手架指的是vue cli，它是乙個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕鬆的建立新的應用程式而且可用於自動生成vue和webpack的專案模板 2 搭建步驟 全域性安裝 cnpm install vue cli g vue v 檢測版本 例項化乙個專案...