Vue 作品實戰直播班 心得分享

Jiang V
9 min readJul 7, 2021

分享這八週的上課心得,只要你不放棄你自己,六角就會在線上幫助你。

時間過得太快,這九週課程竟然結束了,中間一度真的很想放棄,一直在聽不懂老師在公殺毀的輪迴下懷疑自己真的適合繼續學習下去嗎?還一直想快點結束課程,因為聽不懂真的很挫折、自我懷疑加劇,但,這門課我還是有撐到最後唷,每堂課都沒有登出、也沒有缺席,反倒是更加努力一直複習老師上課的內容,每堂課影音至少都多聽三遍,作業到現在也交到第六週、邁向第七週了,正準備著手最終作品,心裡也有個大概的雛形!

以下心得不會有任何技術程式碼,純粹是個人學習上的心得感想,可安心觀看 :)

當初為什麼報名這堂課

學習不是一個人的事情,你需要找人來幫你!

有鑒於去年底的 切版直播班 讓我的學習成長有大幅度提升,於是就在切版直播班結束後,跟著六角學院感謝祭的優惠活動一口氣買下 JS直播班 與 Vue 的課程(是說兩個一起買比較便宜啦,更何況自己目前還是初心者在新手村接任務,想說先 run 過一遍所有直播課程,勢必先經歷一番挑戰,才有辦法勇者鬥惡龍),也好險去年底決定投資自己在前端學習上,也擬定了自己的進修計畫,因為在年後開始覺得公司比起往年的狀況差~很~多~,公司終於在今年4月,疫情爆發前,公司宣布我這個部門要收攤惹!!!登愣~~~ 員工遭到資遣,當然也包括我,也只能姑且先帶著這筆資遣費開始認真學習吧!前端轉職之路又再度正式展開了 … 怕豹.jpg

菜雞的第一週 ~ 還是菜雞的第八週的學習過程

五月 Vue3 直播班終於開課,也開始有點事情可以做了,從離職後就一直自己學習,也是以做出一個作品為目標,開課前除了看影音課程,還有老師釋出的一些課前影片,當然還要複習之前JS直播的課程內容,很多觀念都沒有掌握好,尤其JS最後兩三週的作業,幾乎都是參考老師的版型邏輯,沒辦法自己寫出來,導致 Vue3 課前影片前後看了兩三遍,都還看不太懂,也不好理解!但課程買了,就是要認真上下去,至少不會對不起自己的錢錢啊!

先說好遊戲規則,此課程適合具有基礎 JavaScript 經驗的開發者

我的背景是設計 + HTML初心者 / CSS初心者 / JS 超級初心者

  • 想尋找前端工作,但還沒有作品者
  • 對於函式有基礎的概念,並清楚如何撰寫函式(function)
  • 正在開始學習任一種 JavaScript 框架(Angular、React、Vue)

第一週、第二週:函式拆解、關注點分離、This、Promise、RESTful API

第一堂第二堂是偏向於 JS 掌握度,像是ES6常用縮寫、樣板字面值、forEach 以外的陣列方法 (比如:map) 如何運作、Vue 開發者工具搞了很久才搞定,還有可怕的 this ,老師還提到第四週會遇到的大魔王很難… 感覺會很打擊,心情有點受挫,但這些大概都是必經過程,其實在 JS 班時學了許多 JS 語法,也了解到函式拆解,而第一堂課就是在複習函式結構化拆解練習以及關注點分離!緊接著練習API串接,身為前端一定要學的就是了解 Promise 非同步觀念用法以及 CRUD 一定要懂!

  • 相對於關注點分離,就是沒有關注點分離:資料跟畫面尬在一起
  • 關注點分離:HTML, JS 分離 / 資料與方法分離
  • CRUD:get、post、put、delete 讀取新增更新刪除 (必學)

第三週、第四週:Vue 後台介面練習,元件化 Component、生命週期 life cycle

第三週 Vue 的起手式,開始進入最常用的 Vue 語法,開始學了一堆指令,有些真的是難到叫媽媽,真的不知道學這個要幹嘛,直到課程要結束了,才知道老師的用心,是要我們先了解其原理,後面才會運用,像是This 運作、資料與方法展開、元件綁定、物件傳參考的特性,不得不說物件傳參考我到現在還不知道在幹嘛哩。指令大概學了這幾個 v-bind ( :縮寫 )/ v-model / v-if, v-else / v-on ( 縮寫@ )/ v-for / v-bind 到了第八週時發現,最常用到大概真的就這幾個語法!

進入第四週,真的是靠北週,開始有老師講的以下這些症狀,學的時候好像會,真的要自己做卻不知道如何著手:

  • 看範例作品都會寫,蓋起來就不會
  • 老師直播時都懂,但要自己運用就卡卡的
  • 寫完作業好像失憶一般,再寫一次也不一定有把握

總之,這週在教如何建立元件(全域註冊、區域註冊),元件資料傳遞 props emit ( 傳來傳去靠北難,現在還是看不太懂 )、生命週期(這個就親民許多,比較知道在做啥了)

瘋狂加碼教學,帶你學到會,影片真心的看不完啊!?!!!!!

第五週、第六週:Vue API、Vue Router、Vue CLI

第五週的內容相對之前難上許多,因為是進階語法,$refs / mitt / watch / Vue Router / VeeValidation / mitt ,老實說有些東西還沒進入狀況哩,看來要再看三遍影片了!好難吶 ~~~~~ 飆眼淚

進入第六週我開始又感到自信,因為我的老mac (2011的唷不能再更新了超誇張,好啦很多人推坑我M1了 ) 然後 Vue Cli 竟然可以裝成功了,網頁也運行起來了,開始覺得 Vue 也沒那麼難嘛,cli 運行起來, vue router 設定好路徑,不就是這樣 npm install / npm run serve / vue ui / npm run build (這種歡樂的時候好景不常,因為真正開始開發後會出現很多紅蚯蚓),不過別擔心,第五週開始,每個星期日的下午卡斯伯老師都有加碼作業詳解直播以及陪你寫程式到下午四點,真的覺得六角學院是佛心來著,哪個單位課程會一直再加碼免費直播啦,而且都是兩小時在起跳的,真的好感謝六角讓我帶來自信,完全不怕作業寫不出來了~( 灑花 )

這週老師也公布加碼獎品的內容了,我心想都已經報名這堂課,就不要放棄了吧,更何況獎品內容真的很吸引我,至少也要完成到80%吧,80%的獎品就已經相當超值了!( 只要完成1~6週主線任務+報到任務+心得牆任務 = 80% )小孩才選擇,獎品我全都要啦 !!!

第七週、第八週:如何讓設計不難看、總複習及實戰演示

第七週是請俊儀老師來做課程講解,主要的內容分為四個主題:C.R.A.P. 是從平面設計延伸出來的設計準則,運用於介面設計的視覺與動線,達到優化使用者體驗的效果。

  • 對比(Contrast)
  • 重複(Repetition)
  • 對齊(Alignment)
  • 相近(Proximity)

這幾個準則很好理解,但操作起來其實是有一定難度的,因為還要搭配字體、色彩、畫面比例等等等的相關設計細節,都是相當困難,還要大量搜集相關網站的資訊,才有辦法做出『 好看 』的網站!然後俊儀老師的講課風格實在是很振奮人心哩,哈哈哈 !!!!!

接著第八週回到卡斯伯老師示範最終作業版型的套用,老師真的太懂大家了,知道大家做不出來,還不會套版,特別教大家怎麼用Bootstrap 套版,這堂課對我來說真的是大實用大加分,感覺起來我的最終作業應該可以先完成 60%了!

課程終於進入尾聲了,作品努力中 !!!

加碼第九週:同學許願,老師就示範!

佛心加碼週老師講了很多網站會用到的小元件小功能,像是我的最愛、圖片輪播、隨機取得相同類別、分類列表、sweetalert,這些都是相當實用,可以用在最終作品上面的功能。課程終於到了尾聲,發現卡斯伯老師很容易 live demo 魔咒 XDDD

從一開始的課前影音開始學習就很有障礙的我,直到第八週要結束前,才真正開始感覺自己有點懂 Vue!感謝卡斯伯老師、助教不厭其煩的回饋各種菜雞廢廢小問題跟疑難雜症,雖然最終作業我還沒完成,但這趟旅程走到這裡,就已經值回票價了,值得再刷!

這門課最大的收穫就是,『 所有的同學都是你的老師 』,每當我有疑惑時,就會 slack 上面翻翻看,看是否有同學也遇到問題,有時也會發現自己的盲點,最棒的是,現在同學提問給助教的問題都會記錄起來,我也會去翻找答案!

還可以在程式勇者村裡看別人的程式碼,看看別人跟自己的差異,看別人是怎麼解決自己無法解決的問題!

另外,我覺得很可惜的地方是 slack 有些舊訊息會被洗掉,嗚嗚嗚,覺得很可惜,雖然有些是不重要的訊息,但對於需要的同學卻是很重要且實用的資訊,希望我有另一顆腦袋可以把大家所有踩到的雷點都記錄下來!

對於想入坑的同學的話,我想就是:必須帶著一顆保持熱忱的心去學習,因為這條路有很多 bug 需要你自己去解決!大概是這樣,這是我這三個月來學習 Vue 的過程,希望自己卡關能時常來看這篇,找回想轉職的初衷!

最後,真的要推爆六角學院的 直播課程跟影音課程 真的對前端超級新手很友善,又有助教可以隨時詢問,真的很棒 %%%%%%%%%%%%%

六角不怕沒資源,只怕你不學!

接下來,七八月要繼續再戰洧杰老師的網頁切版班啦!繼續踩坑打怪去!

--

--