iT邦幫忙

2024 iThome 鐵人賽

DAY 30
3
Modern Web

Vue 3 初學者:用實作帶你看過核心概念系列 第 30

Vue 3 用實作帶你看過核心概念 - Day 30:新手村的鐵人證書 - 完賽心得

  • 分享至 

  • xImage
  •  

文章背景圖

參賽心得

花了整整半年左右的時間,每天下班都很用心的準備範例或是看書,這一段旅程對我來說真的很重要。擔心、害怕跟不安的心情一直充斥自己心中,擔心寫錯或是寫不好,想讓自己再多準備久一點再開始,所以拖到中秋連假才開始,想下定決心讓自己不論結果如何都要全力以赴。就算自己只學習了半年,也還是希望用自己的方式記錄自己學習的所有歷程。鐵人發文過程有大大小小的意外會造成進度上或許不如預期,但每天都想著「難道我真的要在這裡放棄 !」,我熱愛網頁,我希望對於自己喜歡的事情能夠堅持到底。

我很高興能因為六角學院的Vue專題班,讓我從原本React到跨入Vue的世界,Vue的撰寫方式吸引我的目光,讓我想更仔細的了解Vue的相關事務。並以一個新手的角度,將Vue的官網重頭到尾看過一次,看到很多之前沒注意過的功能及範例,很慶幸自己能一個一個試著理解,並搭配實作的方式加深自己的記憶。

最後特別感謝[ 想入門,我陪你 ] Vue 3 宅家輕鬆玩系列| Alex的影片,我本身比較偏愛影片的方式學習。撰寫每一篇鐵人賽文章之前,都會將 Alex 相關影片主題看過好幾次。使我在學習Vue的使用上有更好的理解方式。很感謝每一位願意無私提供學習資源的大家,讓自己學習上能吸取大家的精華,變得越來越好。

鐵人文章復習

起步篇 🌱 (Day 1-6):打好基礎,了解 Vue 3 的核心概念和開發環境。

  • Day 1-2:Vue 3 簡介與編程方式
  • Day 3-4:使用 Vite 搭建 Vue 專案
  • Day 5:Options API vs Composition API
  • Day 6:數據綁定和模板語法

核心特性深度探索 🔍 (Day 7-16):深入了解 Vue 3 的響應式系統、指令和生命週期。

  • Day 7-8:響應式基礎與計算屬性
  • Day 9-11:樣式綁定、條件渲染和列表渲染
  • Day 12-13:事件處理和表單輸入綁定
  • Day 14-16:生命週期、監聽器和模板引用

組件化開發精講 🧩 (Day 17-23):掌握 Vue 3 組件的各種使用技巧,提高代碼復用性和可維護性。

  • Day 17:組件註冊與使用
  • Day 18-19:父子組件通信 (Props & Emits)
  • Day 20:組件 v-model 雙向綁定
  • Day 21:組件透傳 Attributes 應用
  • Day 22:v-slot 插槽技術

高級特性與常用第三方套件 🚀 (Day 24-29):探索 Vue 3 的進階功能和常用第三方套件,優化應用性能和開發體驗。

  • Day 23:依賴注入 (Provide/Inject)
  • Day 24:異步加載(Lazy loading)
  • Day 25:自定義指令(Custom Directives)
  • Day 26:內置組件 (KeepAlive & Teleport)
  • Day 27:表單驗證 (VeeValidate)
  • Day 28:路由管理 (Vue Router)
  • Day 29:可組合函數 (Composables)

最後的最後,我還是希望感謝一路走來在我壓力很大的時候,還是在我身邊支持我的女朋友,甚至還會跟我說要寫完才可以走出書房。特別請他表達這一路在一旁看我的心情表現。因為有他的支持,我才可以心無旁鶩的完成今年的目標。

【 以下是女朋友在參賽期間幫忙做的 】

參賽前的模樣跟實際參賽後的比較:
理想文章內容與實際文章內容差別

準備了 15 篇草稿,但是一步步被時間追上:
準備鐵人賽的心情(先準備15篇還是不夠)

終於堅持到最後 30 天的模樣:
第一次參加鐵人賽成功完賽

各路朋友被我騷擾的心情:
瘋狂請朋友看文章心情


上一篇
Vue 3 用實作帶你看過核心概念 - Day 29:Composables(組合式函數)
系列文
Vue 3 初學者:用實作帶你看過核心概念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Alex Liu
iT邦新手 4 級 ‧ 2024-10-13 13:30:20

恭喜完賽 🎉

話說我也是受到 Alex 宅幹嘛影響很深,甚至可以說今年參賽的系列一部分也是受到他的影響(感謝你的提醒,我趕快去調整一下我的感謝清單)。

最後的迷因也很有共感,好不容易完賽了,好好休息吧 👍

Antonio iT邦新手 5 級 ‧ 2024-10-13 22:54:53 檢舉

我剛好前幾天才看到 Alex 的鐵人賽文章完賽,真的超級厲害!!之前 自己寫 React UI 元件庫那系列文章我也看過,真心覺得要寫出來元件庫對於底層邏輯的實作,必須要有更深入的理解。打從心裡很崇拜能自己寫出元件庫的大神,未來一定要試著嘗試一次!!

恭喜你也順利完賽!辛苦了。看到 Alex 留言讓我覺得超開心的,之後一定會花時間把你的文章每一篇細細閱讀,並自己嘗試實作看看。

(( 題外話,你的文章封面圖的設計感覺好有質感 ❤❤❤ 超喜歡

0
ayao
iT邦新手 5 級 ‧ 2024-10-13 14:24:08

恭喜完賽,太厲害了

Antonio iT邦新手 5 級 ‧ 2024-10-13 23:00:45 檢舉

耶~當初第一天看到你的鼓勵,真的讓我感覺自己不是一個人努力,大家都一起為了完成這三十天而努力。我知道你因為演唱會有中斷一天,但是你也還是持續的補上每一天的文章,我覺得你也很棒。

之後也會抽出時間好好閱讀 JS30 的部分,細細品嘗你寫的文章,加油只剩下最後一天。

0
hannnahTW
iT邦新手 2 級 ‧ 2024-10-14 22:51:26

恭喜安東尼完賽~
人在國外沒有回覆到,之後肯定要好好拜讀你的文章

Antonio iT邦新手 5 級 ‧ 2024-10-14 23:31:44 檢舉

感謝 hannnah !!! 恭喜你也完賽了,休息幾天再來拜讀你的文章~

我要留言

立即登入留言