Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VueJS Style Guide 導讀

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

Kuro Hsu

January 17, 2018
Tweet

More Decks by Kuro Hsu

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Kuro Hsu
    http://kuro.tw
    [email protected]
    @kurotanshi

    View full-size slide

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

    View full-size slide

  5. ✴ Priority A: 必要遵守 (防⽌止錯誤)
    ✴ Priority B: 強烈推薦 (增加可讀性)
    ✴ Priority C: 推薦 (保持程式碼⼀一致性)
    ✴ Priority D: 謹慎使⽤用 (效能調校與潛在風險)

    View full-size slide

  6. 組件的命名
    01
    • 為避免衝突,以多個單字加上「連字號」命名
    • 注意在 HTML 與 template 的表⽰示⽅方式

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 為 v-for 設定 :key
    04

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. 組件檔案命名規則

    View full-size slide

  17. 組件檔案命名規則

    View full-size slide

  18. 組件檔案命名規則

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. DOM 解析注意
    • 某些 HTML 元素限制內部的元素只能是某幾種 tag,如
    table、select、ul / ol 等,若若是使⽤用組件時就必須特
    別⼩小⼼心。
    09

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. prop 命名
    11

    View full-size slide

  28. 多種屬性的元素

    View full-size slide

  29. 多種屬性的元素

    View full-size slide

  30. 讓 view 保持簡單
    12

    View full-size slide

  31. 讓 view 保持簡單
    12

    View full-size slide

  32. 保持 computed 屬性簡單

    View full-size slide

  33. 保持 computed 屬性簡單

    View full-size slide

  34. 保持簡寫的⼀一致性

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. ⼯工商服務

    View full-size slide

  38. 專屬優惠
    Just for you ! !
    報名 【 Vue.js 與 Vuex 前端開發實戰 】即享有 NT$ 500 課程優惠
    請於報名表裡的備註欄欄註明是參參加 1/17 Vue.js Meetup 的朋友
    將於第⼀一堂課退抵 NT$ 500 優惠:)

    View full-size slide

  39. 特別感謝場地⽀支援

    View full-size slide

  40. 下回預告
    「原來來 vue 還可以這樣玩,JSX 與 storybook」
    Vue.js 台灣 Meetup 2018#02
    預計⼆二⽉月上旬開放報名

    View full-size slide