Vue3 : directives personnalisées

En plus des directives de base définies par défaut (v-model et v-show), Vue permet également d'enregistrer des directives personnalisées.

Ci-dessous, nous enregistrons une directive globale v-focus. Le rôle de cette directive est de faire en sorte que l'élément obtienne le focus lorsque la page se charge :

Exemple

<div id="app"> <p>Lors du chargement de la page, l'élément input obtient automatiquement le focus :</p> <input v-focus> </div> <script>``` const app = Vue.createApp({}) // RegisteraglobalCustomDirective `v-focus` app.directive('focus', { // WhenBy绑decideofelement挂loadto DOM Mediumwhen…… mounted(el) { // 聚焦element el.focus() } }) app.mount('#app') ```</script>

Essayez-le »

Nous pouvons également utiliser l'option directives dans une instance pour enregistrer des directives locales, afin que la directive ne puisse être utilisée que dans cette instance :

Exemple

<div id="app"> <p>Lors du chargement de la page, l'élément input obtient automatiquement le focus :</p> <input v-focus> </div> <script>``` const app = { data() { return { } }, directives: { focus: { // Directiveofdefinition mounted(el) { el.focus() } } } } Vue.createApp(app).mount('#app') ```

Essayez-le »

Hooks

Fonctions de hook

La fonction de définition de directive fournit plusieurs fonctions de hook (facultatives) :

  • created : Appelé avant que les attributs ou les écouteurs d'événements de l'élément lié soient appliqués.

  • beforeMount : Appelé lorsque la directive est liée pour la première fois à l'élément et avant que le composant parent ne soit monté.

  • mounted : Appelé après le montage du composant parent de l'élément lié.

  • beforeUpdate: Appelé avant la mise à jour du VNode du composant conteneur.

  • updated: Appelé après que le VNode du composant conteneur et les VNodes de ses composants enfants ont été mis à jour.

  • beforeUnmount: Appelé une fois avant que le composant parent de l'élément lié ne soit démonté.

  • unmounted: Appelé une fois lorsque la directive est déliée de l'élément et que le composant parent a été démonté.

Exemple

import { createApp } from 'vue' const app = createApp({}) //Enregistrement app.directive('my-directive', { //Les directives disposent d'un ensemble de hooks de cycle de vie : //Appelé avant que les attributs ou les écouteurs d'événements de l'élément lié ne soient appliqués created() {}, //Appelé avant que le composant parent de l'élément lié ne soit monté beforeMount() {}, //Appelé lorsque le composant parent de l'élément lié est monté mounted() {}, //Appelé avant que le VNode du composant conteneur soit mis à jour beforeUpdate() {}, //Appelé après que le VNode du composant conteneur et les VNodes de ses composants enfants sont mis à jour updated() {}, //Appelé avant que le composant parent de l'élément lié soit démonté beforeUnmount() {}, //Appelé lorsque le composant parent de l'élément lié est démonté unmounted() {} }) //Enregistrement (directives fonctionnelles) app.directive('my-directive', () => { //Ceci sera appelé comme `mounted` et `updated` }) //getter; renvoie la définition de la directive si elle est enregistrée const myDirective = app.directive('my-directive')

Paramètres de la fonction hook

Les paramètres des fonctions de hook sont :

el

elL'élément auquel la directive est liée. Cela peut être utilisé pour manipuler directement le DOM.

binding

binding est un objet contenant les propriétés suivantes :

  • instance: L'instance du composant qui utilise la directive.
  • value: La valeur passée à la directive. Par exemple, dansv-my-directive="1 + 1": La valeur précédente, uniquement dans2。
  • oldValue: dans, la valeur estbeforeUpdateetupdated: Disponible, que la valeur ait changé ou non.
  • arg: Paramètre passé à la directive (le cas échéant). Par exemple dansv-my-directive:foo: dans, arg est"foo"。
  • modifiers: Un objet contenant des modificateurs (le cas échéant). Par exemple dansv-my-directive.foo.bar: dans, l'objet modifiers est{foo: true，bar: true}。
  • dir: Un objet passé en argument lors de l'enregistrement de la directive. Par exemple, dans la directive suivante:
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

dir sera l'objet suivant:

{
  mounted(el) {
    el.focus()
  }
}

vnode

Plan de l'élément DOM réel reçu en tant que paramètre el.

prevNode

Le nœud virtuel précédent, disponible uniquement dans les hooks beforeUpdate et updated.

L'exemple suivant démontre l'utilisation de ces paramètres :

Exemple

<div id="app"> <div v-example="{ name: 'Example', url: 'www.example.com' }"></div> </div> ​ <script>``` const app = Vue.createApp({}) app.directive('example', (el, binding, vnode) => { console.log(binding.value.name) // => "Example" console.log(binding.value.url) // => "www.example.com" var s = JSON.stringify el.innerHTML = s(binding.value) }) app.mount('#app') ```</script>

Essayez-le »

Parfois, nous n'avons pas besoin d'autres fonctions de hook, nous pouvons donc écrire une fonction raccourcie comme suit :

Vue.directive('example', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

La fonction de directive accepte toute expression JavaScript valide. L'exemple suivant transmet un objet JavaScript :

Exemple

<div id="app"> <div v-example="{ color: 'green', text: 'Example!' }"></div> </div> <script>``` Vue.directive('example', function (el, binding) { // AbbreviationMethodSettingsTextandBackground color el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) ```</script>

Essayez-le »
Autres extensions