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

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

[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

[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

[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

[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

[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

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

[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

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>

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

[Les composants à fichier unique doivent toujours avoir l'ordre des balises 3f1c4e4b6b16bbbd69b2ee476dc4f83a, d477f9ce7bf77f53fbcf36bec1b69b7a Soyez cohérent] (Recommandé)

//good
<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

[Un seul composant dans un fichier] (Fortement recommandé)

//bad
Vue.component('TodoList', {})
Vue.component('TodoItem', {})
//good
components/
|- TodoList.vue
|- TodoItem.vue

[Ordre par défaut des options des composants] (Recommandé)

1. Effets secondaires (déclenchement d'effets en dehors du composant)

el

2. Conscience globale (nécessitant des connaissances en dehors du composant)

name
parent

3. du composant)

functional

4. Modificateur de modèle (changer la façon dont le modèle est compilé)

delimiters
comments

5. Dépendances du modèle (ressources utilisées dans le modèle)

components
directives
filters

6. Combinaison (fusionner les attributs en options)

extends
mixins

7. Interface (interface du composant)

inheritAttrs
model
props/propsData

8. État local (attributs réactifs locaux)

data
computed

9. Événements (rappels déclenchés par des événements réactifs)

watch
生命周期钩子 (按照它们被调用的顺序)

10. Attributs non réactifs (attributs d'instance qui ne dépendent pas du système réactif)

.

methods

11. Rendu (description déclarative de la sortie du composant)

template/render
renderError

prop

[La définition de la prop doit être aussi détaillée que possible] (nécessaire)

Le détail La définition de prop présente deux avantages : 1. Ils décrivent l'API du composant, il est donc facile de comprendre l'utilisation du composant ; 2. Dans l'environnement de développement, si un accessoire mal formaté est fourni à un composant, Vue vous alertera ; pour vous aider à l'attraper. Sources potentielles d'erreurs

//bad
props: ['status']
//good
props: {
 status: String
}
//better
props: {
 status: {
  type: String,
  required: true
 }
}

[Lors de la déclaration des accessoires, leur nom doit toujours utiliser camelCase, et dans les modèles et JSX, vous devez toujours utiliser kebab-case] (Fortement recommandé)

//bad
props: {'greeting-text': String}
<WelcomeMessage greetingText="hi"/>
//good
props: {greetingText: String}
<WelcomeMessage greeting-text="hi"/>

Commandes et fonctionnalités

[Toujours utiliser la clé avec v-for] (obligatoire)

//bad
 <li v-for="todo in todos">
//good
 <li v-for="todo in todos":key="todo.id">

[Ne pas utiliser v-if et v-for sur le même élément en même temps] (Obligatoire)

//bad
<li v-for="user in users" v-if="user.isActive" :key="user.id" > {{ user.name }} <li>
//good
<li v-for="user in users" v-if="shouldShowUsers" :key="user.id" > {{ user.name }} <li>

[Les éléments avec plusieurs attributs doivent être écrits sur plusieurs lignes, une ligne pour chaque attribut] (Fortement recommandé)

//bad
<img src="https://vuejs.org/images/logo.png">
//good
<img
 src="https://vuejs.org/images/logo.png"
 
>

[Ordre par défaut des attributs des éléments] (Recommandé)

1. Définition (fournir des options pour les composants)

is

2. Rendu de liste (créer plusieurs variantes du même élément)

v-for

3. Conditions de rendu (si l'élément est rendu/affiché)

v-if
v-else-if
v-else
v-show
v-cloak

4. Méthode de rendu (modification de la méthode de rendu de l'élément)

5. Conscience globale (nécessite des connaissances au-delà des composants)

v-pre
v-once

6. Caractéristiques uniques (caractéristiques qui nécessitent des valeurs uniques)

id

7. événements)

ref
key
slot

8. Autres fonctionnalités (toutes les fonctionnalités liées ou non liées)

v-model

9. Événements (écouteurs d'événements de composants)

10. copier le contenu de l'élément )

v-on

Attribut

v-html
v-text

[Nom de l'attribut privé] (obligatoire)

Utilisez toujours le préfixe $_ pour les attributs privés personnalisés dans des extensions telles que comme plug-ins et mixins. Et est livré avec un espace de noms pour éviter les conflits avec d'autres auteurs (comme $_yourPluginName_)

[Les données du composant doivent être une fonction] (obligatoire)

//bad
 methods: {update: function () { }}
//bad
 methods: {_update: function () { } }
//bad
 methods: {$update: function () { }}
//bad
 methods: {$_update: function () { }}
//good
 methods: { $_myGreatMixin_update: function () { }}

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数

//bad
Vue.component('some-comp', {
 data: {
  foo: 'bar'
 }
})
//good
Vue.component('some-comp', {
 data: function () {
  return {
   foo: 'bar'
  }
 }
})

【组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法】（强烈推荐）

//bad
{{
 fullName.split(' ').map(function (word) {
  return word[0].toUpperCase() + word.slice(1)
 }).join(' ')
}}
//good
computed: {
 normalizedFullName: function () {
  return this.fullName.split(' ').map(function (word) {
   return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
 }
}

【应该把复杂计算属性分割为尽可能多的更简单的属性】（强烈推荐）

//bad
computed: {
 price: function () {
  var basePrice = this.manufactureCost / (1 - this.profitMargin)
  return (
   basePrice -
   basePrice * (this.discountPercent || 0)
  )
 }
}
//good
computed: {
 basePrice: function () {
  return this.manufactureCost / (1 - this.profitMargin)
 },
 discount: function () {
  return this.basePrice * (this.discountPercent || 0)
 },
 finalPrice: function () {
  return this.basePrice - this.discount
 }
}

【当组件开始觉得密集或难以阅读时，在多个属性之间添加空行可以让其变得容易】（推荐）

//good
props: {
 value: {
  type: String,
  required: true
 },

 focused: {
  type: Boolean,
  default: false
 }
}

谨慎使用

1、元素选择器应该避免在 scoped 中出现

在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的

//bad
<style scoped>
button {
 background-color: red;
}
</style>
//good
<style scoped>
.btn-close {
 background-color: red;
}
</style>

2、应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop

3、应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线

4、如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 e388a4556c0f65e1904146cc1a846bee 元素)

//bad
<p v-if="error">
 错误：{{ error }}
</p>
<p v-else>
 {{ results }}
</p>
//good
<p
 v-if="error"
 key="search-status"
>
 错误：{{ error }}
</p>
<p 
 v-else 
 key="search-results"
>
 {{ results }}
</p>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JavaScript的6种正则表达式（详细教程）

react webpack打包后的文件（详细教程）

在微信小程序中如何实现圆形进度条

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!