Worauf sollten Sie bei der Vue-Frontend-Entwicklung achten?
Dieses Mal werde ich Ihnen zeigen, worauf Sie bei der Front-End-Entwicklung achten müssen. Was sind die Vorsichtsmaßnahmen für Vue bei der Front-End-Entwicklung? sehen.
Basierend auf dem offiziellen Vue-Styleguide
1. Obligatorisch
1
Komponentennamen sollten immer aus mehreren Wörtern bestehen, mit Ausnahme der Stammkomponente App.
Positivbeispiel:
export default {
name: 'TodoItem',
// ...
}
反例：
export default {
name: 'Todo',
// ...
}2. Komponentendaten
Die Daten der Komponente müssen eine Funktion sein.
Bei Verwendung des Datenattributs in einer Komponente (irgendwo außer New Vue) muss sein Wert eine Funktion sein, die ein Objekt zurückgibt.
Positivbeispiel:
// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}
// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
data: {
foo: 'bar'
}
})Gegenbeispiel:
export default {
data: {
foo: 'bar'
}
}3. Requisitendefinition
Die Requisitendefinition sollte so detailliert wie möglich sein.
In dem von Ihnen übermittelten Code sollte die Definition von „prop“ so detailliert wie möglich sein und zumindest den Typ angeben.
Positivbeispiel:
props: {
status: String
}
// 更好的做法！
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}Gegenbeispiel:
// 这样做只有开发原型系统时可以接受 props: ['status']
4. Schlüsselwert für v-for festlegen
Schlüssel immer mit v-for verwenden.
Key muss immer mit v-for für eine Komponente verwendet werden, um den Status der internen Komponente und ihrer Unterbäume beizubehalten. Selbst die Beibehaltung eines vorhersehbaren Verhaltens von Elementen, wie z. B. der Objektkonstanz in Animationen, ist eine gute Vorgehensweise.
Positivbeispiel:
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>Gegenbeispiel:
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>5. Vermeiden Sie die gemeinsame Verwendung von v-if und v-for
Verwenden Sie niemals v-if und v -for werden gleichzeitig für dasselbe Element verwendet.
Im Allgemeinen tun wir dies in zwei häufigen Situationen:
Um Elemente in einer Liste zu filtern (z. B. v-for="user in users" v-if="user.isActive"). Ersetzen Sie in diesem Fall „users“ durch eine berechnete Eigenschaft (z. B. „activeUsers“), die die gefilterte Liste zurückgibt.
Um das Rendern von Listen zu vermeiden, die ausgeblendet werden sollten (z. B. v-for="user in users" v-if="shouldShowUsers"). Verschieben Sie in diesem Fall bitte das v-if in das Containerelement (z. B. ul, ol).
Positivbeispiel:
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>Gegenbeispiel:
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>6. Legen Sie den Bereich für Komponentenstile fest
Für Anwendungen können Stile in App-Komponenten und Layoutkomponenten der obersten Ebene global sein. aber alle anderen Komponenten sollten einen Gültigkeitsbereich haben.
Diese Regel gilt nur für Einzeldateikomponenten. Sie müssen das Gültigkeitsbereichsattribut nicht verwenden, um Bereiche über CSS-Module festzulegen. Natürlich können Sie auch andere Bibliotheken oder Konventionen verwenden
In jedem Fall sollten wir für Komponentenbibliotheken lieber klassenbasierte Strategien anstelle von bereichsbezogenen Funktionen verwenden >
Dies erleichtert das Überschreiben interner Stile : Verwendung von für Menschen lesbaren Klassennamen ohne hohe Selektorpriorität, die weniger Konflikte verursachen Beispiel:
<template>
<button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 约定 -->
<style>
.c-Button {
border: none;
border-radius: 2px;
}
.c-Button--close {
background-color: red;
}
</style><template>
<button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
background-color: red;
}
</style>
<template>
<button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
.button {
border: none;
border-radius: 2px;
}
.button-close {
background-color: red;
}
</style>2 . Dringend empfohlen (verbessert die Lesbarkeit)
1. KomponentendateiSolange es ein Build-System gibt, das Dateien zusammenfügen kann, trennen Sie jede Komponente in separate DateienWenn Sie eine Komponente bearbeiten oder die Verwendung einer Komponente überprüfen müssen, können Sie sie schneller finden
components/ |- TodoList.vue |- TodoItem.vue
V
ue.component('TodoList', {
// ...
})
Vue.component('TodoItem', {
// ...
})components/ |- MyComponent.vue
components/ |- myComponent.vue |- mycomponent.vue
components/ |- BaseButton.vue |- BaseTable.vue |- BaseIcon.vue
这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。
正例：
components/ |- TheHeading.vue |- TheSidebar.vue
反例：
components/ |- Heading.vue |- MySidebar.vue
5. 紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。
正例：
components/ |- TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue components/ |- SearchSidebar.vue |- SearchSidebarNavigation.vue
反例：
components/ |- SearchSidebar.vue |- NavigationForSearchSidebar.vue
6. 组件名中的单词顺序
组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
正例：
components/ |- SearchButtonClear.vue |- SearchButtonRun.vue |- SearchInputQuery.vue |- SearchInputExcludeGlob.vue |- SettingsCheckboxTerms.vue |- SettingsCheckboxLaunchOnStartup.vue
反例：
components/ |- ClearSearchButton.vue |- ExcludeFromSearchInput.vue |- LaunchOnStartupCheckbox.vue |- RunSearchButton.vue |- SearchInput.vue |- TermsCheckbox.vue
7. 模板中的组件名大小写
总是 PascalCase 的
正例：
<!-- 在单文件组件和字符串模板中 --> <MyComponent/>
反例：
<!-- 在单文件组件和字符串模板中 --> <mycomponent/> <!-- 在单文件组件和字符串模板中 --> <myComponent/>
8. 完整单词的组件名
组件名应该倾向于完整单词而不是缩写。
正例：
components/ |- StudentDashboardSettings.vue |- UserProfileOptions.vue
反例：
components/ |- SdSettings.vue |- UProfOpts.vue
9. 多个特性的元素
多个特性的元素应该分多行撰写，每个特性一行。
正例：
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo" > <MyComponent foo="a" bar="b" baz="c" />
反例：
<img src="https://vuejs.org/images/logo.png" alt="Vue Logo"> <MyComponent foo="a" bar="b" baz="c"/>
10. 模板中简单的表达式
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。
正例：
<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}反例：
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}11. 简单的计算属性
正例：
computed: {
basePrice: function () {
return this.manufactureCost / (1 - this.profitMargin)
},
discount: function () {
return this.basePrice * (this.discountPercent || 0)
},
finalPrice: function () {
return this.basePrice - this.discount
}
}反例：
computed: {
price: function () {
var basePrice = this.manufactureCost / (1 - this.profitMargin)
return (
basePrice -
basePrice * (this.discountPercent || 0)
)
}
}12. 带引号的特性值
非空 HTML 特性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。
在 HTML 中不带空格的特性值是可以没有引号的，但这样做常常导致带空格的特征值被回避，导致其可读性变差。
正例：
<AppSidebar :style="{ width: sidebarWidth + 'px' }">反例：
<AppSidebar :style={width:sidebarWidth+'px'}>13. 指令缩写
都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)
正例：
<input @input="onInput" @focus="onFocus" >
反例：
<input v-bind:value="newTodoText" :placeholder="newTodoInstructions" >
三、推荐
1. 单文件组件的顶级元素的顺序
单文件组件应该总是让
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So richten Sie die Tastatur-Boot-Funktion auf einem GIGABYTE-Motherboard ein (aktivieren Sie den Tastatur-Boot-Modus auf dem GIGABYTE-Motherboard)
Dec 31, 2023 pm 05:15 PM
So richten Sie den Tastaturstart auf dem Motherboard von Gigabyte ein. Wenn es den Tastaturstart unterstützen muss, muss es sich um eine PS2-Tastatur handeln! ! Die Einstellungsschritte sind wie folgt: Schritt 1: Drücken Sie Entf oder F2, um das BIOS nach dem Booten aufzurufen, und rufen Sie den Advanced-Modus (Normal) des BIOS auf. Standardmäßig wechseln Sie in den EZ-Modus (Easy) des Motherboards Drücken Sie F7, um in den erweiterten Modus zu wechseln. Motherboards der ROG-Serie rufen standardmäßig den erweiterten Modus auf (zur Demonstration verwenden wir vereinfachtes Chinesisch). Schritt 2: Wählen Sie „Erweitert“ – „Erweiterte Energieverwaltung (APM)“. Suchen Sie die Option [Aufwecken durch PS2-Tastatur] Schritt 4: Diese Option ist standardmäßig deaktiviert. Nach dem Herunterziehen sehen Sie drei verschiedene Einstellungsoptionen: Drücken Sie die [Leertaste], um den Computer einzuschalten, und drücken Sie die Gruppe
Was ist die beste Grafikkarte für i7 3770?
Dec 29, 2023 am 09:12 AM
Welche Grafikkarte eignet sich für den Core i73770? Die RTX3070 ist eine sehr leistungsstarke Grafikkarte mit hervorragender Leistung und fortschrittlicher Technologie. Egal, ob Sie Spiele spielen, Grafiken rendern oder maschinelles Lernen durchführen, der RTX3070 kommt damit problemlos zurecht. Es nutzt die Ampere-Architektur von NVIDIA, verfügt über 5888 CUDA-Kerne und 8 GB GDDR6-Speicher, was für ein flüssiges Spielerlebnis und hochwertige Grafikeffekte sorgen kann. RTX3070 unterstützt außerdem die Raytracing-Technologie, die realistische Licht- und Schatteneffekte darstellen kann. Alles in allem ist die RTX3070 eine leistungsstarke und fortschrittliche Grafikkarte, die für diejenigen geeignet ist, die hohe Leistung und hohe Qualität anstreben. RTX3070 ist eine Grafikkarte der NVIDIA-Serie. Verwendung von NVID der 2. Generation
Auswahl des richtigen Tablets für Musikstudenten
Jan 10, 2024 pm 10:09 PM
Welches Tablet eignet sich für Musiker? Der 12,9-Zoll-Lautsprecher im iPad von Huawei ist ein sehr gutes Produkt. Es verfügt über vier Lautsprecher und die Klangqualität ist ausgezeichnet. Darüber hinaus gehört es zur Pro-Serie, die etwas besser ist als andere Modelle. Insgesamt ist das iPad Pro ein sehr gutes Produkt. Der Lautsprecher dieses Mini4-Mobiltelefons ist klein und die Wirkung ist durchschnittlich. Eine externe Musikwiedergabe ist damit nicht möglich, für den Musikgenuss ist man dennoch auf Kopfhörer angewiesen. Kopfhörer mit guter Klangqualität haben eine etwas bessere Wirkung, aber billige Kopfhörer im Wert von dreißig oder vierzig Yuan können die Anforderungen nicht erfüllen. Welches Tablet sollte ich für elektronische Klaviermusik verwenden? Wenn Sie ein iPad größer als 10 Zoll kaufen möchten, empfehle ich die Verwendung von zwei Anwendungen, nämlich Henle und Piascore. Zur Verfügung gestellt von Henle
Ausführliche Erläuterung der Rolle von .ibd-Dateien in MySQL und der damit verbundenen Vorsichtsmaßnahmen
Mar 15, 2024 am 08:00 AM
Ausführliche Erläuterung der Rolle von .ibd-Dateien in MySQL und der damit verbundenen Vorsichtsmaßnahmen. MySQL ist ein beliebtes relationales Datenbankverwaltungssystem, und die Daten in der Datenbank werden in verschiedenen Dateien gespeichert. Unter diesen ist die .ibd-Datei eine Datendatei in der InnoDB-Speicher-Engine, die zum Speichern von Daten und Indizes in Tabellen verwendet wird. Dieser Artikel bietet eine detaillierte Analyse der Rolle der .ibd-Datei in MySQL und liefert relevante Codebeispiele, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle von .ibd-Dateien: Speichern von Daten: .ibd-Dateien sind InnoDB-Speicher
Welche Spiele eignen sich zum Spielen mit i34150 und 1G-unabhängiger Grafik (welche Spiele sind für i34150 geeignet)
Jan 05, 2024 pm 08:24 PM
Welche Spiele können mit dem i34150 mit 1G-unabhängiger Grafik gespielt werden? Kann er kleine Spiele wie LoL spielen? GTX750 und GTX750TI sind sehr geeignete Grafikkarten. Wenn Sie nur ein paar kleine Spiele spielen oder keine Spiele spielen, empfiehlt sich die Verwendung der integrierten i34150-Grafikkarte. Im Allgemeinen ist der Preisunterschied zwischen Grafikkarten und Prozessoren nicht sehr groß, daher ist es wichtig, eine vernünftige Kombination zu wählen. Wenn Sie 2 GB Videospeicher benötigen, wird empfohlen, GTX750TI zu wählen. Wenn Sie nur 1 GB Videospeicher benötigen, wählen Sie einfach GTX750. Die GTX750TI kann als verbesserte Version der GTX750 mit Übertaktungsfunktionen angesehen werden. Welche Grafikkarte mit dem i34150 gekoppelt werden kann, hängt von Ihren Anforderungen ab. Wenn Sie eigenständige Spiele spielen möchten, empfiehlt es sich, einen Wechsel der Grafikkarte in Betracht zu ziehen. du kannst wählen
Wählen Sie die Treiberversion, die zu Ihrem RX580 passt
Dec 29, 2023 pm 05:34 PM
Welcher Treiber eignet sich für die Installation auf rx5808g? 20.5.1 und 20.4.2WHQL beziehen sich auf die Versionsnummer der Software oder des Treibers. Diese Versionsnummern werden normalerweise verwendet, um Updates oder Fixes für Software oder Treiber zu identifizieren. In der Computerwelt steht WHQL für Windows Hardware Quality Labs, eine Einrichtung, die von Microsoft genutzt wird, um die Konformität und Stabilität von Hardware und Treibern zu testen und zu verifizieren. Daher geben 20.5.1 und 20.4.2WHQL an, dass diese Software oder Treiber die Tests und Verifizierungen von Microsoft bestanden haben und sicher im Windows-Betriebssystem verwendet werden können. AMDrx580-Grafikkarte relativ stabile Treiber 20.5.1 und 20.4.2WHQL bezieht sich auf die Versionsnummer der Software oder des Treibers. Diese Versionsnummern werden übergeben
Welche Funktion hat Cortana?
Jan 15, 2024 pm 10:15 PM
Bei der Verwendung des von Microsoft entwickelten Betriebssystems Windows 10 sind viele Benutzer neugierig und verwirrt über die neue Technologie namens Cortana. Cortanas offizieller Name im chinesischen Kontext ist „Cortana“, was eigentlich eine integrierte Funktion von Windows ist 10-System. Häufig gestellte Fragen und Lösungen zum Einschalten von Cortana. Lösungsschritte zum Einfügen des Suchfelds in Cortana. Welche Software ist Cortana? Antwort: „Cortana“ ist ein persönlicher intelligenter Assistent der Cloud-Plattform, der sorgfältig von Microsoft entwickelt wurde. Er verfügt über zwei Nutzungsmodi: Anmeldung und Nicht-Anmeldung. Wenn Sie angemeldet sind
Was ist Calloc in der C-Sprache?
Sep 10, 2023 pm 07:45 PM
Die Speicherzuweisungsfunktion der C-Bibliothek void*calloc(size_tnitems,size_tsize) weist den angeforderten Speicher zu und gibt einen Zeiger darauf zurück. Der Unterschied zwischen malloc und calloc besteht darin, dass malloc den Speicher nicht auf Null setzt, während calloc den zugewiesenen Speicher auf Null setzt. Speicherzuweisungsfunktion Speicher kann wie unten erwähnt auf zwei Arten zugewiesen werden: Sobald Speicher zur Kompilierungszeit zugewiesen wurde, kann er während der Ausführung nicht mehr geändert werden. Es kann zu Problemen mit unzureichendem oder verschwendetem Speicher kommen. Die Lösung besteht darin, Speicher dynamisch zu erstellen, dh Speicher gemäß den Anforderungen des Benutzers während der Ausführung des Programms zu erstellen. Die Standardbibliotheksfunktionen für die dynamische Speicherverwaltung lauten wie folgt: -malloc()calloc()realloc()free
