interface Web
js tutoriel
À quoi devez-vous faire attention dans le développement front-end de Vue ?
À quoi devez-vous faire attention dans le développement front-end de Vue ?
Cette fois, je vais vous apporter ce à quoi vous devez faire attention lors du développement front-end de Vue. Quelles sont les précautions pour Vue dans le développement front-end. Voici des cas pratiques, prenons un. regarder.
Basé sur le guide de style officiel de Vue
1 Obligatoire
1.
Les noms des composants doivent toujours contenir plusieurs mots, à l'exception du composant racine App.
Exemple positif :
export default {
name: 'TodoItem',
// ...
}
反例：
export default {
name: 'Todo',
// ...
}2. Données du composant
Les données du composant doivent être une fonction.
Lors de l'utilisation de l'attribut data dans un composant (n'importe où sauf dans New Vue), sa valeur doit être une fonction qui renvoie un objet.
Exemple positif :
// In a .vue file
export default {
data () {
return {
foo: 'bar'
}
}
}
// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
data: {
foo: 'bar'
}
})Contre-exemple :
export default {
data: {
foo: 'bar'
}
}3. Définition de l'accessoire
La définition de l'accessoire doit être aussi détaillée que possible.
Dans le code que vous soumettez, la définition de prop doit être aussi détaillée que possible, en précisant au moins son type.
Exemple positif :
props: {
status: String
}
// 更好的做法！
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}Contre-exemple :
// 这样做只有开发原型系统时可以接受 props: ['status']
4. Définir la valeur de la clé pour v-for
Toujours utiliser la clé avec v -pour.
La clé doit toujours être utilisée avec v-for sur un composant afin de maintenir l'état du composant interne et de ses sous-arbres. Même le maintien d'un comportement prévisible sur les éléments, comme la constance des objets dans les animations, est une bonne pratique.
Exemple positif :
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>Contre-exemple :
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>5. Évitez d'utiliser v-if et v-for ensemble
Ne jamais utiliser v. -if et v-for sur le même élément en même temps.
Généralement, nous avons tendance à le faire dans deux situations courantes :
Pour filtrer les éléments d'une liste (comme v-for="user in users" v-if="user.isActive"). Dans ce cas, remplacez les utilisateurs par une propriété calculée (telle que activeUsers) qui renvoie la liste filtrée.
Pour éviter de rendre des listes qui devraient être masquées (comme v-for="user in users" v-if="shouldShowUsers"). Dans ce cas, veuillez déplacer le v-if vers l'élément conteneur (comme ul, ol).
Exemple positif :
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>Contre-exemple :
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>6. Définir la portée du style de composant
Pour les applications, les composants d'application de niveau supérieur et les styles de composants de mise en page. peut être global, mais tous les autres composants doivent avoir une portée.
Cette règle s'applique uniquement aux composants à fichier unique. Vous n'êtes pas obligé d'utiliser l'attribut scoped pour définir les portées des modules. stratégie similaire à BEM. Bien sûr, vous pouvez également utiliser d'autres bibliothèques ou conventions
Dans tous les cas, pour les bibliothèques de composants, nous devrions préférer utiliser des stratégies basées sur les classes plutôt que des fonctionnalités étendues. >Cela facilite le remplacement des styles internes : en utilisant des noms de classe lisibles par l'homme sans priorité de sélecteur élevée, et moins susceptible de provoquer des conflits :
Contre-exemple :<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>1 . Fichiers de composants Tant qu'il existe un système de construction capable de fusionner des fichiers, séparez chaque composant dans des fichiers séparés.
Lorsque vous devez modifier un composant ou vérifier l'utilisation d'un composant, vous pouvez le trouver plus rapidement Exemple positif :
Contre-exemple :
components/ |- TodoList.vue |- TodoItem.vue
Fichiers de composants mono-fichiers Le nom doit soit toujours commencer par une majuscule (PascalCase)
V
ue.component('TodoList', {
// ...
})
Vue.component('TodoItem', {
// ...
})Exemple négatif :
3. Nom du composant de basecomponents/ |- MyComponent.vue
Composants de base (c'est-à-dire composants de présentation, non logiques ou sans état) qui appliquent des styles et des conventions spécifiques doivent tous commencer par un préfixe spécifique, tel que Base, App ou V. Exemple positif :
components/ |- myComponent.vue |- mycomponent.vue
Contre-exemple :
4. nameLes composants qui ne doivent avoir qu'une seule instance active doivent être nommés avec le préfixe pour montrer qu'ils sont de sexe uniquecomponents/ |- 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. 单文件组件的顶级元素的顺序
单文件组件应该总是让
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment configurer la fonction de démarrage du clavier sur une carte mère GIGABYTE (activer le mode de démarrage du clavier sur la carte mère GIGABYTE)
Dec 31, 2023 pm 05:15 PM
Comment configurer le démarrage du clavier sur la carte mère de Gigabyte Tout d'abord, s'il doit prendre en charge le démarrage du clavier, il doit s'agir d'un clavier PS2 ! ! Les étapes de configuration sont les suivantes : Étape 1 : appuyez sur Suppr ou F2 pour entrer dans le BIOS après le démarrage, et entrez dans le mode avancé (avancé) du BIOS. Les cartes mères ordinaires entrent dans le mode EZ (facile) de la carte mère par défaut. pour appuyer sur F7 pour passer au mode avancé. Les cartes mères de la série ROG entrent dans le BIOS par défaut (nous utilisons le chinois simplifié pour démontrer) Étape 2 : Sélectionnez - [Avancé] - [Gestion avancée de l'alimentation (APM)] Étape 3 : Recherchez l'option [Réveil par le clavier PS2] Étape 4 : Cette option est désactivée par défaut. Après avoir tiré vers le bas, vous pouvez voir trois options de configuration différentes, à savoir appuyer sur [barre d'espace] pour allumer l'ordinateur, appuyer sur groupe.
Quelle est la meilleure carte graphique pour i7 3770 ?
Dec 29, 2023 am 09:12 AM
Quelle carte graphique est bonne pour le Core i73770 ? La RTX3070 est une carte graphique très puissante avec d'excellentes performances et une technologie avancée. Que vous jouiez à des jeux, rendiez des graphiques ou effectuiez du machine learning, le RTX3070 peut le gérer facilement. Il utilise l'architecture Ampere de NVIDIA, dispose de 5888 cœurs CUDA et de 8 Go de mémoire GDDR6, ce qui peut offrir une expérience de jeu fluide et des effets graphiques de haute qualité. Le RTX3070 prend également en charge la technologie de lancer de rayons, qui peut présenter des effets de lumière et d'ombre réalistes. Dans l’ensemble, la RTX3070 est une carte graphique puissante et avancée adaptée à ceux qui recherchent des performances et une qualité élevées. RTX3070 est une carte graphique de la série NVIDIA. Utilisation de NVIDIA de 2e génération
Choisir la bonne tablette pour les étudiants en musique
Jan 10, 2024 pm 10:09 PM
Quelle tablette convient aux musiciens ? Le haut-parleur de 12,9 pouces de l’iPad de Huawei est un très bon produit. Il est livré avec quatre haut-parleurs et le son est excellent. De plus, il appartient à la série pro, qui est légèrement meilleure que les autres styles. Dans l’ensemble, l’iPad Pro est un très bon produit. Le haut-parleur de ce téléphone mobile mini4 est petit et l'effet est moyen. Il ne peut pas être utilisé pour écouter de la musique en externe, vous devez quand même compter sur des écouteurs pour profiter de la musique. Des écouteurs avec une bonne qualité sonore auront un effet légèrement meilleur, mais des écouteurs bon marché d'une valeur de trente ou quarante yuans ne peuvent pas répondre aux exigences. Quelle tablette dois-je utiliser pour écouter de la musique de piano électronique ? Si vous souhaitez acheter un iPad de plus de 10 pouces, je vous recommande d'utiliser deux applications, à savoir Henle et Piascore. Fourni par Henle
Explication détaillée du rôle des fichiers .ibd dans MySQL et précautions associées
Mar 15, 2024 am 08:00 AM
Explication détaillée du rôle des fichiers .ibd dans MySQL et précautions associées MySQL est un système de gestion de base de données relationnelle populaire, et les données de la base de données sont stockées dans différents fichiers. Parmi eux, le fichier .ibd est un fichier de données du moteur de stockage InnoDB, utilisé pour stocker des données et des index dans des tables. Cet article fournira une analyse détaillée du rôle du fichier .ibd dans MySQL et fournira des exemples de code pertinents pour aider les lecteurs à mieux comprendre. 1. Le rôle des fichiers .ibd : stockage des données : les fichiers .ibd sont du stockage InnoDB
Choisissez la version du pilote qui convient à votre RX580
Dec 29, 2023 pm 05:34 PM
Quel pilote est bon à installer sur le rx5808g ? 20.5.1 et 20.4.2WHQL font référence au numéro de version du logiciel ou du pilote. Ces numéros de version sont généralement utilisés pour identifier les mises à jour ou les correctifs des logiciels ou des pilotes. Dans le monde informatique, WHQL signifie Windows Hardware Quality Labs, qui est une institution utilisée par Microsoft pour tester et vérifier la conformité et la stabilité du matériel et des pilotes. Par conséquent, 20.5.1 et 20.4.2WHQL indiquent que ces logiciels ou pilotes ont réussi les tests et la vérification de Microsoft et peuvent être utilisés en toute sécurité dans le système d'exploitation Windows. Les pilotes relativement stables de la carte graphique AMDrx580 20.5.1 et 20.4.2WHQL font référence au numéro de version du logiciel ou du pilote. Ces numéros de version sont transmis
Quelle est la fonction de Cortana ?
Jan 15, 2024 pm 10:15 PM
Lors de l'utilisation du système d'exploitation Windows 10 développé par Microsoft, de nombreux utilisateurs sont curieux et confus au sujet de la nouvelle technologie appelée Cortana. Le nom officiel de Cortana dans le contexte chinois est « Cortana », qui est en fait une fonction intégrée de Windows. 10. Cortana, un programme de service d'intelligence artificielle (AIassistant). Questions et solutions fréquemment posées. Comment ouvrir Cortana et ne pas répondre. La solution chinoise n'est pas prise en charge. Comment mettre le champ de recherche dans Cortana. ? Réponse : « Cortana » Il s'agit d'un assistant personnel intelligent de plate-forme cloud soigneusement construit par Microsoft. Il dispose de deux modes d'utilisation : connexion et non-connexion. Lorsque vous êtes connecté
Quels jeux conviennent pour jouer avec des graphiques indépendants i34150 et 1G (quels jeux conviennent pour i34150)
Jan 05, 2024 pm 08:24 PM
À quels jeux peut-on jouer avec le i34150 avec des graphiques indépendants 1G ? Peut-il jouer à de petits jeux tels que LoL ? GTX750 et GTX750TI sont des choix de cartes graphiques très adaptés. Si vous jouez simplement à quelques petits jeux ou ne jouez pas à des jeux, il est recommandé d'utiliser la carte graphique intégrée i34150. D’une manière générale, la différence de prix entre les cartes graphiques et les processeurs n’est pas très grande, il est donc important de choisir une combinaison raisonnable. Si vous avez besoin de 2 Go de mémoire vidéo, il est recommandé de choisir GTX750TI ; si vous n'avez besoin que de 1 Go de mémoire vidéo, choisissez simplement GTX750. La GTX750TI peut être considérée comme une version améliorée de la GTX750, avec des capacités d'overclocking. La carte graphique pouvant être associée au i34150 dépend de vos besoins. Si vous envisagez de jouer à des jeux autonomes, il est recommandé d'envisager de changer de carte graphique. tu peux choisir
Qu'est-ce que Calloc en langage C ?
Sep 10, 2023 pm 07:45 PM
La fonction d'allocation de mémoire de la bibliothèque C void*calloc(size_tnitems,size_tsize) alloue la mémoire demandée et renvoie un pointeur vers celle-ci. La différence entre malloc et calloc est que malloc ne met pas la mémoire à zéro, tandis que calloc définit la mémoire allouée à zéro. Fonction d'allocation de mémoire La mémoire peut être allouée de deux manières, comme mentionné ci-dessous : Une fois la mémoire allouée au moment de la compilation, elle ne peut pas être modifiée pendant l'exécution. Il y aura des problèmes de mémoire insuffisante ou gaspillée. La solution consiste à créer de la mémoire de manière dynamique, c'est-à-dire à créer de la mémoire en fonction des besoins de l'utilisateur lors de l'exécution du programme. Les fonctions standard de la bibliothèque pour la gestion dynamique de la mémoire sont les suivantes : -malloc()calloc()realloc()free
