根據Vue官方風格指南整理
第壹，力1。組件名稱由多個單詞組成。
除了根組件應用程序外，組件名稱應始終包含多個單詞。
正面例子:
導出默認值{
名稱:“TodoItem”，
// ...
}
反例:
導出默認值{
名稱:Todo，
// ...
}2.組件數據
組件的數據必須是函數。
當在組件中使用數據屬性時（除了new Vue之外的任何地方），其值必須是返回對象的函數。
正面例子:
//在。vue文件中
導出默認值{
data（）{
返回{
foo:“酒吧”
}
}
}
//可以直接在Vue的根實例上使用對象。
//因為只有壹個這樣的實例。
新Vue （{
數據:{
foo:“酒吧”
}
}）反例:
導出默認值{
數據:{
foo:“酒吧”
}
}3.正確定義
正確定義應該盡可能詳細。
在您提交的代碼中，prop的定義應該盡可能詳細，至少您需要指定其類型。
正面例子:
道具:{
狀態:字符串
}
//更好的練習！
道具:{
狀態:{
類型:字符串，
必填:真，
驗證器:函數（值）{
返回【
‘同步‘，
‘同步‘，
版本沖突，
“錯誤”
].indexOf（值）！== -1
}
}
}反例:
//這僅在開發原型系統時是可接受的。
道具:【‘狀態‘】4。設置v-for的鍵值。
始終使用帶v-for的鍵。
在組件上，鍵必須始終與v-for壹起使用，以維護內部組件及其子樹的狀態。甚至在元素上保持可預測的行為，例如動畫中的對象恒定性，也是壹種很好的做法。
正面例子:
& ltul & gt
& lt裏
v-for =“todos中的todo“
:key =“todo . id“
& gt
{{ todo.text }}
& lt/李& gt
& lt/ul & gt；反例:
& ltul & gt
& ltLi v-for =“todo in todos“& gt。
{{ todo.text }}
& lt/李& gt
& lt/ul & gt；5.避免同時使用v-if和v-for。
不要在同壹元素上同時使用v-if和v-for。
通常，我們傾向於在兩種常見情況下這樣做:
過濾列表中的項目（例如v-for =“用戶中的用戶“v-if =“user . is active“）。在這種情況下，用計算屬性（如activeUsers）替換用戶以返回篩選列表。
以避免呈現應隱藏的列表（例如，v-for =“user in users“v-if =“shouldshowusers“）。在這種情況下，請將v-if移動到容器元素（如ul、ol）。
正面例子:
& ltul v-if =“should show users“& gt。
& lt裏
v-for=“用戶中的用戶“
:key =“user . id“
& gt
{{用戶名}}
& lt/李& gt
& lt/ul & gt；反例:
& ltul & gt
& lt裏
v-for=“用戶中的用戶“
v-if =“should show users“
:key =“user . id“
& gt
{{用戶名}}
& lt/李& gt
& lt/ul & gt；6.設置組件樣式的範圍
對於應用程序來說，頂級應用程序組件和布局組件中的樣式可以是全局的，但所有其他組件都應該有範圍。
此規則僅與單個文件組件相關。您不必使用限定範圍的功能。範圍也可以通過CSS模塊設置，這是壹種基於類的類似BEM的策略，但您也可以使用其他庫或約定。
在任何類中，對於組件庫，我們都應該選擇基於類的策略，而不是作用域特性。
這樣可以更容易地覆蓋內部樣式:使用普通人可以理解的類名，並且選擇器優先級不會太高，並且不太可能導致沖突。
正面例子:
& lt模板& gt
& ltButton class =“c-Button c-Button-close“& gt。X & lt/button & gt；
& lt/template & gt；
& lt！-使用邊界元慣例-》；
& ltstyle & gt
。c按鈕{
邊框:無；
邊框-半徑:2px
}
。c按鈕-關閉{
背景色:紅色；
}
& lt/style & gt；反例:
& lt模板& gt
& ltbutton class =“BTN BTN-close“& gt。X & lt/button & gt；
& lt/template & gt；
& ltstyle & gt
。BTN-關閉{
背景色:紅色；
}
& lt/style & gt；
& lt模板& gt
& ltbutton class =“button button-close“& gt。X & lt/button & gt；
& lt/template & gt；
& lt！-使用“限定範圍”功能-& gt；
& lt樣式範圍& gt
。按鈕{
邊框:無；
邊框-半徑:2px
}
。按鈕-關閉{
背景色:紅色；
}
& lt/style & gt；二、強烈推薦（增強可讀性）1。組件文件。
只要有壹個可以拼接文件的建築系統，就可以將每個構件單獨劃分為文件。
當您需要編輯組件或咨詢組件的用法時，您可以更快地找到它。
正面例子:
組件/
|- TodoList.vue
|- TodoItem.vue反例:
V
UE . component（‘TodoList‘，{
// ...
})
vue . component（‘todo item‘，{
// ...
})2.單個文件組件文件的情況
單個文件組件的文件名應該總是PascalCase。
正面例子:
組件/
|- MyComponent.vue反例:
組件/
|- myComponent.vue
|-mycomponent.vue3 .基本組件名稱
應用特定樣式和約定的基本組件（即顯示類、不合邏輯或無狀態的組件）都應該以特定的前綴開頭，例如Base、app或v。
正面例子:
組件/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue反例:
組件/
|- MyButton.vue
|- VueTable.vue
|-icon.vue4 .單例組件名稱
應該只有壹個活動實例的組件應以前綴命名，以顯示其唯壹性。
這並不意味著該組件只能在單個頁面上使用，而是每頁只能使用壹次。這些組件永遠不會接受任何prop，因為它們是為您的應用程序定制的，而不是它們在應用程序中的上下文。如果您發現有必要添加prop，則表明它實際上是壹個可重用的組件，但目前在每個頁面中僅使用壹次。
正面例子:
組件/
|- TheHeading.vue
|- TheSidebar.vue反例:
組件/
|-標題。vue
|-mysidebar.vue5 .緊耦合組件名稱
與父組件緊密相關的子組件應以父組件名稱作為前綴進行命名。
如果壹個組件只在父組件的上下文中有意義，那麽這種關系應該反映在其名稱中。因為編輯器通常按字母順序組織文件，這可以將相關文件放在壹起。
正面例子:
組件/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
組件/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue反例:
組件/
|- SearchSidebar.vue
|-navigationforsearchsidebar . vue 6 .組件名稱中的單詞順序
組件名應該以高級（通常是概括的）單詞開頭，以描述性修飾語結尾。
正面例子:
組件/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|-設置復選框Terms.vue
|-settings checkboxlaunchonstartup . vue反例:
組件/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|-啟動啟動復選框。vue
|- RunSearchButton.vue
|- SearchInput.vue
|-termscheckbox.vue7 .模板中組件名稱的大小寫
總是帕斯卡凱斯的
正面例子:
& lt！-在單個文件組件和字符串模板中-& gt；
& ltmy component/& gt；反例:
& lt！-在單個文件組件和字符串模板中-& gt；
& ltmy component/& gt；
& lt！-在單個文件組件和字符串模板中-& gt；
& ltmy component/& gt；8.完整單詞的成分名稱
組件名稱應該傾向於完整的單詞而不是縮寫。
正面例子:
組件/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue反例:
組件/
|- SdSettings.vue
|-uprofepts.vue9 .具有多種特征的元素
具有多個屬性的元素應該寫在多行中，每個屬性壹行。
正面例子:
& ltimg
src =“puted:{
規範化全名:函數（）{
返回this.fullName.split（““）。地圖（函數（單詞）{
返回單詞【0】。toupper case（）+word . slice（1）
}).聯接（‘‘）
}
}反例:
{{
全名。split（““）。地圖（函數（單詞）{
返回單詞【0】。toupper case（）+word . slice（1）
}).聯接（‘‘）
}}11.簡單計算屬性
正面例子:
計算值:{
base price:function（）{
return this . manufacturecost/（1-this . profit margin）
},
折扣:函數（）{
返回this . base price *（this . discount percent | | 0）
},
finalPrice:函數（）{
返回this.basePrice - this.discount
}
}反例:
計算值:{
價格:函數（）{
var base price = this . manufactures cost/（1-this . profit margin）
返回(
基本價格-
基本價格*（this . discount percent | | 0）
)
}
}12.引用的屬性值
非空的HTML屬性值應該始終用引號括起來（單引號或雙引號，以JS中不使用的為準）。
HTML中不帶空格的屬性值可以不帶引號，但這樣做通常會避免特性值帶有空格，從而導致可讀性較差。
正面例子:
& ltapp sidebar:style =“{ width:sidebar width+‘px‘}“& gt；反例:
& ltapp sidebar:style = { width:sidebar width+‘px‘} & gt；13.指令縮寫
使用指令縮寫（v-bind: with:和v-on: with @）。
正面例子:
& lt投入
@ input =“on input“
@ focus =“onFocus“
& gt反例:
& lt投入
v-bind:value =“newdotext“
:placeholder =“newtoidinstructions“
& gt三。推薦1。單個文件組件的頂級元素的順序。
單個文件組件應該始終讓
正面例子:
& lt！-componenta . vue-& gt；
& lt模板& gt...& lt/template & gt；
& lt腳本& gt/* ...*/& lt；/script & gt；
& ltstyle & gt/* ...*/& lt；/style & gt；四、謹慎使用（潛在危險模式）1。未使用v-if/v-if-else/v-else中的密鑰。
如果壹組v-if+v-else的元素類型相同，最好使用key（例如，two
正面例子:
& ltp
v-if=“錯誤“
key=“搜索狀態“
& gt
錯誤:{{錯誤}}
& lt/p & gt；
& ltp
v-否則
key=“搜索結果“
& gt
{{結果}}
& lt/p & gt；
反例:
& ltp v-if =“error“& gt。
錯誤:{{錯誤}}
& lt/p & gt；
& ltp v-else & gt；
{{結果}}
& lt/p & gt；2.範圍內的元素選擇器
應該避免在作用域中使用元素選擇器。
在作用域樣式中，類選擇器優於元素選擇器，因為大量使用元素選擇器速度較慢。
正面例子:
& lt模板& gt
& ltbutton class =“BTN BTN-close“& gt。X & lt/button & gt；
& lt/template & gt；
& lt樣式範圍& gt
。BTN-關閉{
背景色:紅色；
}
& lt/style & gt；反例:
& lt模板& gt
& lt按鈕& gtX & lt/button & gt；
& lt/template & gt；
& lt樣式範圍& gt
按鈕{
背景色:紅色；
}
& lt/style & gt；3.隱式父子組件通信
應該優先考慮父組件和子組件之間通過prop和events進行的通信，而不是這樣。$parent或更改道具。
正面例子:
vue . component（‘todo item‘，{
道具:{
待辦事項:{
類型:對象，
必填:真
}
},
模板: `
& lt投入
:value =“todo . text“
@ input =“$ emit（‘input‘，$event.target.value）“
& gt
`
}）反例:
vue . component（‘todo item‘，{
道具:{
待辦事項:{
類型:對象，
必填:真
}
},
方法:{
removeTodo（）{
var vm = this
vm。$parent.todos = vm。$ parent . todos . filter（function（todo ）{
返回todo.id！== vm.todo.id
})
}
},
模板: `
& ltspan>。
{{ todo.text }}
& ltbutton @ click =“remove todo“& gt；
X
& lt/button & gt；
& lt/span>。
`
})4.非流動全局狀態管理
應該優先考慮通過Vuex管理全局狀態，而不是通過這個。$root或全局事件總線。
正面例子:
// store/modules/todos.js
導出默認值{
狀態:{
列表:【】
},
突變:{
REMOVE _ TODO（state，to doid ）{
state . list = state . list . filter（todo = & gt；todo.id！== todoId）
}
},
動作:{
雷姆