Où le modèle de vue doit-il être placé dans le projet ?

Les modèles de Vue varient en fonction des besoins réels des développeurs et des outils utilisés. Généralement, ils peuvent être placés aux endroits suivants :

1. modèle au sein du composant Vue

Les composants Vue peuvent définir leurs propres modèles dans le modèle, qui Vue est-elle une fonction principale. Dans la balise de script du composant, utilisez template pour définir le modèle et lier le modèle au composant à utiliser. Par exemple :

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'Vue Template',
        content: 'This is a Vue template example'
      }
    }
  }
</script>

2. Composant à fichier unique

À mesure que les composants Vue deviennent de plus en plus complexes, il est plus pratique d'utiliser des composants multi-fichiers, ce qui nécessite l'utilisation de composants à fichier unique. La principale caractéristique des composants à fichier unique est que les modèles, les styles et la logique sont tous encapsulés dans un fichier .vue. Par exemple :

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'Vue Template',
        content: 'This is a Vue template example'
      }
    }
  }
</script>

3. Modèles intégrés

Parfois, vous souhaiterez peut-être utiliser des modèles Vue génériques au lieu d'en écrire un complètement nouveau. Dans ce cas, vous pouvez choisir d’utiliser des modèles intégrés pour y parvenir. Les modèles intégrés peuvent être écrits comme ceci :

<template id="my-template">
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'Vue Template',
        content: 'This is a Vue template example'
      }
    },
    template: document.getElementById('my-template')
  }
</script>

4. Modèles publics pour Vue CLI

Vue CLI peut vous fournir des modèles publics prédéfinis afin que vous puissiez démarrer rapidement votre projet Vue. Les modèles publics incluent : webpack, webpack-simple, Browserify, Browserify-simple, simple, etc. Ces modèles peuvent être téléchargés et utilisés via la documentation officielle.

Résumé

Ce qui précède est l'emplacement de stockage principal et la forme des modèles Vue. Les modèles peuvent être facilement définis, que ce soit dans un composant Vue ou dans un composant mono-fichier. Bien entendu, vous pouvez également choisir des modèles publics pour développer votre propre application Vue et démarrer rapidement le projet de développement.

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!