Vue中如何實現精簡版風格（詳細教學）-js教程-PHP中文網

首頁

web前端

js教程

Vue中如何實現精簡版風格（詳細教學）

亚连

Jun 08, 2018 pm 06:04 PM

vue

這篇文章跟大家講解了一下Vue精簡版風格的相關知識點內容以及分享了實例代碼，有興趣的朋友參考下。

前面的話

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

元件名稱

【元件名為多個單字】（必要）

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

//bad
Vue.component(&#39;todo&#39;, {})
//good
Vue.component(&#39;todo-item&#39;, {})

登入後複製

【單檔案元件檔案名稱應該要麼始終是單字大寫開頭(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>

登入後複製

【單一檔案元件應該總是讓

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7790

Java教學

1644

CakePHP 教程

1401

Laravel 教程

1298

PHP教程

1234

Related knowledge

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

vue怎麼給按鈕添加函數 Apr 08, 2025 am 08:51 AM

可以通過以下步驟為 Vue 按鈕添加函數：將 HTML 模板中的按鈕綁定到一個方法。在 Vue 實例中定義該方法並編寫函數邏輯。

vue中的watch怎麼用 Apr 07, 2025 pm 11:36 PM

Vue.js 中的 watch 選項允許開發者監聽特定數據的變化。當數據發生變化時，watch 會觸發一個回調函數，用於執行更新視圖或其他任務。其配置選項包括 immediate，用於指定是否立即執行回調，以及 deep，用於指定是否遞歸監聽對像或數組的更改。

vue多頁面開發是啥意思 Apr 07, 2025 pm 11:57 PM

Vue 多頁面開發是一種使用 Vue.js 框架構建應用程序的方法，其中應用程序被劃分為獨立的頁面：代碼維護性：將應用程序拆分為多個頁面可以使代碼更易於管理和維護。模塊化：每個頁面都可以作為獨立的模塊，便於重用和替換。路由簡單：頁面之間的導航可以通過簡單的路由配置來管理。 SEO 優化：每個頁面都有自己的 URL，這有助於搜索引擎優化。