站長獨家研發的新手友善、專案導向教材!
歡迎來到 Vue 系列的第三份課程 在這次的系列課程中,我們要開始學習大名鼎鼎的「元件」觀念了 在之前的課程中,雖然我們成功做出了多個好用的應用程式 但在實務上,更大型的應用程式,需要將一些部分寫成「可以重複使用」的元件,團隊合作才方便 軟體圈有一句名言是這樣說的:「要寫出大型應用程式的訣竅,就是不要寫大型程式。寫出很多個小的程式,然後組合起來使用。」 聽起來很酷吧?寫元件的確還滿酷的! --- 有件事我需要再次強調 Vue 框架中,同樣一個問題,有很多種解決方法 甚至同一種解決方法,又有很多種寫法、語法可以使用 所以你在讀文件、在各種論壇看大家範例程式碼的時候,鐵定會有一種困惑:怎麼跟我的寫法不一樣? 我要再次強調:這些通通都不重要!能解決問題就好! 就像拿到一個超大盒工具箱,附贈有一本厚厚的說明書 你完全不需要把整本工具書讀熟、箱內的所有工具都摸熟 你只要視情況隨便拿幾個你會用、覺得好用的工具就可以了 有些工具就讓它永遠待在箱子內就好,不要勉強自己去使用它們 --- 話不多說,讓我們馬上開始來寫 Vue 元件吧!
## 課程目標 - 能夠運行 Vue 元件 ## 課程內容 我們一樣讀官網文件就好 先來讀元件基本觀念 https://vuejs.org/guide/essentials/component-basics.html 再來讀註冊元件的方法 https://vuejs.org/guide/components/registration.html 再來讀元件的檔案格式 https://vuejs.org/guide/scaling-up/sfc.html 我鼓勵你習慣去讀英文,但實在不行就讀中文沒關係 https://cn.vuejs.org/guide/essentials/component-basics.html --- 在我的課程中反覆說過很多次 官網文件中各種內容很多,大部份看不懂沒關係,稍微有個印象就好 很多內容學了,其實根本實際上也很少用到 留個印象,遇到問題大概知道去哪翻閱就可以 整個程式設計師生涯,就用這種態度即可,沒問題的 --- 很多時候,甚至一知半解,也沒關係,根本不重要 舉個例,官網有時候會這樣寫 ``` <ButtonCounter /> ``` 有時候會這樣寫 ``` <button-counter></button-counter> ``` 官網有說明,分別在什麼時候,建議哪種寫法比較好 老實說,那些說明,連我都看不太懂,我也不認同官網的建議 我建議你就隨便寫,能跑就可以了 上過我前面課程的話就知道,我對 Vue 的許多設計細節,充滿意見、不認同 但是這個行業就是這樣,大家都充滿主觀看法,工具本身也充滿主觀看法 這些很正常,並不妨礙你成為一個專業的程式設計師 反正,框架的背後,就是會轉換成你在系列一~六學過的那些:DOM 操作、事件處理、狀態管理,就這樣而已 ## 課後作業 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ 這一課我們來試著匯入元件就好 - 請建立 `Header.vue` `Main.vue` `Footer.vue` 三個元件 - 元件內容分別顯示 `I am header!` `I am main!` `I am footer!` 就好 - 在 `App.vue` 之中匯入以上元件 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習 vue 的 props ## 課程內容 來學一下怎麼傳參數到元件裡面 - https://vuejs.org/guide/components/props.html 順帶一提,在實務中,我個人是從來不寫 Prop Validation 的 我不去寫 Runtime Type Checks 那些,因為我覺得很麻煩、很花時間 當然,在很多人眼裡,我這種習慣很糟糕 我有我的理由,不過嚴重超出本課程度,未來有機會再談吧 ## 課後作業 在第二課~第七課的作業,我們要研習一款叫做 Quasar Framework 的工具 這是一個極度強大的 vue 元件工具,功能非常豐富、好用 我們每一課的作業,都要試著親自做出類似 Quasar 中的元件 (沒辦法做到像 Quasar 那麼強大,我們只要實作部分功能就好) 這一課作業,請先看一下 Badge 徽章元件的用法 https://quasar.dev/vue-components/badge --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyBadge.vue` 元件,並支援下列功能 - `color` 能夠設定背景顏色 - `text-color` 能夠設定文字顏色 - `label` 能夠設定文字內容 - `rounded` 樣式 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習 vue 的 events ## 課程內容 來學一下怎麼替元件設計事件 - https://vuejs.org/guide/components/events.html ## 課後作業 這一課作業,請先看一下 Button 按鈕元件的用法 https://quasar.dev/vue-components/button --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyButton.vue` 元件,並支援下列功能 - `color` 能夠設定背景顏色 - `text-color` 能夠設定文字顏色 - `label` 能夠設定文字內容 - `size` 能夠設定按鈕大小 - `round` 樣式 - `square` 樣式 - `@click` 能夠設定點擊後的任務 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習 vue 的 v-model ## 課程內容 來學一下 v-model 的用法 - https://vuejs.org/guide/components/v-model.html 老話一句,不要把這功能想得太神奇 這只是一種 props + events 的縮寫而已 功能完全一樣,只是讓元件更方便使用而已 如果真的很不喜歡,實務上完全不用,其實也不會怎樣 ## 課後作業 這一課作業,請先看一下 Input 輸入元件的用法 https://quasar.dev/vue-components/input --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyInput.vue` 元件,並支援下列功能 - `v-model` 能夠設定值、取得值 - `label` 能夠設定欄位名稱(可以不用像 Quasar 動畫那樣華麗,就簡單顯示在旁邊即可) - `filled` 樣式 - `outlined` 樣式 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習 vue 的 slots ## 課程內容 來學一下 slots 的用法 - https://vuejs.org/guide/components/slots.html ## 課後作業 這一課作業,請先看一下 Banner 公告元件的用法 https://quasar.dev/vue-components/banner --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyBanner.vue` 元件,並支援下列功能 - `預設的 slot` 能夠放入公告內容 - `action slot` 能夠在下一排最右側放入額外內容 - `rounded` 樣式 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習用外部狀態管理 vue 元件 ## 課程內容 前面的課程中,元件的狀態很單純,都是匯入之後直接使用 但是有些元件匯入之後,一開始在畫面上是不顯示的 比方說視窗類型的元件:這種元件需要額外有一個狀態,來管理它是否顯示 ## 課後作業 這一課作業,請先看一下 Dialog 視窗元件的用法 https://quasar.dev/vue-components/dialog --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyDialog.vue` 元件,並支援下列功能 - `v-model` 能夠管理視窗是否顯示 - `預設的 slot` 能夠放入視窗內容 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
## 課程目標 - 學習開發狀態複雜的 vue 元件 ## 課程內容 前面的課程中,元件的狀態很單純,數量也很少 但是有些元件,雖然對外溝通的狀態很少 但是在元件內部,其實需要維持額外的多個狀態,才能使用 比方說「顏色選擇器」類型的元件:雖然對外就一個代表色碼的字串而已,但在內部需要不少狀態來維持 ## 課後作業 這一課作業,請先看一下 Color Picker 元件的用法 https://quasar.dev/vue-components/color-picker --- 請使用官方的元件試玩工具:Vue SFC Playground https://sfc.vuejs.org/ - 請建立 `MyColor.vue` 元件,並支援下列功能 - `v-model` 能夠設定色碼、取得色碼,格式支援 HEX 即可,例如:經典藍 `#34568b` - 不用支援各種花俏的顏色選擇面板,就做 RGB 三捲軸就好了:使用 `<input type="range">` 製作三個可以拉動的捲軸,分別代表紅色、綠色、藍色的比例 - 請自行搜尋 `hex to rgb javascript` `rgb to hex javascript` 研究 hex 色碼與 rgb 色碼如何轉換 完成之後,請在 `App.vue` 之中匯入此元件,並用多個範例證明,有完成上述規格 做出以上功能,你就完成這次的課程目標了!
恭喜你完成了一系列酷炫的元件 Quasar 是業界最頂尖、好用的 UI 元件包之一 你在這系列作業中,也順便學習了此元件包的用法,這在實務上非常有幫助 你甚至親手製作了其中一些基本的元件,讓你大致了解元件包背後的製作原理 像這些最基礎的 UI 元件,因為通用性很高、很常被重複用到、在多個地方到處使用,所以很適合製作成元件 --- 但是,在實務上,通常開發一個頁面,就製作一個 vue 檔案即可。除了基礎 UI 元件之外,並不會額外製作多少元件 因為頁面上很多看起來像元件的東西,其實就算拆出來,別的頁面也用不到、或根本無法使用 這種情況,其實也不用刻意要拆成元件,因為意義不大,說不定還會變更亂。切記:不需要為了元件化而元件化 當你發現頁面真的有點太複雜、你明顯感受到拆成多個元件會比較好維護的時候,再拆成元件就可以了 --- 翻閱 Vue 官方文件,你會發現 `Components In-Depth` 這個段落,你幾乎通通讀完了 有些我認為非必要、沒那麼常用的段落,就沒有指定讓你閱讀。你如果好奇的話,就自行把官網剩下的頁面翻一翻吧 必要的元件觀念,你都已經知道了,這些已足夠讓你參與團隊合作、與團隊一起開發應用程式了 但是在真正大型的專案,還需要引入一些進階觀念、生態系工具 這些會在後續的課程提到! --- 消化、研究完本課程之後,關於 JavaScript 更多必學的基本觀念 請接著前往「自學網頁の嬰兒教材:JavaScript(十)」開始學習吧! https://codelove.tw/@howtomakeaturn/course/8aAWxW --- 急著上班、找工作的同學,請參考我寫的文章: **給寫完 JavaScript 系列九的同學們:求職前的準備&簡易指南** https://codelove.tw/@howtomakeaturn/post/k31dYx
你的轉職路上,還缺少一份練功作業包!寫完這九包,直接拿作品去面試上班!
本學院另有附設一個 LINE 新手發問&交流群組!歡迎加入討論!