Vue utilise des méthodes externes

Avant-propos

Dans le développement de Vue.js, nous rencontrons généralement un problème : comment utiliser les méthodes externes. Cet article explique comment laisser Vue.js interagir avec des méthodes externes pour mieux développer et maintenir le code.

Connaissances préalables

Avant d'étudier cet article, vous devez connaître les connaissances suivantes :

• Connaissances de base et utilisation de Vue.js
• Connaissances de base et utilisation de JavaScript
• Introduction et utilisation de méthodes externes

1. Introduction Externe méthodes

L'introduction de méthodes externes dans Vue.js revient à introduire des méthodes externes dans JavaScript.

Supposons que nous ayons un fichier appelé utils.js situé dans le répertoire src/utils/ à la racine du projet. Il existe une méthode nommée add dans ce fichier, qui ajoute deux nombres et renvoie le résultat. Dans Vue.js, nous pouvons introduire cette méthode comme ceci :

import { add } from '@/utils/utils.js';

Dans le code ci-dessus, nous utilisons la syntaxe d'importation ES6 pour importer la méthode add dans le fichier utils.js. Le @ ici représente le répertoire src. Si le chemin de votre fichier utils.js est différent, vous devez le modifier en conséquence.

2. Utiliser des méthodes externes dans Vue.js

Après avoir introduit la méthode externe, nous pouvons l'appeler dans le composant Vue.js.

Voici un exemple. Nous avons un composant Vue.js appelé MyComponent qui affiche la somme de deux nombres et utilise la méthode add pour la calculer.

<template>
  <div>{{ sum }}</div>
</template>

<script>
  import { add } from '@/utils/utils.js';

  export default {
    data() {
      return {
        num1: 3,
        num2: 5,
      }
    },
    computed: {
      sum() {
        return add(this.num1, this.num2);
      }
    }
  }
</script>

Dans le code ci-dessus, nous avons importé la méthode add, puis l'avons utilisée dans l'attribut sum calculé pour obtenir la somme de num1 et num2 et l'afficher sur la page. Si la méthode add de utils.js renvoie une erreur, nous pouvons utiliser des instructions try-catch pour détecter les erreurs et les afficher.

3. Utilisation de bibliothèques externes dans les composants Vue.js

Dans le développement de Vue.js, nous devons généralement utiliser certaines bibliothèques JavaScript externes pour étendre les fonctionnalités de Vue.js. Si nous voulons utiliser ces bibliothèques dans les composants Vue.js, nous devons les introduire dans le composant.

Voici un exemple utilisant la bibliothèque moment.js. moment.js est une puissante bibliothèque de dates JavaScript que nous pouvons utiliser dans les composants pour formater et calculer les dates.

Tout d'abord, nous devons installer la bibliothèque moment.js à l'aide de NPM :

npm install moment --save

Ensuite, introduisez la bibliothèque moment.js dans le composant Vue.js :

import moment from 'moment';

Enfin, utilisez la bibliothèque moment.js dans le composant :

<template>
  <div>{{ formattedDate }}</div>
</template>

<script>
  import moment from 'moment';

  export default {
    data() {
      return {
        date: new Date(),
      }
    },
    computed: {
      formattedDate() {
        return moment(this.date).format('YYYY-MM-DD');
      }
    }
  }
</script>

Ci-dessus Dans le code, nous importons la bibliothèque moment.js et l'attribuons à la variable moment, puis utilisons la bibliothèque moment dans la propriété calculée formattedDate pour formater la date et l'afficher sur la page.

Conclusion

Dans le développement de Vue.js, l'introduction et l'utilisation de méthodes et de bibliothèques externes sont une situation très courante. Cet article explique comment introduire et utiliser des méthodes et bibliothèques externes dans Vue.js. N'oubliez pas que lorsque vous utilisez des méthodes et des bibliothèques externes dans les composants Vue.js, vous devez penser à les importer dans le composant. Si vous avez des questions ou des commentaires, veuillez les laisser dans la section commentaires.

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!