Vue風格指南

2021-10-01 14:10:47 字數 2243 閱讀 2688

2、元件的data必須是乙個函式:

data: function () 

}

3、prop定義應該詳細。

細緻的 prop 定義有兩個好處:

// 更好的做法!

props:

}}

4、為v-for設定鍵值

在元件上總是必須用key配合v-for,以便維護內部元件及其子樹的狀態。甚至在元素上維護可**的行為。

案例:如你想使用給列表加過渡動畫,或想在被渲染元素是時保持聚焦。

5、避免v-if和v-for用在一起(v-for的優先順序高於v-if)

特殊:對於兩者存在的話,可以將v-if提到容器的父元素。

6、為元件樣式設定作用域

採用基於class的策略、scope特性

7、私有屬性名

使用模組作用域保持不允許外部訪問的函式的私有性。如果無法做到這一點,就始終為外掛程式、混入等不考慮作為對外公共 api 的自定義私有屬性使用$_字首。並附帶乙個命名空間以迴避和其它作者的衝突 (比如$_yourpluginname_)。

//第一

var mygreatmixin =

}}//第二

var mygreatmixin =

}}function myprivatefunction()

export default mygreatmixin

8、只要有能夠拼接檔案的構建系統,就把每個元件單獨分成檔案。

9、單檔案元件的檔名應該要麼始終是單詞大寫開頭 (pascalcase),要麼始終是橫線連線 (kebab-case)。

10、只應該擁有單個活躍例項的元件應該以the字首命名,以示其唯一性。

11、和父元件緊密耦合的子元件應該以父元件名作為字首命名。

你可以試著通過在其父元件命名的目錄中巢狀子元件以解決這個問題。

12、在單檔案元件、字串模板和 jsx 中沒有內容的元件應該是自閉合的——但在 dom 模板裡永遠不要這樣做。

13、對於絕大多數專案來說,在單檔案元件和字串模板中元件名應該總是 pascalcase 的——但是在 dom 模板中總是 kebab-case 的。

14、js/jsx 中的元件名應該始終是 pascalcase 的,儘管在較為簡單的應用中只使用vue.component進行全域性元件註冊時,可以使用 kebab-case 字串。

15、元件名應該傾向於完整單詞而不是縮寫。

在宣告 prop 的時候,其命名應該始終使用 camelcase,而在模板和 jsx 中應該始終使用 kebab-case。

props: 

16、多個特性的元素應該分多行撰寫,每個特性一行。

17、元件模板應該只包含簡單的表示式,複雜的表示式則應該重構為計算屬性或方法。

18、應該把複雜計算屬性分割為盡可能多的更簡單的屬性。

19、非空 html 特性值應該始終帶引號 (單引號或雙引號,選你 js 裡不用的那個)。

20、指令縮寫 (用:表示v-bind:、用@表示v-on:和用#表示v-slot:) 應該要麼都用要麼都不用。

21、你可能想在多個屬性之間增加乙個空行,特別是在這些選項一屏放不下,需要滾動才能都看到的時候。

22、單檔案元件應該總是讓標籤的順序保持一致。且要放在最後,因為另外兩個標籤至少要有乙個。

Vue 風格指南

了解vue風格指南,有利於規範編碼,現將一些規則記錄如下 1 元件 單檔案元件的檔名應該要麼始終是單詞大寫開頭 pascalcase 要麼始終是橫線連線 kebab case 單例元件名 在每個頁面中只是使用一次的元件應該以the字首命名,以示其唯一性。這類元件永遠不會接受任何prop。和父元件緊密...

vue書寫規範 風格指南

good item export default data 在vue的根例項data可以是物件,因為只有乙個根例項 newvue props 情況一 迴圈陣列,只顯示item.active 1的item 解決方法 computed先過濾出來需要展示的陣列,在迴圈 item v for item in...

vue專案檔案命名風格指南

使用vue cli工程化開發專案時,會需要建立許多的檔案,如何統一命名需要遵循一定的規範 所有的component檔案都是以大寫開頭 pascalcase 這也是官方所推薦的。但除了index.vue。例子 所有的.js檔案都遵循橫線連線 kebab case 例子 在views檔案下,代表路由的....