Démarrage rapide VUE3 : utilisez les instructions Vue.js pour encapsuler les composants d'animation de commutation

Vue.js est un framework JavaScript populaire pour créer des applications Web interactives et des interfaces utilisateur. Vue.js 3 est la dernière version du framework, apportant de nouvelles fonctionnalités puissantes telles que des vitesses de rendu plus rapides, une prise en charge TypeScript plus puissante et une meilleure expérience de développement. Parmi elles, la directive Vue.js est une fonction essentielle de Vue.js, qui peut être utilisée pour ajouter un comportement dynamique aux éléments liés par la directive. Dans cet article, nous utiliserons les instructions Vue.js pour encapsuler un composant d'animation de commutation.

Étape 1 : Créer une instance Vue

Nous allons commencer par créer une instance Vue. Ici, nous utiliserons Vue.cli pour installer Vue.js 3 et créer notre application Vue. Veuillez suivre les étapes ci-dessous :

1. Installez Vue.cli

Ouvrez le terminal et entrez la commande suivante pour installer Vue.cli :

npm install -g @vue/cli

2. Créez une application Vue

Utilisez la commande suivante pour créer une application Vue.js dans la procédure du terminal :

vue create my-app

3. Lancez l'application Vue

Lancez l'application Vue.js dans le terminal à l'aide de la commande suivante :

cd my-app
npm run serve

Maintenant, nous avons réussi à créer une application Vue.js et à démarrer le serveur de développement.

Étape 2 : Créer un composant d'animation de commutation

Dans cette étape, nous utiliserons les instructions Vue.js pour encapsuler un composant d'animation de commutation. Notre objectif est de créer une directive qui peut être ajoutée à n'importe quel élément et qui affichera une animation fluide lorsque cet élément est basculé. Veuillez suivre ces étapes :

1. Créez un nouveau fichier et enregistrez-le sous switch-animation.js

Vous pouvez éventuellement créer le fichier dans le répertoire src/components. Dans ce fichier, entrez le code suivant :

import { DirectiveBinding } from 'vue'
export default {
  beforeMount (el: HTMLElement, binding: DirectiveBinding) {
    el.style.transition = 'opacity 0.5s'
  },
  mounted (el: HTMLElement, binding: DirectiveBinding) {
    el.style.opacity = '0'
  },
  updated (el: HTMLElement, binding: DirectiveBinding) {
    if (binding.value !== binding.oldValue) {
      el.style.opacity = '0'
      setTimeout(() => {
        el.style.opacity = '1'
      }, 100)
    }
  }
}

Dans ce code, nous définissons une directive Vue.js appelée switch-animation. Cette directive exécutera les fonctions correspondantes dans les hooks beforeMount, montés et mis à jour de l'élément. Le but de ces fonctions est d'ajouter des effets de transition lorsqu'un élément est ajouté au DOM, de définir la transparence initiale d'un élément et d'ajouter des effets de bascule lorsque l'état de l'élément est mis à jour.

2. Directive d'enregistrement dans le fichier main.js

Pour utiliser cette directive dans l'application Vue.js, nous devons l'enregistrer dans le fichier main.js. Entrez le code suivant dans le fichier :

import { createApp } from 'vue'
import switchAnimation from './components/switch-animation.js'

const app = createApp(App)
app.directive('switch-animation', switchAnimation)
app.mount('#app')

Dans ce code, nous créons notre instance Vue à l'aide de la fonction createApp de Vue.js. Nous mettons ensuite la directive à disposition de notre application en l'enregistrant dans app.directive.

3. Utilisation de directives dans les composants

Maintenant, nous avons créé et enregistré avec succès notre directive. Ensuite, nous devons utiliser cette directive dans notre composant. Pour démontrer comment cette directive peut être utilisée, nous allons créer un composant simple qui commute successivement deux paragraphes de texte via un bouton bascule. Créez le fichier switch-example.vue dans le répertoire src/components et entrez le code suivant :

<template>
  <div>
    <button @click="toggle">Toggle Text</button>
    <p v-switch-animation="show.first">{{ show.first ? 'Hello' : 'Goodbye' }}, world!</p>
    <p v-switch-animation="show.second">{{ show.second ? 'How are you?' : 'I am fine.' }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: {
        first: true,
        second: false,
      },
    }
  },
  methods: {
    toggle() {
      this.show.first = !this.show.first
      this.show.second = !this.show.second
    },
  },
}
</script>

Dans ce code, nous créons un composant Vue nommé switch-example. Ce composant contient un bouton bascule de texte et deux éléments de paragraphe utilisant la directive que nous venons de créer. Puisque nos directives sont appliquées au niveau des éléments pour chaque paragraphe, envelopper chaque paragraphe dans une directive v-switch-animation nous permet d'ajouter facilement un effet de transition fluide.

Maintenant, nous avons terminé la création et l'utilisation du composant d'animation de commutation !

Conclusion

Dans cet article, nous avons présenté comment utiliser les instructions Vue.js pour encapsuler un composant d'animation de commutation. En utilisant cette directive, nous pouvons facilement ajouter un effet de transition fluide sur n'importe quel élément pour améliorer l'expérience utilisateur. Nous avons également montré comment créer et enregistrer des directives dans une application Vue.js, et comment utiliser les directives dans les composants. Si vous souhaitez en savoir plus sur les directives Vue.js et d'autres fonctionnalités puissantes de Vue.js, consultez la documentation officielle de Vue.js.

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!