VueJS Style Guide 導讀

9ae4f3862d4cb0771cfd36e43252f755?s=47 Kuro Hsu
January 17, 2018

VueJS Style Guide 導讀

VueJS 台灣 Meetup 2018 #01
2018/01/17

Video: https://www.youtube.com/watch?v=K8k5mkl-w4g
範例檔案: https://github.com/kurotanshi/vue-meetup-201801

9ae4f3862d4cb0771cfd36e43252f755?s=128

Kuro Hsu

January 17, 2018
Tweet

Transcript

  1. VueJS Style Guide 導讀 Kuro Hsu @ Vue.js 台灣 Meetup

    2018#01
  2. http://vue.tw VueJS 台灣有專屬網址了了

  3. Kuro Hsu http://kuro.tw kurotanshi@gmail.com @kurotanshi

  4. https://vuejs.org/v2/style-guide/index.html

  5. ✴ Priority A: 必要遵守 (防⽌止錯誤) ✴ Priority B: 強烈推薦 (增加可讀性)

    ✴ Priority C: 推薦 (保持程式碼⼀一致性) ✴ Priority D: 謹慎使⽤用 (效能調校與潛在風險)
  6. 組件的命名 01 • 為避免衝突,以多個單字加上「連字號」命名 • 注意在 HTML 與 template 的表⽰示⽅方式

  7. 組件的 data 必須是 function 02 • 另⼀一個要注意的點是 「data 內不可使⽤用箭頭函數 =>」

  8. prop 的定義盡可能詳細 03

  9. 為 v-for 設定 :key 04

  10. ref: https://calendar.perfplanet.com/2013/diff/

  11. None
  12. None
  13. 避免將 v-if 與 v-for ⼀一起⽤用 05

  14. 為組件的樣式設定作⽤用範圍 06

  15. 屬性的命名規則 07 • data 內部的屬性也不能以 底線 _ 或 錢字號 $

    作為開頭
  16. 將組件個別分為獨立的檔案

  17. 將組件個別分為獨立的檔案

  18. 組件檔案命名規則

  19. 組件檔案命名規則

  20. 組件檔案命名規則

  21. 每⾴頁只使⽤用⼀一次的組件 • 對於每個⾴頁⾯面只會使⽤用⼀一次的組件應該以 The 前綴命名,以表⽰示其 唯⼀一性。 這些組件不應有任何 prop 屬性。

  22. 緊密耦合的組件 • 以⽗父組件名稱作為⽬目錄名稱來來分層是常⾒見見的做法,但可能造成許 多⼦子組件的名稱相同,在開發階段可能不易易辨識。

  23. 緊密耦合的組件 • 和⽗父組件緊密耦合的⼦子組件,應該以⽗父組件名稱作為前綴

  24. 組件命名的順序 • 以概念念上較普遍的單詞作為開頭,以描述性的修飾詞結尾

  25. Self-closing 組件 • 使⽤用 HTML DOM 作為模板時,不⽀支援 component 使⽤用 self-closing

    tag。 08
  26. DOM 解析注意 • 某些 HTML 元素限制內部的元素只能是某幾種 tag,如 table、select、ul / ol

    等,若若是使⽤用組件時就必須特 別⼩小⼼心。 09
  27. 模板命名⼤大⼩小寫 10

  28. 模板命名⼤大⼩小寫 10

  29. prop 命名 11

  30. 多種屬性的元素

  31. 多種屬性的元素

  32. 讓 view 保持簡單 12

  33. 讓 view 保持簡單 12

  34. 保持 computed 屬性簡單

  35. 保持 computed 屬性簡單

  36. 保持簡寫的⼀一致性

  37. None
  38. 避免直接操作 this.$parent • 組件必須保持獨立,如果⼀一個組件需要對它的上/下層直接 存取,那麼這個組件則無法解耦,在其他地⽅方使⽤用。 13

  39. Event Bus 14

  40. 注意陣列列、物件更更新的機制 15

  41. ⼯工商服務

  42. 專屬優惠 Just for you ! ! 報名 【 Vue.js 與

    Vuex 前端開發實戰 】即享有 NT$ 500 課程優惠 請於報名表裡的備註欄欄註明是參參加 1/17 Vue.js Meetup 的朋友 將於第⼀一堂課退抵 NT$ 500 優惠:)
  43. 特別感謝場地⽀支援

  44. 下回預告 「原來來 vue 還可以這樣玩,JSX 與 storybook」 Vue.js 台灣 Meetup 2018#02

    預計⼆二⽉月上旬開放報名
  45. Thanks