Maison > interface Web > js tutoriel > Quelles sont les spécifications pour le développement front-end de Vue ?

Quelles sont les spécifications pour le développement front-end de Vue ?

php中世界最好的语言
Libérer: 2018-06-02 11:26:12
original
2156 Les gens l'ont consulté

Cette fois, je vais vous expliquer quelles sont les spécifications pour le développement front-end de Vue, et quelles sont les précautions pour les spécifications de développement front-end de Vue. Voici des cas pratiques, jetons un coup d'œil.

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',
 // ...
}
Copier après la connexion

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'
 }
})
Copier après la connexion

Contre-exemple :

export default {
 data: {
 foo: 'bar'
 }
}
Copier après la connexion

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
 }
 }
}
Copier après la connexion

Contre-exemple :

// 这样做只有开发原型系统时可以接受
props: ['status']
Copier après la connexion

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>
Copier après la connexion

Contre-exemple :

<ul>
 <li v-for="todo in todos">
 {{ todo.text }}
 </li>
</ul>
Copier après la connexion

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>
Copier après la connexion

Contre-exemple :

<ul>
 <li
 v-for="user in users"
 v-if="shouldShowUsers"
 :key="user.id"
 >
 {{ user.name }}
 </li>
</ul>
Copier après la connexion

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>
Copier après la connexion
.

2. Fortement recommandé (pour améliorer la lisibilité)
<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>
Copier après la connexion

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 :

2. Le cas des fichiers de composants mono-fichiers
components/
|- TodoList.vue
|- TodoItem.vue
Copier après la connexion

Fichiers de composants mono-fichiers Le nom doit soit toujours commencer par une majuscule (PascalCase)

V
ue.component('TodoList', {
 // ...
})
Vue.component('TodoItem', {
 // ...
})
Copier après la connexion
Exemple positif :

Exemple négatif :

3. Nom du composant de base
components/
|- MyComponent.vue
Copier après la connexion

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
Copier après la connexion

Contre-exemple :

4. name

Les composants qui ne doivent avoir qu'une seule instance active doivent être nommés avec le préfixe pour montrer qu'ils sont uniques. Sexe
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
Copier après la connexion
.

这不意味着组件只可用于一个单页面,而是每个页面只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的,而不是它们在你的应用中的上下文。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是目前在每个页面里只使用一次。

正例:

components/
|- TheHeading.vue
|- TheSidebar.vue
Copier après la connexion

反例:

components/
|- Heading.vue
|- MySidebar.vue
Copier après la connexion

5. 紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

如果一个组件只在某个父组件的场景下有意义,这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起。

正例:

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
Copier après la connexion

反例:

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue
Copier après la connexion

6. 组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。

正例:

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
Copier après la connexion

反例:

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
Copier après la connexion

7. 模板中的组件名大小写

总是 PascalCase 的

正例:

<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
Copier après la connexion

反例:

<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<!-- 在单文件组件和字符串模板中 -->
<myComponent/>
Copier après la connexion

8. 完整单词的组件名

组件名应该倾向于完整单词而不是缩写。

正例:

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
Copier après la connexion

反例:

components/
|- SdSettings.vue
|- UProfOpts.vue
Copier après la connexion

9. 多个特性的元素

多个特性的元素应该分多行撰写,每个特性一行。

正例:

<img
 src="https://vuejs.org/images/logo.png"
 alt="Vue Logo"
>
<MyComponent
 foo="a"
 bar="b"
 baz="c"
/>
Copier après la connexion

反例:

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>
Copier après la connexion

10. 模板中简单的表达式

组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法。
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么,而非如何计算那个值。而且计算属性和方法使得代码可以重用。

正例:

<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
 normalizedFullName: function () {
 return this.fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
 }
}
Copier après la connexion

反例:

{{
 fullName.split(' ').map(function (word) {
 return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}
Copier après la connexion

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
 }
}
Copier après la connexion

反例:

computed: {
 price: function () {
 var basePrice = this.manufactureCost / (1 - this.profitMargin)
 return (
 basePrice -
 basePrice * (this.discountPercent || 0)
 )
 }
}
Copier après la connexion

12. 带引号的特性值

非空 HTML 特性值应该始终带引号 (单引号或双引号,选你 JS 里不用的那个)。
在 HTML 中不带空格的特性值是可以没有引号的,但这样做常常导致带空格的特征值被回避,导致其可读性变差。

正例:

<AppSidebar :style="{ width: sidebarWidth + &#39;px&#39; }">
Copier après la connexion

反例:

<AppSidebar :style={width:sidebarWidth+&#39;px&#39;}>
Copier après la connexion

13. 指令缩写

都用指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:)

正例:

<input
 @input="onInput"
 @focus="onFocus"
>
Copier après la connexion

反例:

<input
 v-bind:value="newTodoText"
 :placeholder="newTodoInstructions"
>
Copier après la connexion

三、推荐

1. 单文件组件的顶级元素的顺序

单文件组件应该总是让

Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal