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

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/
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. 保持簡寫的⼀一致性
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