首頁 > web前端 > js教程 > 主體

Vue中如何實現精簡版風格(詳細教學)

亚连
發布: 2018-06-08 18:04:43
原創
1885 人瀏覽過
<p>這篇文章跟大家講解了一下Vue精簡版風格的相關知識點內容以及分享了實例代碼,有興趣的朋友參考下。

<p>前面的話

<p>Vue官網的風格指南依照優先順序(依序為必要、強烈推薦、推薦、謹慎使用)分類,且程式碼間隔較大,不易查詢。本文依照類型分類,並對部分範例或解釋進行縮減,是Vue風格指南的精簡版

<p>元件名稱

<p>【元件名為多個單字】(必要)

<p>組件名稱應該永遠是多個單字的,根組件App 除外。這樣做可以避免跟現有的以及未來的HTML 元素相衝突,因為所有的HTML 元素名稱都是單字的

//bad
Vue.component(&#39;todo&#39;, {})
//good
Vue.component(&#39;todo-item&#39;, {})
登入後複製
<p>【單檔案元件檔案名稱應該要麼始終是單字大寫開頭(PascalCase) ,要么始終橫線連接(kebab-case)】(強烈推薦)

//bad
mycomponent.vue
//good
MyComponent.vue
//good
my-component.vue
登入後複製
<p>【基礎組件名要有一個特定前綴開頭】(強烈建議)

<p>應用特定樣式和約定的基礎元件(也就是展示類別的、無邏輯的或無狀態的元件) 應該全部以一個特定的前綴開頭,例如Base、App 或V

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
登入後複製
<p>【只應該擁有單一活躍實例的元件應該以 The 前綴命名,以示其唯一性】(強烈建議)

<p>這不表示元件只可用於一個單頁面,而是每個頁面只使用一次,這些元件永遠不接受任何prop

//bad
components/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue
登入後複製
<p>【和父元件緊密耦合的子元件應該以父元件名稱作為前綴命名】(強烈建議)

//bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//good
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
登入後複製
<p>【元件名應該以高級別的(通常是一般化描述的) 單字開頭,以描述性的修飾詞結尾】(強烈建議)

//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
登入後複製
<p>【單一檔案元件和字串模板中元件名應總是PascalCase ——但在DOM模板中總是kebab-case】(強烈建議)

//bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
//good
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
登入後複製
<p>【元件名稱應該傾向於完整單字而不是縮寫】(強烈建議)

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
登入後複製
<p>元件相關

<p>【單一檔案元件、字串模板和JSX中沒有內容的元件應該自閉合-但在DOM範本裡不要這樣做】(強烈建議)

<p>自閉合元件表示它們不僅沒有內容,而且刻意沒有內容

//bad
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
//good
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
登入後複製
<p>【為元件樣式設定作用域】(必要)

<p>這條規則只和單一檔案元件有關。 不一定是要使用 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>
登入後複製
<p>【單一檔案元件應該總是讓
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!