這篇文章跟大家講解了一下Vue精簡版風格的相關知識點內容以及分享了實例代碼,有興趣的朋友參考下。
前面的話
Vue官網的風格指南依照優先順序(依序為必要、強烈推薦、推薦、謹慎使用)分類,且程式碼間隔較大,不易查詢。本文依照類型分類,並對部分範例或解釋進行縮減,是Vue風格指南的精簡版
元件名稱
【元件名為多個單字】(必要)
組件名稱應該永遠是多個單字的,根組件App 除外。這樣做可以避免跟現有的以及未來的HTML 元素相衝突,因為所有的HTML 元素名稱都是單字的
//bad Vue.component('todo', {}) //good Vue.component('todo-item', {})
【單檔案元件檔案名稱應該要麼始終是單字大寫開頭(PascalCase) ,要么始終橫線連接(kebab-case)】(強烈推薦)
//bad mycomponent.vue //good MyComponent.vue //good my-component.vue
【基礎組件名要有一個特定前綴開頭】(強烈建議)
應用特定樣式和約定的基礎元件(也就是展示類別的、無邏輯的或無狀態的元件) 應該全部以一個特定的前綴開頭,例如Base、App 或V
//bad components/ |- MyButton.vue |- VueTable.vue |- Icon.vue //good components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
【只應該擁有單一活躍實例的元件應該以 The
前綴命名,以示其唯一性】(強烈建議)
這不表示元件只可用於一個單頁面,而是每個頁面只使用一次,這些元件永遠不接受任何prop
//bad components/ |- Heading.vue |- MySidebar.vue //good components/ |- TheHeading.vue |- TheSidebar.vue
【和父元件緊密耦合的子元件應該以父元件名稱作為前綴命名】(強烈建議)
//bad components/ |- TodoList.vue |- TodoItem.vue |- TodoButton.vue //good components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue
【元件名應該以高級別的(通常是一般化描述的) 單字開頭,以描述性的修飾詞結尾】(強烈建議)
//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
【單一檔案元件和字串模板中元件名應總是PascalCase ——但在DOM模板中總是kebab-case】(強烈建議)
//bad <!-- 在单文件组件和字符串模板中 --> <mycomponent/> <myComponent/> <!-- 在 DOM 模板中 --> <MyComponent></MyComponent> //good <!-- 在单文件组件和字符串模板中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
【元件名稱應該傾向於完整單字而不是縮寫】(強烈建議)
//bad components/ |- SdSettings.vue |- UProfOpts.vue //good components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue
元件相關
【單一檔案元件、字串模板和JSX中沒有內容的元件應該自閉合-但在DOM範本裡不要這樣做】(強烈建議)
自閉合元件表示它們不僅沒有內容,而且刻意沒有內容
//bad <!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent></MyComponent> <!-- 在 DOM 模板中 --> <my-component/> //good <!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent/> <!-- 在 DOM 模板中 --> <my-component></my-component>
【為元件樣式設定作用域】(必要)
這條規則只和單一檔案元件有關。 不一定是要使用 scoped
特性。設定作用域也可以透過 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>
【單一檔案元件應該總是讓3f1c4e4b6b16bbbd69b2ee476dc4f83a、d477f9ce7bf77f53fbcf36bec1b69b7a 和c9ccee2e6ea535a969eb3f532ad9fe89 標籤的順序保持一致】(建議)
//good <!-- ComponentA.vue --> <script>/* ... */</script> <template>...</template> <style>/* ... */</style> <!-- ComponentB.vue --> <script>/* ... */</script> <template>...</template> <style>/* ... */</style>
【一個檔案中只有一個元件】(強烈建議)
//bad Vue.component('TodoList', {}) Vue.component('TodoItem', {}) //good components/ |- TodoList.vue |- TodoItem.vue
【元件選項預設順序】(建議)
1、副作用(觸發元件外的影響)
el
2、全域感知(要求元件以外的知識)
name parent
3、元件類型(更改元件的類型)
functional
4、模板修改器(改變模板的編譯方式)
delimiters comments
5、模板依賴(模板內使用的資源)
components directives filters
6、組合(向選項合併屬性)
extends mixins
7、介面(元件的介面)
inheritAttrs model props/propsData
8、本地狀態(本地的回應式屬性)
data computed
9、事件(透過響應式事件觸發的回呼)
watch 生命周期钩子 (按照它们被调用的顺序)
10、非響應式的屬性(不依賴回應系統的實例屬性)
methods
11、渲染(元件輸出的宣告式描述)
template/render renderError
prop
#【Prop 定義應該盡量詳細】(必要)
細緻的prop 定義有兩個好處: 1、它們寫明了組件的API,所以很容易看懂組件的用法;2、在開發環境下,如果向一個元件提供格式不正確的prop,Vue 將會告警,以幫助你捕捉潛在的錯誤來源
//bad props: ['status'] //good props: { status: String } //better props: { status: { type: String, required: true } }
【聲明prop時,其命名應始終使用camelCase,而在模板和JSX中應始終使用kebab-case】(強烈建議)
//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>
【多個特性的元素應該分成多行撰寫,每個特性一行】(強烈建議)
//bad <img src="https://vuejs.org/images/logo.png"> //good <img src="https://vuejs.org/images/logo.png" >
【元素特性預設順序】(建議)
1、定義(提供元件的選項)
is
2、清單渲染(建立多個變更的相同元素)
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、雙向綁定(把綁定和事件結合起來)
v-model
8 、其它特性(所有普通的綁定或未綁定的特性)
9、事件(元件事件監聽器)
v-on
10、內容(複寫元素的內容)
v-html v-text
屬性
【私有屬性名稱】(必要)
在插件、混入等擴充功能中始終為自訂的私有屬性使用$_ 前綴,並附帶一個命名空間以迴避和其它作者的衝突(例如$_yourPluginName_)
//bad methods: {update: function () { }} //bad methods: {_update: function () { } } //bad methods: {$update: function () { }} //bad methods: {$_update: function () { }} //good methods: { $_myGreatMixin_update: function () { }}
【元件的data必須是一個函數】(必要)
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数
//bad Vue.component('some-comp', { data: { foo: 'bar' } }) //good Vue.component('some-comp', { data: function () { return { foo: 'bar' } } })
【组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法】(强烈推荐)
//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(' ') } }
【应该把复杂计算属性分割为尽可能多的更简单的属性】(强烈推荐)
//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 } }
【当组件开始觉得密集或难以阅读时,在多个属性之间添加空行可以让其变得容易】(推荐)
//good props: { value: { type: String, required: true }, focused: { type: Boolean, default: false } }
谨慎使用
1、元素选择器应该避免在 scoped 中出现
在 scoped
样式中,类选择器比元素选择器更好,因为大量使用元素选择器是很慢的
//bad <style scoped> button { background-color: red; } </style> //good <style scoped> .btn-close { background-color: red; } </style>
2、应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent
或改变 prop
3、应该优先通过 Vuex 管理全局状态,而不是通过 this.$root
或一个全局事件总线
4、如果一组 v-if
+ v-else
的元素类型相同,最好使用 key
(比如两个 e388a4556c0f65e1904146cc1a846bee
元素)
//bad <p v-if="error"> 错误:{{ error }} </p> <p v-else> {{ results }} </p> //good <p v-if="error" key="search-status" > 错误:{{ error }} </p> <p v-else key="search-results" > {{ results }} </p>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
以上是Vue中如何實現精簡版風格(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!