Comment implémenter le style simplifié dans Vue (tutoriel détaillé)-js tutoriel-php.cn

Cet article explique les points de connaissance pertinents du style simplifié de Vue et partage un exemple de code. Les amis intéressés peuvent s'y référer.

Comme mentionné précédemment

Le guide de style sur le site officiel de Vue est classé par priorité (par ordre de nécessaire, fortement recommandé, recommandé et utilisé avec prudence), et les intervalles de code sont vaste et difficile à interroger. Cet article est classé par type et réduit quelques exemples ou explications. Il s'agit d'une version simplifiée du guide de style Vue

Nom du composant

[Le nom du composant est composé de plusieurs mots] (obligatoire)

Les noms de composants doivent toujours contenir plusieurs mots, à l'exception du composant racine App. Cela évite les conflits avec les éléments HTML existants et futurs, puisque tous les noms d'éléments HTML sont constitués d'un seul mot

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

Copier après la connexion

[Les noms de fichiers de composants de fichiers uniques doivent toujours commencer par une lettre majuscule ( PascalCase) ou toujours connectés avec une ligne horizontale (kebab-case)] (fortement recommandé)

//bad
mycomponent.vue
//good
MyComponent.vue
//good
my-component.vue

Copier après la connexion

[Le nom du composant de base doit commencer par un préfixe spécifique] (fortement recommandé)

Composants de base spécifiques à l'application de les styles et les conventions (c'est-à-dire les composants de présentation, non logiques ou sans état) doivent tous commencer par un préfixe spécifique, tel que Base, App ou V

//bad
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
//good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

Copier après la connexion

[ne devraient avoir des composants que pour une seule instance active doivent être nommés avec le préfixe The pour indiquer leur caractère unique] (fortement recommandé)

Cela ne signifie pas que le composant ne peut être utilisé que sur une seule page, mais chaque pageUniquement utilisés une fois, ces composants n'accepteront jamais aucun accessoire

//bad
components/
|- Heading.vue
|- MySidebar.vue
//good
components/
|- TheHeading.vue
|- TheSidebar.vue

Copier après la connexion

[Les sous-composants étroitement couplés au composant parent doivent être nommés avec le nom du composant parent comme préfixe] (fortement recommandé)

//bad
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
//good
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

Copier après la connexion

[Le nom du composant doit commencer par un mot de haut niveau (généralement descriptif) et se terminer par un modificateur descriptif] (fortement recommandé)

//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

Copier après la connexion

[Composants et chaînes à fichier unique Noms des composants dans les modèles devrait toujours être PascalCase - mais toujours kebab-case dans les modèles DOM] (fortement recommandé)

//bad
<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>
<myComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>
//good
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

Copier après la connexion

[Les noms des composants doivent avoir tendance à être des mots complets plutôt que des abréviations] (fortement recommandé)

//bad
components/
|- SdSettings.vue
|- UProfOpts.vue
//good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

Copier après la connexion

Liés aux composants

[Les composants de fichier unique, les modèles de chaînes et les composants sans contenu dans JSX doivent se fermer automatiquement - mais ne le faites pas dans les modèles DOM] (fortement recommandé)

Les composants à fermeture automatique signifient non seulement qu'ils n'ont pas de contenu, mais qu'ils n'en ont délibérément aucun

//bad
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM 模板中 -->
<my-component/>
//good
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

Copier après la connexion

[Définir la portée des styles de composants] (obligatoire)

Cette règle ne fonctionne qu'avec Associé à composants de fichier unique. Il n'est pas nécessaire d' utiliser la fonctionnalité scoped. La portée peut également être effectuée via des modules CSS ou en utilisant d'autres bibliothèques ou conventions

//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>

Copier après la connexion

[Les composants à fichier unique doivent toujours avoir l'ordre des balises

Derniers articles par auteur