Comment implémenter le style simplifié dans Vue (tutoriel détaillé)

<p>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.

<p>Comme mentionné précédemment

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

<p>Nom du composant

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

<p>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('todo', {})
//good
Vue.component('todo-item', {})

<p> [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

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

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

<p>[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é)

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

<p>[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

<p>[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

<p>[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>

<p>[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

<p>Liés aux composants

<p>[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é)

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

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

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

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

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

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

<🎜>: Dead Rails - Comment relever chaque défi

4 Il y a quelques semaines By DDD

Guide de l'atomfall: emplacements des articles, guides de quête et conseils

1 Il y a quelques mois By DDD

Afficher plus

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)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7681

15

Tutoriel Java

1639

14

Tutoriel CakePHP

1393

52

Tutoriel Laravel

1286

25

Tutoriel PHP

1229

29

Afficher plus

Related knowledge

Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Comment ajouter des fonctions aux boutons pour Vue Apr 08, 2025 am 08:51 AM

Vous pouvez ajouter une fonction au bouton VUE en liant le bouton dans le modèle HTML à une méthode. Définissez la logique de la fonction de méthode et d'écriture dans l'instance Vue.

Comment utiliser Watch in Vue Apr 07, 2025 pm 11:36 PM

L'option Watch dans Vue.js permet aux développeurs d'écouter des modifications de données spécifiques. Lorsque les données changent, regardez déclenche une fonction de rappel pour effectuer des vues de mise à jour ou d'autres tâches. Ses options de configuration incluent immédiatement, qui spécifie s'il faut exécuter un rappel immédiatement, et profond, ce qui spécifie s'il faut écouter récursivement les modifications des objets ou des tableaux.

Comment référencer le fichier JS avec Vue.js Apr 07, 2025 pm 11:27 PM

Il existe trois façons de se référer aux fichiers JS dans Vue.js: spécifiez directement le chemin à l'aide du & lt; script & gt; étiqueter;; importation dynamique à l'aide du crochet de cycle de vie monté (); et l'importation via la bibliothèque de gestion de l'État Vuex.

Que signifie le développement de plusieurs pages Vue? Apr 07, 2025 pm 11:57 PM

Le développement multi-pages VUE est un moyen de créer des applications à l'aide du cadre Vue.js, où l'application est divisée en pages distinctes: Maintenance du code: La division de l'application en plusieurs pages peut rendre le code plus facile à gérer et à maintenir. Modularité: chaque page peut être utilisée comme module séparé pour une réutilisation et un remplacement faciles. Routage simple: la navigation entre les pages peut être gérée par une configuration de routage simple. Optimisation du référencement: chaque page a sa propre URL, ce qui aide le référencement.

Comment revenir à la page précédente par Vue Apr 07, 2025 pm 11:30 PM

Vue.js dispose de quatre méthodes pour revenir à la page précédente: $ router.go (-1) $ router.back () utilise & lt; router-link to = & quot; / & quot; Composant Window.History.back (), et la sélection de la méthode dépend de la scène.

Comment utiliser Vue Traversal Apr 07, 2025 pm 11:48 PM

Il existe trois méthodes courantes pour que Vue.js traverse les tableaux et les objets: la directive V-FOR est utilisée pour traverser chaque élément et les modèles de rendu; La directive V-Bind peut être utilisée avec V-FOR pour définir dynamiquement les valeurs d'attribut pour chaque élément; et la méthode .map peut convertir les éléments du tableau en nouveaux tableaux.

Comment sauter à la div de Vue Apr 08, 2025 am 09:18 AM

Il existe deux façons de sauter des éléments div dans Vue: Utilisez le routeur Vue et ajoutez le composant routeur-link. Ajoutez l'écouteur de l'événement @Click et appelez ceci. $ Router.push () pour sauter.

See all articles