課程目標

  • 學習 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 之中匯入此元件,並用多個範例證明,有完成上述規格

做出以上功能,你就完成這次的課程目標了!


歡迎將作業成果,在下方留言,跟大家分享,讓大家給你一些回饋!

可以將每課學到的觀念、關鍵字,丟到網路上去搜尋、研究一下!

發問請在「討論專區」為主,或者分享學習筆記、寫學習心得!

貼文都會出現在個人檔案頁面,成為學習歷程、部落格紀錄!

未來面試時,分享給面試官看,會讓人知道你的積極程度!


共有 9 則留言