VueJS 台灣 Meetup 2018 #01 2018/01/17
Video: https://www.youtube.com/watch?v=K8k5mkl-w4g 範例檔案: https://github.com/kurotanshi/vue-meetup-201801
VueJS Style Guide 導讀Kuro Hsu @ Vue.js 台灣 Meetup 2018#01
View Slide
http://vue.twVueJS 台灣有專屬網址了了
Kuro Hsuhttp://kuro.tw[email protected]@kurotanshi
https://vuejs.org/v2/style-guide/index.html
✴ Priority A: 必要遵守 (防⽌止錯誤)✴ Priority B: 強烈推薦 (增加可讀性)✴ Priority C: 推薦 (保持程式碼⼀一致性)✴ Priority D: 謹慎使⽤用 (效能調校與潛在風險)
組件的命名01• 為避免衝突，以多個單字加上「連字號」命名• 注意在 HTML 與 template 的表⽰示⽅方式
組件的 data 必須是 function02• 另⼀一個要注意的點是 「data 內不可使⽤用箭頭函數 =>」
prop 的定義盡可能詳細03
為 v-for 設定 :key04
ref: https://calendar.perfplanet.com/2013/diff/
避免將 v-if 與 v-for ⼀一起⽤用05
為組件的樣式設定作⽤用範圍06
屬性的命名規則07• data 內部的屬性也不能以 底線 _ 或 錢字號 $ 作為開頭
將組件個別分為獨立的檔案
組件檔案命名規則
每⾴頁只使⽤用⼀一次的組件• 對於每個⾴頁⾯面只會使⽤用⼀一次的組件應該以 The 前綴命名，以表⽰示其唯⼀一性。 這些組件不應有任何 prop 屬性。
緊密耦合的組件• 以⽗父組件名稱作為⽬目錄名稱來來分層是常⾒見見的做法，但可能造成許多⼦子組件的名稱相同，在開發階段可能不易易辨識。
緊密耦合的組件• 和⽗父組件緊密耦合的⼦子組件，應該以⽗父組件名稱作為前綴
組件命名的順序• 以概念念上較普遍的單詞作為開頭，以描述性的修飾詞結尾
Self-closing 組件• 使⽤用 HTML DOM 作為模板時，不⽀支援 component 使⽤用self-closing tag。08
DOM 解析注意• 某些 HTML 元素限制內部的元素只能是某幾種 tag，如table、select、ul / ol 等，若若是使⽤用組件時就必須特別⼩小⼼心。09
模板命名⼤大⼩小寫10
prop 命名11
多種屬性的元素
讓 view 保持簡單12
保持 computed 屬性簡單
保持簡寫的⼀一致性
避免直接操作 this.$parent• 組件必須保持獨立，如果⼀一個組件需要對它的上/下層直接存取，那麼這個組件則無法解耦，在其他地⽅方使⽤用。13
Event Bus14
注意陣列列、物件更更新的機制15
⼯工商服務
專屬優惠Just for you ! !報名 【 Vue.js 與 Vuex 前端開發實戰 】即享有 NT$ 500 課程優惠請於報名表裡的備註欄欄註明是參參加 1/17 Vue.js Meetup 的朋友將於第⼀一堂課退抵 NT$ 500 優惠：）
特別感謝場地⽀支援
下回預告「原來來 vue 還可以這樣玩，JSX 與 storybook」Vue.js 台灣 Meetup 2018#02預計⼆二⽉月上旬開放報名
Thanks
kurotanshi
smt7174
yoshinagaiwnl
ganota
sumiren
tbaldauf
yayoi_dd
carta_engineering
line_developers
iseki
you
ybrliiu
onk
paulrobertlloyd
maltzj
chrislema
marcelosomers
robhawkes
lara
sachag
productmarketing
thekraken
searls
marcduiker