VUE例子之慕課網
作為一個Java後端開發者,小編已經將近3年沒有寫過前端了,當年在學校學習時候,H5剛出來,
我們都是用純html標籤+bootstrap樣式來寫網頁的，還記得第一個網頁寫的是小米的官網。
時隔3年後，再次有了一個新的念頭,寫寫前端,剛開始小編想用React來寫的，
奈何React不支援雙向資料繫結(其實是太難了,學不會_),於是就考慮了一個國產的VUE,
聽說VUE是很簡單,於是我也躍躍欲試。前期斷斷續續積累支援大概一週時間。學習了基礎語法。
感覺還可以。沒有React那麼難。於是週末11/03就模仿寫了一個慕課網的頁面，用到的技術是VUE+餓了麼的Element。
下面將過程分享出來，並談談我對現代前端模組化開發的感受。因為不是專業的前端開發,所以大神勿噴。
作品展示慕課網
技術棧: VUE + ElementUI + axios
- 第一部分: 主要模仿慕課網
- 第二部分: 利用axios網路請求,隨機生成詩詞,新增todoList
第一部分: 主要模仿慕課網
專案目錄(主要分為5個元件)
頁面分別對應的模組
navMenu.vue
主要包含一個慕課網的login和文字和搜尋框。
然後從ElementUI中找到模板，並填充自己的內容。並新增css陰影樣式
新增陰影
bannerCard.vue
到ElementUI找佈局
Aside中新增10個按鈕(並新增css樣式保持背景顏色一樣)
Header中新增一個走馬燈
Main中新增四個(css樣式參考慕課網)
segmentation.vue
分割符號（前後在模板中新增兩個載入轉圈的logo並css為紅色文字作為變數支援自定義）
shopClass.vue
原理類似todoList定義個卡片,根據數量來展示
到ElementUI中找到卡片元件
todoList
另外因為是寫的第一個VUE例子,也寫了一個todoList的例子,放在頁面下方。可以隨機生成詩詞並新增到todoList中
原理是:
利用axios請求一個詩詞API並通過VUE雙向繫結展示到input便籤中,當新增按鈕指定就新增到詩詞list中。
下面利用v-for展示todoList
到這裡基本所有的內容描述了，如果也要練習建議程式碼克隆下來,仔細研究。VUE是很簡單的，小編總共就學習了不到1周的時間,如果要算總時間應該也不超過24小時。說這些的目的並不是炫耀而是說一個道理,就是程式設計都是想通的,當你會一門語言，那麼在學習其他語言就都是簡單的.程式設計都是面向物件。
總結下來，現代的前端開發已經和之前小編學習時候是今非昔比了,難度不亞於後端開發,不過元件是開發是可以二次利用的,定義好元件，很多地方都可以使用(就像上面的segmentation.vue和shopClass.vue一樣)。感興趣的同學可以來學前端。