Composants de fichier unique Vue.js

Découvrez comment Vue vous aide à créer un fichier unique qui est responsable de tout ce qui concerne un seul composant, en centralisant la responsabilité de l'apparence et du comportement

Un composant Vue peut être déclaré dans un fichier JavaScript (.js) comme ça:

Vue.component('component-name', {
  /* options */
})

ou aussi:

new Vue({
  /* options */
})

ou il peut être spécifié dans un.vuedéposer.

Le.vuele fichier est plutôt cool car il vous permet de définir

  • Logique JavaScript
  • Modèle de code HTML
  • Style CSS

le tout dans un seul fichier, et en tant que tel, il porte le nom deComposant de fichier unique.

Voici un exemple:

<template>
  <p>{{ hello }}</p>
</template>

<script> export default { data() { return { hello: ‘Hello World!’ } } } </script>

<style scoped> p { color: blue; } </style>

Tout cela est possible grâce à l'utilisation de webpack. La CLI Vue rend cela très facile et pris en charge dès la sortie de la boîte..vueLes fichiers ne peuvent pas être utilisés sans une configuration Webpack, et en tant que tels, ils ne sont pas très adaptés aux applications qui utilisent simplement Vue sur une page sans être une application à page unique (SPA) à part entière.

Étant donné que les composants à fichier unique reposent sur Webpack, nous avons la possibilité d'utiliser gratuitement des fonctionnalités Web modernes.

Votre CSS peut être défini à l'aide de SCSS ou Stylus, le modèle peut être construit à l'aide de Pug, et tout ce que vous avez à faire pour y parvenir est de déclarer à Vue le préprocesseur de langage que vous allez utiliser.

La liste des préprocesseurs pris en charge comprend

Nous pouvons utiliser du JavaScript moderne (ES6-7-8) quel que soit le navigateur cible, en utilisant l'intégration Babel, et des modules ES également, afin que nous puissions utiliserimport/exportdéclarations.

Nous pouvons utiliser des modules CSS pour définir notre CSS.

En parlant de portée du CSS, les composants à fichier unique facilitent absolument l'écriture de CSS qui ne le fera pasfuirà d'autres composants, en utilisant<style scoped>Mots clés.

Si vous omettezscoped, le CSS que vous définissez sera global. Mais en ajoutant cela, Vue ajoute automatiquement une classe spécifique au composant, unique à votre application, de sorte que le CSS est garanti de ne pas s'échapper vers d'autres composants.

Peut-être que votre JavaScript est énorme à cause d'une logique dont vous devez prendre soin. Que faire si vous souhaitez utiliser un fichier séparé pour votre JavaScript?

Vous pouvez utiliser lesrcattribut pour l'externaliser:

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>

Cela fonctionne également pour votre CSS:

<template>
  <p>{{ hello }}</p>
</template>
<script src="./hello.js"></script>
<style src="./hello.css"></style>

Remarquez comment j'ai utilisé

export default {
  data() {
    return {
      hello: 'Hello World!'
    }
  }
}

dans le JavaScript du composant pour configurer les données.

D'autres façons courantes que vous verrez sont

export default {
  data: function() {
    return {
      name: 'Flavio'
    }
  }
}

(ce qui précède est équivalent à ce que nous faisions auparavant)

ou:

export default {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

ceci est différent car il utilise une fonction de flèche. Les fonctions fléchées conviennent jusqu'à ce que nous ayons besoin d'accéder à une méthode de composant, car nous devons utiliserthiset une telle propriété n'est pas liée au composant à l'aide des fonctions fléchées. Il est donc obligatoire d'utiliserordinairefonctions plutôt que des fonctions fléchées.

Vous pourriez aussi voir

module.exports = {
  data: () => {
    return {
      name: 'Flavio'
    }
  }
}

cela utilise la syntaxe CommonJS et fonctionne également, bien qu'il soit recommandé d'utiliser la syntaxe ES Modules, car il s'agit d'un standard JavaScript.

Téléchargez mon gratuitManuel de Vue


Plus de tutoriels vue: