iT邦幫忙

2024 iThome 鐵人賽

DAY 30
3
Modern Web

欸你是要進 Vue 了沒?系列 第 30

欸你是要進 Vue 了沒? - Day30:比賽過一半就想開始寫的完賽心得?

  • 分享至 

  • xImage
  •  

蛤肉,搭家好,我乘風破浪的來了。

在寫這篇前,想說把自己 Day1~Day29 看過一遍,就可以準備好心情和能量,面對完賽了喔這個不真實的事實,屏氣凝神的來下筆。
結果一看,看了三小時:)

(最後一天也還沒放過自己)

來講 Review 後の發現

其實剛開始幾天內容都蠻輕量的,從學習動機到專案建置,繼續看,發現 Day6 就寫到了 defineProps、並提到了操作虛擬 DOM,自己真的完全不記得。

Day11 進入 ref,心裡冒出疑問:我為什麼會想把它 console.log 出來,官方文件有講到它是一個 RefImpl 嗎?查了發現根本沒有。但那時候為了「不理解為什麼要特別提到解包」而很糾結,為了想弄清楚:怎麼樣才需要解包、是在解什麼包?才順路研究的,結果一發不可收拾。

Day16 為了要修改 computed,用 set() 做了一個一鍵完賽的功能、Day21 午餐還想吃波士頓龍蝦(比賽壓力是不是真的很大?)

繼續回顧,也想起,後來的前言和小結都已經沒有什麼連貫,也沒有什麼那種一起往前衝吧的心情,基本上就是哈囉,開始吧,明天見。

邊看也覺得有一些「咦,好像寫錯了」的部分,把它標上刪除線。
沒有直接刪掉,也是因為想留下紀錄,紀錄自己寫過不正確的東西、紀錄自己有重新想過、又調整了。
希望都是在這樣來回理解的過程中,慢慢把當時候沒有意識到的部分和盲點再校正回來。

來講 30 天の內心活動

由於是跟著官方文件的 flow 學習的,它有講什麼我不知道的就不想逃避。
也因為無法確認 pass 掉的話之後會不會斷片、無法知道什麼情況下不會用到什麼、無法辨別其實可以不需要知道什麼,所以文件有講到的,如果可以理解、可以寫出來,就都沒有放過。

所以產生了真的很來龍去脈ㄟ、超細節步驟的部分,反映的是自己邊寫、邊組織就真的還是在順思路的現象,也代表了這個系列是一個很 real 的學習紀錄 Q!

有時候很沒有耐心,看著捲軸還有那麼長才到底,就煩躁了起來。
有時候腎上腺素、咖啡因發揮作用,章節寫到超乎預期、也很快樂。
有時候已經沒有氣力,連打字敲鍵盤都覺得好累。
有時候庫存快沒有了,心裡還是在裝沒事。

但只能說,每天都還是被自己很真實的「哇,我寫完了,我竟然懂了嗎?」的驚呼鼓舞~

來講 30 天裏學到了些什麼?

上目錄。

// 目錄 //
開場/結尾
欸你是要進 Vue 了沒? - Day1:前言/自我介紹小廢話
欸你是要進 Vue 了沒? - Day30:比賽過一半就想開始寫的完賽心得?
基本概念
欸你是要進 Vue 了沒? - Day2:Vue 為啥我要認識你
欸你是要進 Vue 了沒? - Day3:Vue 請你自我介紹五分鐘
欸你是要進 Vue 了沒? - Day4:Vue 我要把你 run 起來
專案架構
欸你是要進 Vue 了沒? - Day5:Vue 專案資料夾你裡面夾了什麼
欸你是要進 Vue 了沒? - Day6:Vue 專案你是怎麼組起來的?從根組件看組件之間的互動關係
模板語法系列
欸你是要進 Vue 了沒? - Day7:Vue 模板語法【Mustache、v-html】
欸你是要進 Vue 了沒? - Day8:Vue 模板語法【屬性綁定】
欸你是要進 Vue 了沒? - Day9:Vue 模板語法【JS 表達式】
欸你是要進 Vue 了沒? - Day10:Vue 模板語法【指令 Directives】
響應式系列
欸你是要進 Vue 了沒? - Day11:Vue 你怎麼 DOM 起來了?響應式基礎從 ref 開始(上)
欸你是要進 Vue 了沒? - Day12:Vue 你怎麼 DOM 起來了?響應式基礎從 ref 開始(下)
欸你是要進 Vue 了沒? - Day13:Vue 你怎麼 DOM 起來了?都學到這了依舊沒辦法繞過的 JS 原生 Proxy 概念
欸你是要進 Vue 了沒? - Day14:Vue 你怎麼 DOM 起來了?響應式用法就還有另外一種叫 reactive
欸你是要進 Vue 了沒? - Day15:Vue 你怎麼 DOM 起來了?乂稀奇古怪的 ref && reactive 解包合體技乂
欸你是要進 Vue 了沒? - Day16:Vue 的 computed 在算什麼東西
樣式/條件/列表渲染
欸你是要進 Vue 了沒? - Day17:Vue 屬性綁定之 class && style 功能增強系列(class 篇)
欸你是要進 Vue 了沒? - Day18:Vue 屬性綁定之 class && style 功能增強系列(style 篇)
欸你是要進 Vue 了沒? - Day19:Vue 條件渲染家族 v-if、v-else-if、v-else、v-show
欸你是要進 Vue 了沒? - Day20:Vue 列表渲染之那個很會幫主管列資料的 v-for 同事
欸你是要進 Vue 了沒? - Day21:Vue 列表渲染之 v-for 和它就地更新の關鍵小夥伴 key && 虛擬 DOM
組件與溝通(不知道怎麼放的系列)
欸你是要進 Vue 了沒? - Day22:Vue 事件處理之 v-on @我知道你什麼事都聽到了
欸你是要進 Vue 了沒? - Day23:Vue 表單輸入綁定之 v-model 有你在的宇宙一切都不麻煩了
欸你是要進 Vue 了沒? - Day24:Vue 生命週期之從組件來到了這世界到它完成任務後離開的過程
欸你是要進 Vue 了沒? - Day25:Vue 組件偵聽器之 watch && watchEffect 是在襪取什麼東東
欸你是要進 Vue 了沒? - Day26:Vue 模板引用之使用 ref 直接操作 DOM 的小小法術
欸你是要進 Vue 了沒? - Day27:Vue 組件基礎之 Component 的定義 && 使用 && 註冊
欸你是要進 Vue 了沒? - Day28:Vue 組件間的溝通方式之 Props、defineProps() 來自父組件の快遞請收下
欸你是要進 Vue 了沒? - Day29:Vue 組件間的溝通方式之 Emits、defineEmits() 子組件發出信號收到請回答 Over!

最後的最後

謝謝好想工作室一起參賽的大家!
謝謝途中有被我問過有沒有哪裡寫的怪怪的的朋友,
謝謝把我的文章推薦給公司正在學框架的同事的朋友,
謝謝明明不是工程師然後還辦帳號幫我按讚收藏的朋友 XD

也謝謝每一個看過的觀眾們。
如果你有「哇,真假,是這樣喔」或「蛤,你在講什麼,不是這樣吧」的感受都很不錯 XD,請大家多多指教。

最後要 shout out to 自己。
請把覺得自己還可以更好的這個漩渦先暫停一下,幫自己頒個獎,然後睡滿八小時。

OK 完賽!搭家掰掰~


上一篇
欸你是要進 Vue 了沒? - Day29:Vue 組件間的溝通方式之 Emits、defineEmits() 子組件發出信號收到請回答 Over!
系列文
欸你是要進 Vue 了沒?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
Chris
iT邦新手 3 級 ‧ 2024-10-16 18:04:26

很棒唷!每一個學 Vue 的人都要這麼做.......

++ iT邦新手 5 級 ‧ 2024-10-16 20:02:19 檢舉

謝謝 Chris 🥺🥺🥺
/images/emoticon/emoticon32.gif

我要留言

立即登入留言