Vue精簡版風格指南

来源:https://www.cnblogs.com/xiaohuochai/archive/2018/01/30/8383407.html
-Advertisement-
Play Games

[1]組件名稱 [2]組件相關 [3]prop [4]指令及特性 [5]屬性 [6]謹慎使用 ...


前面的話

　　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>

【單文件組件應該總是讓 <script>、<template> 和 <style> 標簽的順序保持一致】（推薦）

//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" alt="Vue Logo">
//good
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

【元素特性預設順序】（推薦）

　　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 (比如兩個 <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>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Mysql學習第三天
    1、對錶中數據的增刪改(DML) create table t_user( id int primary key auto_increment, name varchar(20) not null, email varchar(20) unique ) 為表添加記錄 (必須掌握) insert in ...
  • Django數據模型——通用欄位選項
    欄位 一個模型最重要也是唯一必需的部分，是它定義的資料庫欄位 欄位名稱限制 1、欄位名不能是python保留字，這樣會導致python語法錯誤 2、欄位不能包含連續一個以上的下劃線，這樣會和Django查詢語句語法衝突 通用欄位選項 null 如果設置為 True 的話，Django將在資料庫中存儲 ...
  • 【讀書筆記】iOS-微信公眾平臺開發最佳實踐
    一，微信是由騰訊公司廣州研發中心產品團隊開發，該團隊經理張小龍被稱為“微信之父”，公司總裁馬化騰確定該產品名稱為“微信”。 二，常見問題及解決方案。 1，請求URL超時。 這種情況一般是由於伺服器網速或響應速度太慢。可以重試幾次或者等一段時間再來試，如果還是這樣，則需要考慮更換速度更快，性能更好的服 ...
  • Android開發——Notification通知的各種Style詳解
    本來是想與之前講解使用Notification通知使用一起寫的，查看了資料，覺得有必要將這Style部分單獨拿出來講解 前篇：Android開發——Notification通知的使用及NotificationCopat.Builder常用設置API 上一篇中也是介紹了兩種常用的Style，這一篇算是 ...
  • Android開發——Notification通知的使用及NotificationCopat.Builder常用設置API
    想要看全部設置的請看這一篇 【轉】NotificationCopat.Builder全部設置 常用設置： 設置屬性 說明 setAutoCancel(boolean autocancel) 設置點擊信息後自動清除通知 setContent(RemoteView view) 設置自定義通知 setCo ...
  • 使用OCLint和Sonar對iOS代碼分析和質量管理
    OCLint 是一個強大的靜態代碼分析工具，可以用來提高代碼質量，查找潛在的bug，主要針對c,c++和Objective-c的靜態分析。 Sonar 是一個用於代碼質量管理的開放平臺。通過插件機制，Sonar 可以集成不同的測試工具，代碼分析工具，以及持續集成工具。 1 brew install ...
  • Android帶有粘性頭部的ScrollView
    前言，一天在點外賣的時候，註意到餓了麽列表頁的滑動效果不錯，但是覺得其中的手勢滑動還是挺複雜的，正好又碰到了在熟悉Touch事件的理解當中，所以就抽空對著餓了麽的列表頁面嘗試寫寫這個效果 1.先貼一個實現的效果圖 邏輯是當外部的ScrollView沒有滑到底部的時候，往上滑動的時候，是滑動外部的Sc ...
  • 小程式客服消息
    看到很多小程式里，點客服，提示關註公眾號，比如製作器里這個功能，能夠自動引導關註公眾號，圖文體驗非常好，研究了小程式客服介面後，我們就自己把它做成一個工具了，方便小程式的運營人員。芝麻小客服 體驗傳送門 http://xiaokefu.hotapp.cn 特點： (1)不需要開發，只需要在微信的小程 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類