## 課程目標 - 能夠寫出天氣查詢應用程式 ## 課程內容 開發應用程式時,經常需要上網找一些資料 API 比如搜尋 `台灣氣象資料 api` 會找到中央氣象局開發的 API 服務 https://opendata.cwb.gov.tw/index 想使用這些 API,通常就把官網說明文件看一看,試一試即可 如果不順利,就上網找找看有沒有人寫過 API 串接教學,照做即可 為了避免 API 服務被濫用、過度呼叫,通常 API 需要註冊之後,取得金鑰(key)才能呼叫 如何使用金鑰驗證?通常是在發出 api call 的時候,在 http request header 裡面附上 API key 也有可能就直接在呼叫的 url 附上,或者在 http post 內用 form data 附上 各種 API 驗證方式不同,取決於 API 提供者的主觀偏好 多找找範例、說明文件,多多嘗試即可 --- 這一課來寫天氣查詢應用程式 關鍵字 `weather app ui` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下: - 頁面上有一個「縣市」選單,可選擇要查詢的縣市 - 選擇縣市之後,在畫面上顯示此縣市當下的這些資訊: - 天氣現象 - 最高溫度 - 最低溫度 - 降雨機率 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 能夠寫出體重追蹤應用程式 ## 課程內容 找套件時,如果官方沒有提供特定框架的版本,通常會有開發者,自行包裝一個,分享給大家使用 搜尋 `how to use 套件名稱 in 框架名稱` 大概就找得到相關資源了 舉例來說,這款圖表套件,官方沒有提供框架版本 https://www.chartjs.org/ 但是社群就有人做好了 https://vue-chartjs.org/ --- 介紹一個網站 https://dribbble.com/ 業界設計師,經常在上面搜尋別人的成品、找靈感、分享靈感 除了在 google 搜尋關鍵字,也可以常常到 Dribbble 搜尋 --- 這一課來寫體重追蹤應用程式 關鍵字 `weight tracking` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下: - 這種程式應該要讓人註冊登入使用,需要後端配合,但我們簡化吧:免登入、把資料存在 local storage 就好 - 此程式能夠新增一筆體重資料,input 欄位有「體重」、「日期」 - 有清單列表顯示每一筆輸入的資料,按照日期排序。每筆資料旁邊有刪除按鈕 - 使用 Chart.js 將體重的走勢,用折線圖(Line Chart)呈現 - 請「不要」使用社群包裝的版本(vue-chartjs),學著自己在框架內導入套件 --- 提示:vue 跟 chart.js 整合的時候,有一個地雷!會導致 `RangeError: Maximum call stack size exceeded ` 要解決這個地雷,請參閱這邊的討論 https://codelove.tw/@birdie2019/post/Ja69K3 --- 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 能夠寫出行事曆應用程式 ## 課程內容 現在新推出的大部份 javascript 套件,都會提供 native(原生)、React、Vue 三種版本,方便使用 舉例來說,這款行事曆套件,就有多種版本 https://fullcalendar.io/ 也有易安裝的 CDN 版本 https://fullcalendar.io/docs/initialize-globals --- 所謂的 React、Vue 或是任何框架版本,其實就只是把套件,根據框架規格,封裝成元件而已 (元件的觀念,之後會教,先別擔心) 套件會大量跟 DOM 互動,框架也會跟 DOM 互動,兩者容易衝突,使用上通常會 bug 一大堆 所以官方會推出套件版本,改掉一些底層寫法,方便框架用戶使用 如果沒有,那就由開發者自己小心管理,通常也沒太大問題 就是把初始化相關放在 `mounted` 裡面,然後狀態更新時,找方法與套件狀態同步,就這樣而已 --- 這一課來寫行事曆應用程式 關鍵字 `calendar app ui` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下: - 這種程式應該要讓人註冊登入使用,需要後端配合,但我們簡化吧:免登入、把資料存在 local storage 就好 - 有一個「新增活動」按鈕,點擊可以輸入「活動名稱」、選擇「活動日期」與「活動時間」 - 不用做成「開始、結束」兩個時間點,就做成開始時間就好 - 日期時間的 UI,請使用 https://github.com/xdan/datetimepicker - 上述功能,可以做成 modal 視窗(輸入欄位放在視窗內),也可以直接把輸入欄位都放在畫面上 - 使用 FullCalendar 呈現行事曆,將活動顯示在對應日期 - 點擊行事曆內的活動,可以刪除活動。請使用 javascript 內建的 `confirm` 函式,確認「是否刪除此筆活動?」後刪除 - 請「不要」用官方 Vue 版本,請用 CDN 版本,學著自己在框架內導入套件 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 能夠寫出分帳應用程式 ## 課程內容 實務上,在開發應用程式,難免需要用到一些數學計算 通常也不用到太進階,大概國中數學的內容就很好用了 我個人經驗是,其實國中數學、高中數學的內容,超級強大、好用 只是大家普遍是填鴨式教育出身,失去創意、不知如何運用了 --- 這一課來寫分帳應用程式 關鍵字 `bill split online` `分帳 app` `splitwise 網頁版` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下: - 這個程式的用途,是跟一群朋友出遊時,方便均分所有支出 - 可以隨時打開使用,所以資料要隨時存到 local storage - 可以清楚看到,誰目前還欠多少錢、誰目前先出了多少錢 - 旅遊結束時,可以根據上述資料,快速地互相結清帳款 UI 規格如下: - 頁面上有一個「分帳成員」清單,裡面列出目前參與分帳的成員 - 有一個「新增成員」按鈕,點擊可以輸入「成員姓名」後新增 - 有一個「新增支出款項」按鈕,點擊可以輸入「款項名稱」、「款項金額」,並且可以選擇「由誰付款」 - 上述兩個功能,可以做成 modal 視窗(輸入欄位放在視窗內),也可以直接把輸入欄位都放在畫面上 - 頁面上條列出所有帳款,顯示付款人、金額、款項名稱,旁邊有刪除按鈕 - 在「分帳成員」清單內,每個成員旁邊顯示「應付金額」或者「應收金額」,分別顯示為紅色、綠色(目前總支出,除以成員人數之後,與成員目前代墊支出的差額) - 頁面上有一個「旅程結束」按鈕,點擊後刪除所有成員、所有款項 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 能夠寫出筆記應用程式 ## 課程內容 應用程式簡單沒關係,只要精準解決用戶通點 甚至可以收一點點月租費,替開發者「賺到一點零用錢」 這一課來寫筆記應用程式 關鍵字 `write notes online` `online note tool` 研究看看目前市面上,大家都做得怎樣 最簡潔的是這兩款 - https://justnotepad.com/ - http://simplenotes.online/ ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下: - 有一大塊輸入文字的地方,用戶可以當成臨時打筆記的地方 - 以 `textarea` 實作即可,純文字即可,不需要複雜的文章格式編輯器 - 筆記內容要隨時記錄到 local storage,用戶隨時關閉、開啟網頁,都不會失去資料 - 側邊或底部,有一排「筆記清單」,用戶可以在多則筆記之間切換 - 畫面上有一個「建立新筆記」按鈕 - 「筆記清單」的每個筆記旁邊,都有「刪除」按鈕 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 能夠寫出碼表應用程式 ## 課程內容 千萬不要小看簡易、陽春的小應用程式 只要做到夠簡單好用、能解決使用者的問題 就算只是放一些網路廣告,也能夠替開發者「賺到一點零用錢」 這一課來寫碼表應用程式 關鍵字 `online stopwatch` `線上碼表` ## 課後作業 請使用 https://replit.com/ 來寫作業 這次作業的規格如下: - 有一個「開始」按鈕,一個「重設」按鈕 - 按下開始之後,「開始」按鈕會變成「暫停」按鈕 - 按下暫停之後,「暫停」按鈕會變成「繼續」按鈕 - 按下重設按鈕,整個碼表會歸零 - 畫面上有清楚的計時數字,起始格式為 `00:00.00` 做出以上功能,你就完成這次的課程目標了!
在 Vue 的學習旅程中 目前只學了官網 `Essentials` 的內容 坊間補習班,通常會接著教 Vue 元件、模組化開發方法、Vue 進階工具、Vue 生態系工具、以及 JavaScript 生態系各種工具 但是我認為,僅僅只是 `Essentials` 的內容,已經足以開發許多功能強大、好用的網頁應用程式、web 工具 在這次的課程,我們將開發一系列「非常有趣、實用」的應用程式 藉由這些練習,打好對於 Vue 理解的基礎,等於是紮穩馬步、練好內功 --- 我曾多次提過,身為工程師,常常要做一些沒做過的功能 需要自學能力、需要願意面對未知的信心與勇氣 這次的課程,我只會提供簡單介紹&關鍵字 接著就直接提出作業規格,你需要自行研究如何完成作業 --- 這堂課要做的各種專案,內容有趣到「你在找工作的時候,能夠直接當作品集放上去」 請以這個目標為標準,把樣式做漂亮、UX 做完整! --- 話不多說,讓我們馬上開始來寫 Vue 吧!
自從改用 React Hooks 搭配 Functional Component 之後,Class 的概念都快忘光光了呢~ (也有可能是根本沒懂過?) 決定 refresh 一下 Class 如何使用。 # 甚麼是 Class? class 是用來創造 Object 的。 想像成 class 是一間汽車工廠,只要給不同的零件就能生成不同型號的車。 # Property 和 Method ### Property Property 用來表示 Object 內有什麼東西。 在定義 Class 之初,需要先建構一個 constructor,用來接收外部參數並指派這些參數給對應的 Property。 ### Method Method 用來表示 Object 可以執行什麼動作。Method 會定義在 constructor 之後。 範例: ``` class Animal { constructor(_species, _sound){ this.species = _species this.sound = _sound } makeSound(){ return `${this.sound.toUpperCase()}!` } } const scooby = new Animal('dog','scooby-dooby-doo'); console.log(`Scooby is a ${scooby.species}`); // Scooby is a dog console.log(`Scooby says "${scooby.makeSound()}"`) // Scooby says "SCOOBY-DOOBY-DOO!" ``` **注意** 如果在 constructor 以外的地方要使用傳進來的參數,要指派給 Property 再用 this.PropertyName 來取用喔! --- 參考資料: [JavaScript Classes Tutorial from freecodecamp_YT](https://youtu.be/2ZphE5HcQPQ)
* [第1課 ── 認識 Vue 基本環境與 render state](https://jsfiddle.net/birdie2019/54pzj7w2/51/) * [第2課 ── 體驗一下 Reactivity 的效果與便利](https://jsfiddle.net/birdie2019/54pzj7w2/55/) * [第3課 ── 學習 Vue 條件判斷式的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/84/) * [第4課 ── 學習 Vue 迴圈的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/94/) * [第5課 ── 學習 Vue 事件處理的寫法](https://jsfiddle.net/birdie2019/54pzj7w2/396/) * [第6課 ── 認識 Lifecycle Hooks 與 Watchers](https://jsfiddle.net/birdie2019/54pzj7w2/415/) * [第7課 ── 認識 Template Refs](https://jsfiddle.net/birdie2019/54pzj7w2/432/) 心得分享: 老樣子,一樣一開始措手不及,文件有些看很多次還是看不懂,一直試才慢慢了解 (但還是有不了解的地方),確實用Vue方便很多!程式碼部分少打逗號分號或括號對不起來的機率增加,如果作業過程跑不動說不定你跟我一樣遇到這個問題XD
簡單示範動畫效果:https://jsfiddle.net/birdie2019/bhdL4r7u/26/ 之前看國外網友的作品覺得作品裡的表單動畫好看,細讀了code,發現只需用HTML和CSS就能做到 主要用到: * [HTML <input> required 屬性](https://developer.mozilla.org/zh-TW/docs/Web/HTML/Element/input) * [CSS :required 選擇器](https://developer.mozilla.org/en-US/docs/Web/CSS/:required) * [CSS :focus 選擇器](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) * [CSS :valid 選擇器](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid) 了解他們的用法和關係,可以試試製作其他驗證動畫效果喔!
Michael Lin 是前網飛資深工程師,年薪高達 45 萬美元,約合新台幣 1300 萬元 但是他在工作四年後離職了,並且在網路上分享了心得 - 原文出處:https://dev.to/_michaellin/why-i-quit-a-450000-engineering-job-at-netflix-1f0g --- ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucmypesj5zywleeojx92.png) > 金手銬 —— 你留在一份你寧願辭職、只是為了錢而待著的工作。 我以為我會永遠留在 Netflix。市場上薪酬最高。講求自由與責任。無限帶薪假期。你還能要求什麼呢? 所以當我在 2021 年 5 月離開 Netflix 時,每個人都認為我瘋了。我父母首先反對。他們來自文化大革命時期的中國,當時幾乎沒有足夠的食物吃,他們認為我正在拋棄他們來到美國所經歷辛苦的一切。 “低下頭去幹活就對了!”他們說。 “不要對你所擁有的不知感恩!”他們說。 我的朋友們也不相信。 “有一堆免費食物欸!” “FAANG 巨頭欸!” “帶著慢慢領股票呀!” 我聽到的唯一讓我略微停頓的反對論點,來自我在 Netflix 的導師。他說我不應該在沒有找到另一份工作的情況下辭職,因為“我會放棄我在 Netflix 的高薪所擁有的影響力。” ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb8qyf1sxngv1xeateei.png) > 一邊休息一邊慢慢領股票 這讓我停頓了整整 3 天,但我還是放棄了。8 個月後的現在,我 100% 確定這是正確的決定。 在這篇文章中,我想談談幫助我了解金手銬真正成本的 3 個因素,以及為什麼每年 50 萬美元的薪水也無法讓我繼續從事我不再喜歡的工作。 ## 一個失敗的角色轉換 隨著辦公室於 2020 年 3 月關閉,工作中所有最好的部分 ——社交、同事、津貼,都消失了。 而你剩下的就是工作本身。因此,如果您不喜歡這份工作,而這就是您的全部,那麼 COVID 會將這一事實放大 10 倍以上。 而且我不喜歡這份工作。但原本不是這樣的。 我在 Netflix 工作了將近 4 年,擔任用戶增長方面的資深軟體工程師。一開始,我覺得自己得到了豐厚的報酬來學習。工作了 1.5 年左右,我都喜歡它。 Netflix 的文化與我之前在亞馬遜經歷過的更為隱秘的文化截然不同。每個產品決策的備忘錄都可供所有員工閱讀。這就像拿錢去讀 MBA。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2amgontvgl7nkhlkecsf.png) > Netflix 對其所有產品決策的透明度是在那裡工作的最佳福利之一。這與蘋果和亞馬遜更為隱秘的文化形成鮮明對比。 但是在我的後半段時間裡,工程工作開始感覺像是複制粘貼。 需要啟動一個新的微服務? 複製粘貼一個舊的,更改業務邏輯,你就完成了。 新的 A/B 測試? 複製粘貼舊的,更改一些測試變體,就完成了。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g1j19x9dvj8lvbga9wk.png) > Netflix 非常喜歡 A/B 測試。這是他們從主頁(來自 Netflix 技術部落格)測試的 CTA 的 4 個變體 我覺得毫無疑問工程可以為 Netflix 所用,但我覺得更好的問題是,某個特定專案是否充分利用了工程資源。所以我想過渡到產品管理,在那裡我可以領導這些工作。我花了 2 年的時間在公司轉了一圈,不停地建立聯繫,與每個組織交談,併申請我能找到的每一個職位。 當我向每個組織申請時,我提交了關於我作為 PM 的優先事項的建議:客戶服務、開發人員生產力、工作室、合作夥伴關係和通知。我建議在我自己的團隊中建立一個角色來幫助管理不斷增長的基礎設施。我還建議其他 PM 可以將更多工作委託給我,這樣他們就可以騰出時間來發展他們的組織。所有這些提議最終都沒有成功。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rchwbz4agbjhitt38tiq.png) > 我花了 2 年的時間兜圈子試圖在 Netflix 找到一份 PM 的工作,但最終落得一場空。 回過頭來看,我意識到自己的錯誤。我想如果我再努力一點,我最終會得到這份工作。但現在我意識到,有時由於結構性問題,事情超出了你的控制。 Netflix 沒有適當的流程來支持這樣的橫向角色變更;我從未見過工程師在這裡成功過渡到產品管理。 他們為我提供了更多與產品管理合作的機會,以培養產品技能,對此我深表感謝。但合作與擁有角色本身不同。歸根結底,你不能只讀一本關於游泳的書就指望學會游泳。你必須跳入水中。 ## 動力減弱,表現減弱 在我失敗的 PM 求職接近尾聲時,我覺得高薪是一個越來越糟糕的優點。原本是在賺錢和學習。現在我只是在賺錢。 我團隊的目標和我的興趣也開始出現分歧。我的團隊正在朝著涉及平台遷移的更注重工程的方向發展。但我的興趣更多地轉向創業和產品管理。我分配的工程工作永遠不會適用於我以後所做的任何其他工作。 我開始覺得我又犯了以前的職業錯誤 - 在一份不適合我的工作上待的時間比我應該做的要長。這個錯誤的代價比人們想像的要高。如果你在一份你想離開的工作上多呆了兩年,並且在你的一生中做了 5 份以上的工作,那麼你只是在你不想做的工作上浪費了你生命中的 10 年。我覺得我在浪費時間。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz85i3mpvnky6zos5qye.png) > 沒有什麼比錯過工作訊息更讓人焦慮的了。 我的動力減弱了,我的表現也隨之減弱。我越來越少參加會議,盡量減少做任何與開發產品管理技能不直接相關的工作,並在溝通方面拖拖拉拉。最後唯一的動機就是不想被解僱。感覺我已經達到了我的目標是這麼低的標準,甚至努力跨越它,這讓我有點難過。 不幸的是,我的經理開始注意到了。在持續 2 個多小時的激烈績效評估中,他告訴我,我需要 1) 更多地參與這次遷移,以及 2) 更加溝通。用他的話說,“如果我想留在團隊中”,我必須在這些方面有所改進。 ## 重新評估 COVID-19 期間的生活優先事項 疫情大流行是一記警鐘。 看著數以百萬計的人死於 COVID 讓我意識到明天是無法保證的。在您的任何夢想實現之前,您可能會死於 COVID。你推遲夢想的時間越長,它永遠不會實現的風險就越大。所以如果有什麼你想要的,你必須現在就去做。 不想再說晚點才是時候了。現在就是時候。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oawd1k9a5lnzses4is3.png) > 被推遲的夢想就是被拒絕的夢想。我一直以來最喜歡的名言。 我意識到金手銬的真正代價是什麼。代價是你的青春,你的時間,你的生命。人們不會準確判斷這些成本,因為薪水是一個硬數字,而你的青春價值更無形。但僅僅因為某些東西難以衡量,並不意味著它的價值就低於金錢等可數的東西。很難衡量品牌、心理健康或愛情的價值,但我們知道這很重要。 看到所有這些人死於 COVID,我害怕有一天我的墓碑上會寫著: > “這裡躺著 Michael。他一生都在做他不想做的工作。然後他感染了 COVID 接著就死掉了。祝安息。” 我在一份我不喜歡的工作上待的時間越長,這成為我墓碑的可能性就越大。我知道我現在必須採取行動 - 我不能一直把棘手的職業問題推到一邊。我不得不辭職。 ## 最後的日子 我把糟糕的績效評估和被解僱的威脅當成是一種解脫。但我想在不被解僱的情況下先拿到遣散費。 因此,幾週後,我在一對一面談中,向我的經理提案,我們討論了“先發制人的遣散費方案”。 我這樣說:“我的表現在下降,因為我的動力在下降。我沒看到我的積極性有可能提高,因為團隊的目標與我的職業目標背道而馳。如果我們現在討論 Netflix 的先發制人遣散費而不是拖延下去會怎麼樣?這樣 Netflix 就可以省錢,你可以更快地找到更適合團隊的人選,我也可以去做我想做的事。對每個人來說都是雙贏的局面。” ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpr7oownjm47eomrnyne.png) > 掙脫束縛。 在他與 HR 討論後,我與他和 HR 進行了最後一次會面,他們同意先發制人地解僱我,然後我拿到了最後的遣散費。金手銬 —— 再見了。 ## Netflix 之後的生活 我以為離開公司我的生活就結束了,但事實恰恰相反。我擔心我會沒有社交生活,但實際上我在退出後遇到了更多的人 —— 其他的創業者、企業家和建設者。 我看到我的心理健康得到改善,因為如果我錯過了另一封電子郵件或 slack 訊息,我因擔心而產生的焦慮消失了。 我現在感到內心深處的平靜,一種堅定的信念,即一切都會好起來的,即使現在不能保證未來的成功。當我在周日晚上打字時,如果工作對我有利,我對周末工作沒有任何問題。沒有比知道我掌握了自己工作的所有價值更好的動力了。 ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvzbuxd6dx1klb8a6mdz.png) 通過只做讓我充滿活力的事情,它可能會諷刺地釋放比我以前賺的更多的潛在收入。 我從 2021 年 5 月辭職已經 8 個月了。我在 2021 年剩下的時間裡休息了一段時間。我在紐約住了幾個月,在猶他州和亞利桑那州進行了一次公路旅行,總體上很享受生活。 我決定全身心地為自己工作。雖然我才剛剛起步,沒有任何真正可靠的收入來源,但我會相信這個過程,如果我致力於讓我充滿活力的事情,好事就會發生。 --- 我現在真的相信,安全行事是最冒險的選擇。當你謹慎行事時,你同樣會暴露在所有的危險之中,而且沒有向上的機會。正如海倫凱勒曾經說過的: ![圖片說明](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srvmeb69o4owf6mhgu66.png) > 謹慎行事是最冒險的選擇。
# 資源分享-練手項目以及結構教學 跟各位分享一個日本的教學網站 做的非常的好 [PAGE](https://code-step.com/) ![](https://i.imgur.com/IV7TlyQ.png) 可以進去逛一下 用擴充軟件翻譯成中文 會發現他的教材做的很用心 很有質感 非常適合新手! 日本不愧是大國(? 這教材至少我自己沒有看過台灣有這樣子的規劃 可以供各位參考練習
https://chat.openai.com/chat 昨天認識了這個ChatGPT 還可以教程式語言 真的太神奇了,大家可以試試 ![](https://i.imgur.com/kMiiZ6d.jpg)
恭喜你完成這份奇怪的 Vue 入門課程 如同我在這門課程中不斷強調的 任何的技術工具,其實都充滿了大量的過時觀念、多餘觀念、錯誤觀念 也就是很多小功能、小語法,要嘛是已經很少人在用了,要嘛是重複設計了,要嘛是根本設計失敗了。這些學了也用不到 偏偏你在補習班或者上網自學的時候,沒有人敢跟你這樣講。因為講的人自己也不太確定、沒有真正深入了解 所以我在這門課程只引導你使用最基本的語法、用最基本的功能 你已經完成了所有作業,代表這些基本功你都順利掌握了 不要小看這種只專注在基本功的學習方法 把基本功摸熟的人,在有必要學習任何進階觀念的時候,會比別人更快融會貫通 --- 偷偷跟你說一句,即便是業界工程師、業界講師,大多數人對於程式設計、大型工具的許多觀念,也都是一知半解的 這沒有什麼問題,我也總是跟你說:能解決問題就好 比較有問題的是:不確定的東西,要知道自己不懂、承認自己也不確定。在有必要的時候,要知道往哪個方向去深究 除此之外,既然自己也不太確定,就不要跟別人說 XXX 寫法一定比 YYY 寫法好,諸如此類的話 在程式開發這個圈子,絕大多數意見,都只是主觀意見,卻被講得好像是科學證明過的公認客觀意見、有對錯之分。這絕非事實 請積極學習,但也請保持懷疑&批判的態度。面對新工具、新觀念,不需要感到太困擾或者焦慮 --- 翻閱 Vue 官方文件,你會發現 `Essentials` 這個段落,你幾乎通通讀完了 這些就是 Vue 的基礎觀念,已足夠你開發出各種易於維護、架構彈性的中型應用程式了 那麼該如何開發大型應用程式呢?那就需要更進一步學習模組化、元件等等的觀念 這些會在後續的課程提到! --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(八)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/jqe6xX
## 課程目標 - 認識 Template Refs ## 課程內容 來讀一下 Template Refs 的說明 - https://vuejs.org/guide/essentials/template-refs.html 簡單來說,在我們使用了任何前端框架之後,就已經把「所有 DOM 更新相關」的工作,委託給了框架處理 我們從此只要寫框架提供的語法就好了,不要直接去操作 DOM! 不然的話,框架已經接手了整個 DOM,你又在某些地方對 DOM 做出更新,會引起衝突,會造成很多 bug! 而且這種 bug 很難處理,因為你不知道框架實際上是怎麼更新 DOM 的,需要深入研究框架背後的機制才行 所以才會說,用了框架,就請避免操作 DOM 但是,很多時候,會需要用一些現成的第三方套件(例如你學過的一堆 jQuery 外掛套件),那些套件初始化設定時,又都需要提供一個 selector 這種情況下,Vue 提供了 ref 功能,讓你可以存取「vue 底下真正的 DOM」,可以拿來跟其他小套件整合 --- 看到這邊,你可能會心想: 「那我如果不使用 ref,我就是要直接使用 `document.querySelector()` 來抓取 DOM 元素,然後作為參數放進其他小套件執行,會怎樣?」 老實講,根據我個人經驗,在絕大多數情況下,其實也根本不會怎麼樣,程式還是可以順利運作的 所以,你真的要這樣做,也是可以的 但如果真的遇到很難解決的 bug,例如抓不到 DOM 元素、抓錯 DOM 元素時,記得往這方向研究一下就是了! ## 課後作業 承接上一課的作業 在輸入記事內容的地方,為了加強 UX,我們來加上 autosize 功能 請使用此款套件 https://github.com/jackmoore/autosize 將 textarea 加上 autosize 功能吧! 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 認識 Lifecycle Hooks 與 Watchers ## 課程內容 來認識一下 Lifecycle Hooks - https://vuejs.org/guide/essentials/lifecycle.html 簡單來說,在 vue 執行階段,又可分為 `mounted` `updated` `unmounted` 等等,將近十個時間點 根據應用程式的需要,可以在這十個時間點,進行必要的檢查&執行特定任務 但是,實務上,除了 `mounted` 經常用來跑一些初始化任務之外,其餘的時間點,幾乎不會用到 所謂 Lifecycle Hooks 是一個有點過時的觀念!稍微讀一下就好,相關功能大多被 Watchers 取代了 --- 接著就來認識一下 Watchers - https://vuejs.org/guide/essentials/watchers.html 簡單講,在 Vue 中,所謂的 Reactivity 已經很好用了: 「某些變數在更新之後,其他相關變數、以及畫面 UI,會跟著自動更新」 除此之外,還可以進一步使用更進階功能: 「隨時監控某些變數,如果發現它們更新,就執行一些相關的任務」 這些任務我們稱之為 `副作用(side effects)` 關於 side effects 怎麼解釋,是一個比較困難的主題 這邊先不詳談,目前有點困惑沒關係,作業中會讓你練習一下,先有點小感覺就好 ## 課後作業 承接上一課的作業 這一課要來做自動儲存功能 請使用 Watchers 去監聽 `notes` 狀態 每次 `notes` 有更新,就自動儲存到 Local Storage 裡面! 接著,在 `mounted` 裡面檢查 Local Storage 如果有資料,就把資料更新到 `notes` 裡面 如此一來,就完成了自動儲存功能,連儲存按鈕都不用做! --- 提示:普通的 watchers 不夠用,要使用 Deep Watchers 這部份有點難解釋,你先知道:普通的 data 變數型態,例如字串、數字、布林,可以用普通的 watcher 但如果是陣列或物件型態的 data,就要使用 Deep Watchers 先知道這樣就好 --- 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習事件處理的寫法 ## 課程內容 來學一下事件處理的寫法 - https://vuejs.org/guide/essentials/event-handling.html 眼花撩亂沒關係,我已經多次告訴過你應該用什麼心態去面對 不用把這些東西看得太神奇,這些東西的背後,就只是你已經寫過的 html `onclick` 那些東西而已,只是多加一層「抽象化」,由 Vue 中介在中間管理 DOM 我們在寫 Vue 的時候,就是「完全不親自操作 DOM」了,通通交由 Vue 處理 我們負責專心管理 application state 就好,不用費心思去管理 DOM 用了框架,就不要再去直接操作 DOM,否則會跟框架起衝突、讓程式充滿 bug --- 有件事我必須說一下,就是 `@click` 後面可以放函式名稱,也可以直接執行函式 這個設計,實在很糟糕!我非常不喜歡! ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> <button @click="hello1"> hello 1 </button> <button @click="hello2('John')"> hello 2 </button> </div> <script> const { createApp } = Vue createApp({ methods: { hello1() { alert('hi'); }, hello2(name) { alert('hello ' + name) } } }).mount('#app') </script> ``` 以上範例,在 `@click` 裡面的內容,到底要不要加上小括號 `()`? 乍看之下,根本無法理解。要翻閱文件,才發現原來兩種寫法都可以 我認為這違反了程式碼風格應該要 `保持一致性(consistency)` 的原則 Vue 這種彈性設計,讓程式碼變得令人困惑、難以理解 --- 再提一件事,Vue 的 template 中,雙引號的內容,到底是 `變數` 還是 `字串`? ``` <button @click="greet">Greet</button> ``` 這個 greet 是函式名稱,是變數 ``` <div :class="{ active: isActive }"></div> ``` 這裡在雙引號內容,宣告 JSON 物件,所以是變數 ``` <template v-if="ok"> ``` 這裡是變數,變數型態大概是布林 ``` <div class="active text-danger"></div> ``` 這裡是字串 ``` <input :value="text" @input="event => text = event.target.value"> ``` 這邊的 `text` 到底是字串還是變數? ``` <input ref="input"> ``` 這邊的 `input` 到底是字串還是變數? 透過觀察可以發現,冒號開頭 `:`,或者小老鼠開頭 `@` 或者縮寫法 `v-` 開頭的,雙引號裡面是變數 不然的話,就跟普通 html attribute 一樣,雙引號裡面就只是字串而已 對於 Vue 這種彈性設計,我一樣「非常不喜歡」! 當然,這些都是我個人主觀看法,一定很多人覺得又好寫、又彈性 這對於只想快速開發、懶得追根究底的新手,可能很方便 但在深入思考、試著搞懂資料型別、試著像資深工程師一樣思考的時候,會造成很多額外的困惑 --- 我想說的是,遇到這類問題,你就多試一下、多翻官網文件 然後不要覺得自己很笨、被框架嚇傻了 要知道複雜的工具,本身背後就代表多種不同的主觀偏好,然後那些主流觀點,可能真的不怎麼樣,所以不是你的問題 隨著更有經驗之後,你會能夠做出各種主觀的判斷、能夠比較各種設計的優劣之處 目前階段,你就先想辦法讓程式能跑、能完成任務就好了! --- 再來學一下表單欄位內容的處理 - https://vuejs.org/guide/essentials/forms.html 在上個系列課程中,我們學過 data model + render function 的寫法 使用框架之後,則變成,就連表單欄位內容,也是 data model 的一部份 乍聽之下有點怪,其實,實際寫過之後,會發現還滿方便的! ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> <input v-model="username"> <button @click="greet"> Greet </button> <h1> {{ username }} </h1> </div> <script> const { createApp } = Vue createApp({ data() { return { username: "John Doe" } }, methods: { greet() { alert('Hello, ' + this.username); } } }).mount('#app') </script> ``` 正因為把 `欄位中目前輸入的值` 視為 `當前應用程式的狀態` 的一部份 所以可以隨時取得表單欄位內容,而不用像以前那樣,要透過 DOM selector 之類的,去找到元素、才拿到內容! 一樣,表單欄位內容的取得,寫法多種,就挑順眼、簡單的來用即可 ## 課後作業 承接上一課的作業 這次要來開發「新增」與「刪除」功能囉! 請在記事列表的上方: - 新增一個 `input` 來輸入「記事標題」 - 新增一個 `textarea` 來輸入「記事內容」 - 新增一個 `select` 來選擇顏色 - 新增一個「新增」按鈕,點擊之後,會新增記事 - 請將這些欄位的內容,放在 application state 裡面管理 然後,請在每則記事的裡面,新增一個「刪除」按鈕。點擊之後,會刪除記事 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習迴圈的寫法 ## 課程內容 來學一下在 Vue 模板裡面,如何寫迴圈、顯示陣列內容 - https://vuejs.org/guide/essentials/list.html 老樣子,同一件任務,有很多種不同的寫法 隨便挑一個你覺得順眼的、好理解的方式來寫即可 ## 課後作業 承接上一課的作業 之前我們在 template 都是用索引的方式,直接從陣列取得元素 `notes[0]` 這一次的作業,請把 template 的內容,使用 for 迴圈來改寫 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習條件判斷式的寫法 ## 課程內容 先來學一下管理 css class 與 style 的一些寫法 - https://vuejs.org/guide/essentials/class-and-style.html 老樣子,這些寫法比較進階,稍微有個印象就好 你也可以發揮創意,使用 Vue 的一些其他方法寫,反正能把正確的 css class 跟 style 加上去就行了 --- 再來學一下 Vue 之中關於條件判斷式的寫法 - https://vuejs.org/guide/essentials/conditional.html 老話一句,文件中提供你很多不同選項的寫法 隨便挑一個你覺得順眼的、好理解的方式來寫即可 ## 課後作業 承接上一課的作業 在 state 裡面,有個 `color` 屬性一直沒有用到 這次作業要來使用它 請讓每個記事,根據 color 的值,來顯示為不同顏色 如果不知道什麼意思,請再把玩一下 Google Keep,其中有變色的功能 提示:為了簡單起見,可以用 `:style` 的方式,直接加入顏色即可 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 體驗一下 Reactivity 的效果與便利 ## 課程內容 來學 Vue 之中 Reactivity 的基本觀念 - https://vuejs.org/guide/essentials/reactivity-fundamentals.html 老樣子,大部份看不懂沒關係,稍微有個印象就好 記得之前的課程,每次更新完 state,你都要接著去執行 `render()` 函式嗎? 所謂 Reactivity 就只是說:當你更新完 application state 之後,Vue 會自動幫你更新 UI 上的內容 就只是這樣,不要把它想得太複雜 ``` <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app"> 嗨,我是 {{ user.name }} <button @click="changeNewName"> 改名字 </button> </div> <script> const { createApp } = Vue createApp({ data() { return { user: { name: "John Doe" } } }, mounted() { this.user.name = "Frank" }, methods: { changeNewName() { this.user.name = "Kevin" } } }).mount('#app') </script> ``` 到 jsfiddle 跑跑看,看看畫面上出現什麼 `mounted` 是 vue 將畫面第一次載入之後,可以安排任務的地方,通常會放一些「系統初始化任務」 `@click` 跟 `methods` 那些,就只是操作事件的寫法而已,先照做就好 以上兩點,後面課程會詳談 --- 在 Vue 文件中,你會到處看到 `this` 這個關鍵字 要存取 application state,有時前面要加 `this.` 有時又不用 關於 `this` 關鍵字,它是一個 JavaScript 程式語言裡面過時又晦澀難懂的觀念 我不想細談,你也先不用研究。就先照做、程式能跑就好了 反正改天你真的遇到問題,大概知道要往這方向研究就是了 --- 接著來學 Vue 之中 Computed 屬性的觀念 - https://vuejs.org/guide/essentials/computed.html 老話一句,看不懂沒關係 雖然大家都說用這寫法,效能會比較好、程式碼會比較優雅 但實際上,我自己在好幾個專案,就完全不使用任何 `computed` 功能 一律通通只用 `methods` 來寫程式,根本也不會怎麼樣 --- 在整門系列課程,會常常像這樣,我叫你讀官網文件的很多內容 但我接著又會說,看不懂沒差,其中 XXX 根本沒用,其中 YYY 也沒必要用,只學 ZZZ 就好 這些都是我個人的主觀意見。如果你在網路上找資料,會看到許多工程師,有跟我完全相反的建議 這是軟體工程師圈子的常態,充滿各種主觀喜好、偏見,你要習慣一下 (如果你很好奇我是怎麼做出這些判斷的,請重新閱讀此系列課程,第一篇文章:前言,裡面的最後一段) 你不需要完全同意我的觀點,在研究過程中,如果你有發現比較喜歡的寫法,就直接用沒關係 如同我多次提醒過:只要能解決問題就好,你就隨便寫沒關係 各種做法細微的差異,將來有一天你會慢慢理解 ## 課後作業 承接上一課的作業 這一課來簡單體驗一下 reactivity 的效果就好 也就是簡單更新一下 application state 就好 請加入 `mounted` 函式,在裡面把「第一個記事」的內容更新為「多出門、到處走走、也要多運動」 完成之後,你會發現,你的春節行程安排,看起來積極多了~ 做出以上功能,你就完成這次的課程目標了!
你的轉職路上,還缺少一份自學作業包!寫完這幾包,直接拿作品去面試上班!
本論壇另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!