Maison > interface Web > Voir.js > De quoi consiste chaque composant de fichier dans vue ?

De quoi consiste chaque composant de fichier dans vue ?

下次还敢
Libérer: 2024-04-28 00:09:16
original
1158 Les gens l'ont consulté

Le composant monofichier Vue se compose de trois parties : Modèle : définit la représentation visuelle, en utilisant la syntaxe HTML. Script : définissez un comportement logique à l'aide de la syntaxe JavaScript. Style : définissez des styles à l’aide de la syntaxe CSS.

De quoi consiste chaque composant de fichier dans vue ?

La composition du composant à fichier unique Vue

Le composant à fichier unique Vue se compose de trois parties :

1. Modèle (modèle)

La partie modèle définit la représentation visuelle du composant. Il est écrit en utilisant la syntaxe HTML et peut restituer dynamiquement les données à l'aide des directives Vue et de l'interpolation.

2. Script

La partie script définit le comportement logique du composant. Il est écrit en JavaScript et contient les données, les méthodes et les hooks de cycle de vie du composant.

3. Style

La partie style définit le style du composant. Il peut être écrit en utilisant la syntaxe CSS et peut contenir des sélecteurs de classe, des sélecteurs d'ID et des requêtes multimédias.

Exemple :

<code class="html"><template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello Vue',
      message: 'Welcome to the Vue world!'
    }
  }
}
</script>

<style>
h1 {
  color: blue;
}
p {
  color: red;
}
</style></code>
Copier après la connexion

Dans cet exemple :

  • La section modèle définit un conteneur div avec un titre et un message. La section
  • script définit le titre et les données du message du composant. La section
  • styles définit les attributs de style des éléments h1 et p.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal