Démarrage rapide VUE3 : utilisez le plug-in Vue.js pour créer des composants contextuels

Vue.js est un framework JavaScript populaire qui fournit un moyen basé sur des composants pour créer des interfaces utilisateur. La dernière version 3 de Vue.js est non seulement optimisée en termes de performances, mais ajoute également de nouvelles fonctionnalités. Dans cet article, nous présenterons rapidement comment utiliser Vue.js 3 et les plugins pour créer des composants contextuels.

1. Créez une application Vue.js 3

Avant de commencer, vous devez installer Node.js et Vue CLI. Vous pouvez installer ces outils à l'aide de npm :

npm install -g @vue/cli

Ensuite, créez une nouvelle application Vue.js 3 à l'aide de Vue CLI :

vue create my-app
cd my-app
npm run serve

Cela créera une nouvelle application appelée "my-app" et démarrera le serveur de développement.

2. Installez le plug-in Vue.js

Pour créer le composant pop-up, nous utiliserons un plug-in appelé Vue.js Modal. Pour installer le plugin, exécutez la commande suivante :

npm install vue-js-modal

Ouvrez le fichier src/main.js et ajoutez le contenu suivant :

import Vue from 'vue'
import App from './App.vue'
import VModal from 'vue-js-modal'

Vue.config.productionTip = false

Vue.use(VModal)

new Vue({
  render: h => h(App),
}).$mount('#app')

Tout d'abord, nous avons importé les composants Vue et App. Ensuite, nous avons importé le plugin Vue.js Modal et exécuté Vue.use(VModal) pour l'utiliser comme extension de l'application Vue.js.

3. Créer un composant pop-up

Maintenant, nous pouvons commencer à créer notre propre composant pop-up. Dans ce cas, nous créerons un formulaire de connexion simple au cas où l'utilisateur tenterait d'effectuer une action nécessitant une connexion.

Tout d'abord, nous devons créer un nouveau composant Vue.js. Créez un nouveau fichier appelé LoginModal.vue et copiez-y le code suivant :

<template>
  <div id="login-modal">
    <h1>Login</h1>
    <form>
      <div>
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div>
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login() {
      // Your login logic goes here
      this.$emit('close')
    }
  }
}
</script>

Ce composant contient un formulaire dans lequel l'utilisateur peut saisir son nom d'utilisateur et son mot de passe. Lorsque le formulaire sera soumis, nous appellerons une méthode de connexion qui contiendra votre logique de connexion. Dans cet exemple, nous utilisons simplement une méthode d'espace réservé et y émettons un événement close pour fermer la fenêtre contextuelle.

Maintenant, nous allons utiliser ce composant LoginModal dans un autre composant pour créer une fenêtre contextuelle.

4. Utilisez le composant contextuel

pour ouvrir le fichier App.vue et ajoutez le contenu suivant n'importe où dans la balise du modèle :

<modal name="login-modal">
  <login-modal @close="$modal.hide('login-modal')"></login-modal>
</modal>
<button @click="$modal.show('login-modal')">Show Login Modal</button>

Ce code utilise les composants et les instructions fournis par le plug-in modal Vue.js. . Tout d’abord, nous définissons une fenêtre modale nommée à l’aide de la propriété Name. Cette fenêtre modale contient le composant LoginModal que nous venons de créer. Ensuite, un bouton est ajouté à la page et lorsque vous cliquez dessus, la fenêtre modale s'affiche.

Pour fermer la fenêtre modale, nous devons émettre un événement close dans le composant LoginModal. En utilisant la méthode $modal.hide('login-modal'), nous pouvons l'écouter dans le composant parent et fermer la fenêtre modale.

5. Conclusion

Dans cet article, nous avons appris à utiliser Vue.js 3 et les plug-ins pour créer des composants contextuels. Le plug-in Vue.js Modal nous offre la possibilité de créer directement des fenêtres modales et nous n'avons besoin que d'utiliser de simples composants Vue.js. De cette façon, nous pouvons créer rapidement et facilement des interfaces utilisateur complexes permettant aux utilisateurs d'interagir avec des applications Web interactives.

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!