Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
VueJS Style Guide 導讀 Kuro Hsu @ Vue.js 台灣 Meetup 2018#01
Slide 2
Slide 2 text
http://vue.tw VueJS 台灣有專屬網址了了
Slide 3
Slide 3 text
Kuro Hsu http://kuro.tw kurotanshi@gmail.com @kurotanshi
Slide 4
Slide 4 text
https://vuejs.org/v2/style-guide/index.html
Slide 5
Slide 5 text
✴ Priority A: 必要遵守 (防⽌止錯誤) ✴ Priority B: 強烈推薦 (增加可讀性) ✴ Priority C: 推薦 (保持程式碼⼀一致性) ✴ Priority D: 謹慎使⽤用 (效能調校與潛在風險)
Slide 6
Slide 6 text
組件的命名 01 • 為避免衝突，以多個單字加上「連字號」命名 • 注意在 HTML 與 template 的表⽰示⽅方式
Slide 7
Slide 7 text
組件的 data 必須是 function 02 • 另⼀一個要注意的點是 「data 內不可使⽤用箭頭函數 =>」
Slide 8
Slide 8 text
prop 的定義盡可能詳細 03
Slide 9
Slide 9 text
為 v-for 設定 :key 04
Slide 10
Slide 10 text
ref: https://calendar.perfplanet.com/2013/diff/
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
避免將 v-if 與 v-for ⼀一起⽤用 05
Slide 14
Slide 14 text
為組件的樣式設定作⽤用範圍 06
Slide 15
Slide 15 text
屬性的命名規則 07 • data 內部的屬性也不能以 底線 _ 或 錢字號 $ 作為開頭
Slide 16
Slide 16 text
將組件個別分為獨立的檔案
Slide 17
Slide 17 text
將組件個別分為獨立的檔案
Slide 18
Slide 18 text
組件檔案命名規則
Slide 19
Slide 19 text
組件檔案命名規則
Slide 20
Slide 20 text
組件檔案命名規則
Slide 21
Slide 21 text
每⾴頁只使⽤用⼀一次的組件 • 對於每個⾴頁⾯面只會使⽤用⼀一次的組件應該以 The 前綴命名，以表⽰示其 唯⼀一性。 這些組件不應有任何 prop 屬性。
Slide 22
Slide 22 text
緊密耦合的組件 • 以⽗父組件名稱作為⽬目錄名稱來來分層是常⾒見見的做法，但可能造成許 多⼦子組件的名稱相同，在開發階段可能不易易辨識。
Slide 23
Slide 23 text
緊密耦合的組件 • 和⽗父組件緊密耦合的⼦子組件，應該以⽗父組件名稱作為前綴
Slide 24
Slide 24 text
組件命名的順序 • 以概念念上較普遍的單詞作為開頭，以描述性的修飾詞結尾
Slide 25
Slide 25 text
Self-closing 組件 • 使⽤用 HTML DOM 作為模板時，不⽀支援 component 使⽤用 self-closing tag。 08
Slide 26
Slide 26 text
DOM 解析注意 • 某些 HTML 元素限制內部的元素只能是某幾種 tag，如 table、select、ul / ol 等，若若是使⽤用組件時就必須特 別⼩小⼼心。 09
Slide 27
Slide 27 text
模板命名⼤大⼩小寫 10
Slide 28
Slide 28 text
模板命名⼤大⼩小寫 10
Slide 29
Slide 29 text
prop 命名 11
Slide 30
Slide 30 text
多種屬性的元素
Slide 31
Slide 31 text
多種屬性的元素
Slide 32
Slide 32 text
讓 view 保持簡單 12
Slide 33
Slide 33 text
讓 view 保持簡單 12
Slide 34
Slide 34 text
保持 computed 屬性簡單
Slide 35
Slide 35 text
保持 computed 屬性簡單
Slide 36
Slide 36 text
保持簡寫的⼀一致性
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
避免直接操作 this.$parent • 組件必須保持獨立，如果⼀一個組件需要對它的上/下層直接 存取，那麼這個組件則無法解耦，在其他地⽅方使⽤用。 13
Slide 39
Slide 39 text
Event Bus 14
Slide 40
Slide 40 text
注意陣列列、物件更更新的機制 15
Slide 41
Slide 41 text
⼯工商服務
Slide 42
Slide 42 text
專屬優惠 Just for you ! ! 報名 【 Vue.js 與 Vuex 前端開發實戰 】即享有 NT$ 500 課程優惠 請於報名表裡的備註欄欄註明是參參加 1/17 Vue.js Meetup 的朋友 將於第⼀一堂課退抵 NT$ 500 優惠：）
Slide 43
Slide 43 text
特別感謝場地⽀支援
Slide 44
Slide 44 text
下回預告 「原來來 vue 還可以這樣玩，JSX 與 storybook」 Vue.js 台灣 Meetup 2018#02 預計⼆二⽉月上旬開放報名
Slide 45
Slide 45 text
Thanks