[筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 9

前端框架御三家之一的 Vue,在 2020 年第四季迎來的第三代版本,代號為 One Piece。雖說已略為上手 2.0 版,決定藉由 HiSKIO 2020 Vue3 專業職人 的課程,來加速自己的熟悉程度。這篇會筆記下 Vue 的關鍵核心 – Component 組件的使用。

vue.js logo vue


課程相關資訊

[連結]:https://hiskio.com/courses/286/lectures/22728

本篇範圍:Chapter 7 ( Vue Component 組件 ) ,一共有 12 篇

請注意:本系列文章為個人對應課程的消化吸收後,所整理出來的內容。換言之,並不一定會包含全部的課程內容,也有可能會添加其他資源來說明。


筆記

1. 一個 .vue 檔案,裏頭包含 Template ( 撰寫 HTML )、Script ( 撰寫 JavaScript )、Style ( 撰寫 CSS )
2. css 設定要視情況決定要用 scoped 還是 global,以免造成組件中的樣式跑板或是莫名的無法讀取到
3. 組件中的資料傳遞,可以使用 binding (父) 和 props (子) 來使用
4. 有一些相關的細節,可以看官網上的說明內容。通常建議,在子層的 props 要設定 type 和 default
5. 陣列和物件的 default 寫法,要用 function 來傳遞。
Array 為: () => [], Object 為: () => ({}), Function 為: () => {}


系列文章

  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 9
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 8
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 7
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 6
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 5
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 4
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 3
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 15
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 14
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 13
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 12
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 10
  • [筆記] HiSKIO 2020 Vue3 專業職人 進階篇 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 5
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 4
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 3
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 加值篇 – 1
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 9-2
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 8
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 7
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 6
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 5
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 4
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 3
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 2
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 16
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 14
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 13
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 12
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 11
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 10
  • [筆記] HiSKIO 2020 Vue3 專業職人 入門篇 – 1
  • 按讚加入粉絲團

    延伸閱讀