Vue精簡版風(fēng)格指南（推薦）
前面的話
Vue官網(wǎng)的風(fēng)格指南按照優(yōu)先級（依次為必要、強(qiáng)烈推薦、推薦、謹(jǐn)慎使用）分類，且代碼間隔較大，不易查詢。本文按照類型分類，并對部分示例或解釋進(jìn)行縮減，是Vue風(fēng)格指南的精簡版
組件名稱
【組件名為多個單詞】（必要）
組件名應(yīng)該始終是多個單詞的，根組件 App 除外。 這樣做可以避免跟現(xiàn)有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的
//bad
Vue.component('todo', {})
//good
Vue.component('todo-item', {})
【單文件組件文件名應(yīng)該要么始終是單詞大寫開頭 (PascalCase)，要么始終橫線連接 (kebab-case)】（強(qiáng)烈推薦）
//bad mycomponent.vue //good MyComponent.vue //good my-component.vue
【基礎(chǔ)組件名要有一個特定前綴開頭】（強(qiáng)烈推薦）
應(yīng)用特定樣式和約定的基礎(chǔ)組件 (也就是展示類的、無邏輯的或無狀態(tài)的組件) 應(yīng)該全部以一個特定的前綴開頭，比如 Base、App 或 V
//bad components/ |- MyButton.vue |- VueTable.vue |- Icon.vue //good components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
【只應(yīng)該擁有單個活躍實例的組件應(yīng)該以 The 前綴命名，以示其唯一性】（強(qiáng)烈推薦）
這不意味著組件只可用于一個單頁面，而是 每個頁面 只使用一次，這些組件永遠(yuǎn)不接受任何 prop
//bad components/ |- Heading.vue |- MySidebar.vue //good components/ |- TheHeading.vue |- TheSidebar.vue
【和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名】（強(qiáng)烈推薦）
//bad components/ |- TodoList.vue |- TodoItem.vue |- TodoButton.vue //good components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue
【組件名應(yīng)該以高級別的 (通常是一般化描述的) 單詞開頭，以描述性的修飾詞結(jié)尾】（強(qiáng)烈推薦）
//bad components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue //good components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue
【單文件組件和字符串模板中組件名應(yīng)總是PascalCase——但在DOM模板中總是kebab-case】（強(qiáng)烈推薦）
//bad <!-- 在單文件組件和字符串模板中 --> <mycomponent/> <myComponent/> <!-- 在 DOM 模板中 --> <MyComponent></MyComponent> //good <!-- 在單文件組件和字符串模板中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
【組件名應(yīng)該傾向于完整單詞而不是縮寫】（強(qiáng)烈推薦）
//bad components/ |- SdSettings.vue |- UProfOpts.vue //good components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue
組件相關(guān)
【單文件組件、字符串模板和JSX中沒有內(nèi)容的組件應(yīng)該自閉合——但在DOM模板里不要這樣做】（強(qiáng)烈推薦）
自閉合組件表示它們不僅沒有內(nèi)容，而且刻意沒有內(nèi)容
//bad <!-- 在單文件組件、字符串模板和 JSX 中 --> <MyComponent></MyComponent> <!-- 在 DOM 模板中 --> <my-component/> //good <!-- 在單文件組件、字符串模板和 JSX 中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
【為組件樣式設(shè)置作用域】（必要）
這條規(guī)則只和單文件組件有關(guān)。 不一定 要使用 scoped 特性。設(shè)置作用域也可以通過 CSS Modules，或者使用其它的庫或約定
//bad
<template><button class="btn btn-close">X</button></template>
<style>
.btn-close {background-color: red;}
</style>
//good
<template><button class="btn btn-close">X</button></template>
<style scoped>
.btn-close {background-color: red;}
</style>
//good
<template><button :class="[$style.button, $style.buttonClose]">X</button></template>
<style module>
.btn-close {background-color: red;}
</style>
【單文件組件應(yīng)該總是讓 <script>、<template> 和 <style> 標(biāo)簽的順序保持一致】（推薦）
//good <!-- ComponentA.vue --> <script>/* ... */</script> <template>...</template> <style>/* ... */</style> <!-- ComponentB.vue --> <script>/* ... */</script> <template>...</template> <style>/* ... */</style>
【一個文件中只有一個組件】（強(qiáng)烈推薦）
//bad
Vue.component('TodoList', {})
Vue.component('TodoItem', {})
//good
components/
|- TodoList.vue
|- TodoItem.vue
【組件選項默認(rèn)順序】（推薦）
1、副作用 (觸發(fā)組件外的影響)
el
2、全局感知 (要求組件以外的知識)
name
parent
3、組件類型 (更改組件的類型)
functional
4、模板修改器 (改變模板的編譯方式)
delimiters
comments
5、模板依賴 (模板內(nèi)使用的資源)
components
directives
filters
6、組合 (向選項里合并屬性)
extends
mixins
7、接口 (組件的接口)
inheritAttrs
model
props/propsData
8、本地狀態(tài) (本地的響應(yīng)式屬性)
data
computed
9、事件 (通過響應(yīng)式事件觸發(fā)的回調(diào))
watch
生命周期鉤子 (按照它們被調(diào)用的順序)
10、非響應(yīng)式的屬性 (不依賴響應(yīng)系統(tǒng)的實例屬性)
methods
11、渲染 (組件輸出的聲明式描述)
template/render
renderError
prop
【Prop 定義應(yīng)該盡量詳細(xì)】（必要）
細(xì)致的 prop 定義有兩個好處： 1、它們寫明了組件的 API，所以很容易看懂組件的用法； 2、在開發(fā)環(huán)境下，如果向一個組件提供格式不正確的 prop，Vue 將會告警，以幫助你捕獲潛在的錯誤來源
//bad
props: ['status']
//good
props: {
status: String
}
//better
props: {
status: {
type: String,
required: true
}
}
【聲明prop時，其命名應(yīng)始終使用camelCase，而在模板和JSX中應(yīng)始終使用kebab-case】（強(qiáng)烈推薦）
//bad
props: {'greeting-text': String}
<WelcomeMessage greetingText="hi"/>
//good
props: {greetingText: String}
<WelcomeMessage greeting-text="hi"/>
指令及特性
【總是用 key 配合 v-for】（必要）
//bad <li v-for="todo in todos"> //good <li v-for="todo in todos":key="todo.id">
【不要把 v-if 和 v-for 同時用在同一個元素上】（必要）
//bad
<li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} <li>
//good
<li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} <li>
【多個特性的元素應(yīng)該分多行撰寫，每個特性一行】（強(qiáng)烈推薦）
//bad <img src="https://vuejs.org/images/logo.png" alt="Vue Logo"> //good <img src="https://vuejs.org/images/logo.png" alt="Vue Logo" >
【元素特性默認(rèn)順序】（推薦）
1、定義 (提供組件的選項)
is
2、列表渲染 (創(chuàng)建多個變化的相同元素)
v-for
3、條件渲染 (元素是否渲染/顯示)
v-if
v-else-if
v-else
v-show
v-cloak
4、渲染方式 (改變元素的渲染方式)
v-pre
v-once
5、全局感知 (需要超越組件的知識)
id
6、唯一的特性 (需要唯一值的特性)
ref
key
slot
7、雙向綁定 (把綁定和事件結(jié)合起來)
v-model
8、其它特性 (所有普通的綁定或未綁定的特性)
9、事件 (組件事件監(jiān)聽器)
v-on
10、內(nèi)容 (復(fù)寫元素的內(nèi)容)
v-html
v-text
屬性
【私有屬性名】（必要）
在插件、混入等擴(kuò)展中始終為自定義的私有屬性使用 $_ 前綴，并附帶一個命名空間以回避和其它作者的沖突 (比如 $_yourPluginName_ )
//bad
methods: {update: function () { }}
//bad
methods: {_update: function () { } }
//bad
methods: {$update: function () { }}
//bad
methods: {$_update: function () { }}
//good
methods: { $_myGreatMixin_update: function () { }}
【組件的data必須是一個函數(shù)】（必要）
當(dāng)在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數(shù)
//bad
Vue.component('some-comp', {
data: {
foo: 'bar'
}
})
//good
Vue.component('some-comp', {
data: function () {
return {
foo: 'bar'
}
}
})
【組件模板應(yīng)該只包含簡單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計算屬性或方法】（強(qiáng)烈推薦）
//bad
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
//good
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
【應(yīng)該把復(fù)雜計算屬性分割為盡可能多的更簡單的屬性】（強(qiáng)烈推薦）
//bad
computed: {
price: function () {
var basePrice = this.manufactureCost / (1 - this.profitMargin)
return (
basePrice -
basePrice * (this.discountPercent || 0)
)
}
}
//good
computed: {
basePrice: function () {
return this.manufactureCost / (1 - this.profitMargin)
},
discount: function () {
return this.basePrice * (this.discountPercent || 0)
},
finalPrice: function () {
return this.basePrice - this.discount
}
}
【當(dāng)組件開始覺得密集或難以閱讀時，在多個屬性之間添加空行可以讓其變得容易】（推薦）
//good
props: {
value: {
type: String,
required: true
},
focused: {
type: Boolean,
default: false
}
}
謹(jǐn)慎使用
1、元素選擇器應(yīng)該避免在 scoped 中出現(xiàn)
在 scoped 樣式中，類選擇器比元素選擇器更好，因為大量使用元素選擇器是很慢的
//bad
<style scoped>
button {
background-color: red;
}
</style>
//good
<style scoped>
.btn-close {
background-color: red;
}
</style>
2、應(yīng)該優(yōu)先通過 prop 和事件進(jìn)行父子組件之間的通信，而不是 this.$parent 或改變 prop
3、應(yīng)該優(yōu)先通過 Vuex 管理全局狀態(tài)，而不是通過 this.$root 或一個全局事件總線
4、如果一組 v-if + v-else 的元素類型相同，最好使用 key (比如兩個 <div> 元素)
//bad
<div v-if="error">
錯誤：{{ error }}
</div>
<div v-else>
{{ results }}
</div>
//good
<div
v-if="error"
key="search-status"
>
錯誤：{{ error }}
</div>
<div
v-else
key="search-results"
>
{{ results }}
</div>
總結(jié)
以上所述是小編給大家介紹的Vue精簡版風(fēng)格指南，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue分頁器實現(xiàn)原理，編寫了分頁器組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
在現(xiàn)代前端開發(fā)中,Vue.js 來作為一個流行的 JavaScript 框架,提供了簡單易用的 API 和強(qiáng)大的功能,在 Vue 3 中,“Props”和“Emit”是兩個核心概念,本文將詳細(xì)探討這兩個概念的工作原理,并提供示例代碼以幫助更好地理解它們的使用,需要的朋友可以參考下2024-11-11
在 Vue2 項目中,ElementUI 的 el-form 組件是常用的表單組件,它提供了豐富的功能和樣式,可以滿足各種需求,本文給大家介紹Vue2+ElementUI表單、Form組件的封裝過程,感興趣的朋友跟隨小編一起看看吧2024-03-03
組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。下面通過本文給大家分享Vue.js組件通信的幾種姿勢，感興趣的朋友一起看看吧2017-10-10
Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF方法流程詳解
在日常的工作中，有時候會碰到需要將某個網(wǎng)址網(wǎng)頁保存成為pdf的情況，這篇文章主要介紹了用Vue實現(xiàn)網(wǎng)頁轉(zhuǎn)PDF的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本篇文章主要介紹了Vue單文件組件的如何使用方式介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
Vue中addEventListener()?監(jiān)聽事件案例講解
這篇文章主要介紹了Vue中addEventListener()?監(jiān)聽事件案例講解，包括語法講解和事件冒泡或事件捕獲的相關(guān)知識，本文結(jié)合示例代碼給大家講解的非常詳細(xì),需要的朋友可以參考下2022-12-12
Vue中使用虛擬dom且根據(jù)diff算法進(jìn)行新舊DOM對比,從而更新真實 dom,key是虛擬DOM對象的唯一標(biāo)識,在diff算法中key起著極其重要的作用,下面這篇文章主要給大家介紹了關(guān)于Vue中為什么不推薦用index做key的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue路由傳參頁面刷新參數(shù)丟失問題解決方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-10-10
vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請求的方法
這篇文章主要介紹了vue2.0設(shè)置proxyTable使用axios進(jìn)行跨域請求，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10