Fonction directive dans Vue3 : les instructions personnalisées étendent les fonctions Vue3

Vue3 est la dernière version de Vue. Par rapport à Vue2, elle a été mise à niveau et améliorée à bien des égards. L'une des améliorations est la fonction de directive. La fonction directive est une nouvelle fonction de Vue3. Elle peut être utilisée pour personnaliser des instructions afin d'étendre les fonctions de Vue3.

Qu'est-ce qu'une commande ?

Directive est un attribut de composant spécial fourni par Vue, qui est utilisé pour ajouter des comportements spécifiques aux modèles. Les directives peuvent être considérées comme des directives courantes dans AngularJS qui opèrent sur des éléments, modifiant leur apparence ou leur comportement. Par exemple, les v-if, v-for, v-bind, etc. courants dans Vue sont tous des instructions.

Les directives dans Vue3 sont basées sur des fonctions. Cela signifie que nous pouvons utiliser des fonctions pour créer des instructions personnalisées. Ces fonctions directives doivent être combinées avec Vue avant l'initialisation de l'application et peuvent être utilisées dans des éléments, des composants ou d'autres nœuds DOM.

Le format de syntaxe de la fonction commande est le suivant :

const myDirective: Directive = {
  beforeMount(el, binding, vnode) {
    // ...
  },
  mounted(el, binding, vnode) {
    // ...
  },
  beforeUpdate(el, binding, vnode, prevVnode) {
    // ...
  },
  updated(el, binding, vnode, prevVnode) {
    // ...
  },
  beforeUnmount(el, binding, vnode) {
    // ...
  },
  unmounted(el, binding, vnode) {
    // ...
  }
}

La fonction commande est définie en créant un objet. Cet objet dispose de six méthodes, représentant différentes étapes de la commande lors du montage, de la mise à jour et du démontage. Chaque méthode possède trois paramètres, à savoir l'élément, l'objet de liaison et le nœud virtuel.

Dans le code ci-dessus, on peut voir que chaque fonction a trois paramètres :

• el (HTMLElement) : L'élément auquel l'instruction est liée. (Par exemple : lors de l'utilisation de la directive v-myDirective, el est l'élément auquel la directive est liée)
• binding (DirectiveBinding) : Un objet contenant des informations sur la directive. (Par exemple : Contient le nom, la valeur, les paramètres, etc. de l'instruction)
• vnode (VNode) : Nœud virtuel généré par Vue. (Par exemple : lors de l'utilisation de la directive v-myDirective, vnode est le nœud virtuel du composant ou de l'élément contenant la directive)

Ensuite, voyons comment créer un fichier personnalisé directif.

Créer une directive personnalisée

Afin de créer une directive personnalisée, nous devons utiliser la fonction de directive fournie par Vue :

import { Directive } from 'vue'

const myDirective: Directive = {
  beforeMount(el, binding, vnode) {
    // ...
  }
}

Vue.directive('my-directive', myDirective)

Dans ce Par exemple, nous utilisons la fonction de directive pour créer une directive personnalisée nommée my-directive et transmettons la définition de la directive à la fonction. Dans cet exemple, nous avons uniquement défini le hook beforeMount, ce qui signifie que cette fonction d'instruction sera appelée lors du processus de montage de l'instance Vue. Vous pouvez choisir la fonction crochet en fonction de vos besoins. my-directive的自定义指令，并将指令的定义传递给该函数。在这个例子中，我们只定义了beforeMount钩子，这意味着在Vue实例的挂载过程中，这个指令函数将被调用。你可以根据自己的需求选择钩子函数。

使用自定义指令

一旦我们已经定义了一个自定义指令，我们就可以在Vue模板中使用它。我们可以使用特定的HTML属性来绑定指令，在Vue中这些属性以v-前缀开头。例如：

<div v-my-directive>这是一个自定义指令</div>

在这个例子中，我们使用v-my-directive将我们的自定义指令绑定到了一个dc6dce4a544fdca2df29d5ac0ea9906b元素上。在Vue实例挂载该元素时，beforeMount

Utiliser des directives personnalisées

Une fois que nous avons défini une directive personnalisée, nous pouvons l'utiliser dans le modèle Vue. Nous pouvons lier des instructions à l'aide d'attributs HTML spécifiques, qui dans Vue commencent par le préfixe v-. Par exemple :

rrreee

Dans cet exemple, nous utilisons v-my-directive pour lier notre directive personnalisée à un dc6dce4a544fdca2df29d5ac0ea9906b sur le élément. Lorsque l'instance Vue monte l'élément, le hook beforeMount sera appelé.

Summary

Dans Vue3, les instructions deviennent une API basée sur des fonctions, utilisant des fonctions de directive pour créer des instructions personnalisées. Les directives personnalisées peuvent être utilisées dans des éléments, des composants ou d'autres nœuds DOM pour étendre les fonctionnalités de Vue. #🎜🎜##🎜🎜#La fonction d'instruction comporte six hooks de cycle de vie, qui sont mappés à différents états de l'instruction. Les développeurs peuvent choisir d'utiliser des fonctions de hook appropriées pour effectuer des opérations à des étapes spécifiques. #🎜🎜##🎜🎜#Bien que l'objectif principal des directives soit d'implémenter des opérations DOM et des comportements interactifs, à l'aide de directives personnalisées, les développeurs peuvent facilement encapsuler certains comportements spécifiques dans des directives, puis simplement les appeler dans le modèle. Les directives implémentent ces comportements, créant ainsi du code plus concis, plus facile à maintenir et plus facile à étendre. #🎜🎜#

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!