Comment utiliser des instructions personnalisées pour implémenter des opérations DOM dans Vue

Vue est un framework JavaScript très populaire qui peut être utilisé pour créer des applications monopage (SPA) hautes performances et évolutives. L'une des fonctionnalités puissantes réside dans les directives personnalisées, qui sont une extension basée sur les directives principales de Vue (v-model, v-if, v-for, etc.), qui peuvent être utilisées pour ajouter des comportements aux éléments DOM. Dans cet article, nous apprendrons comment utiliser des directives personnalisées dans Vue pour implémenter des opérations DOM.

1. Créer des directives personnalisées

Vous pouvez utiliser la fonction de directive de Vue pour créer des directives personnalisées. La fonction de commande doit renvoyer un objet contenant plusieurs fonctions de hook (hooks) qui contrôlent le comportement de la commande. Ce qui suit est un modèle pour une directive personnalisée :

Vue.directive("directive-name", {
bind: function (el, liaison, vnode) {

// 在绑定元素和指令之间建立联接时触发

},
inséré : fonction (el, liaison, vnode ) {

// 元素插入父元素之后触发

},
mise à jour : fonction (el, liaison, vnode, oldVnode) {

// 在元素和指令所绑定的组件的 VNode 更新之后调用

},
composantMise à jour : fonction (el, liaison, vnode, oldVnode) {

// 在组件的 VNode 及其子 VNode 全部更新后调用

},
unbind : fonction ( el , bind, vnode) {

// 解绑时触发

}
});

2. Utilisation de directives personnalisées

Il existe deux façons d'utiliser des directives personnalisées dans Vue :

2.1 Enregistrement global

Enregistrement global des directives personnalisées Cela fait référence. à l'ajout de la fonction d'instruction personnalisée à la liste des fonctions d'instruction globales de l'instance Vue. De cette façon, vous pouvez utiliser des directives personnalisées dans tous les composants.

Utilisez la syntaxe Vue.directive() pour enregistrer les directives globalement :

Vue.directive("directive-name", {
//...
});

Ensuite, en HTML, vous pouvez l'utiliser dans ce qui suit way Directive personnalisée :

232732ea76785df2167c2360d5ae901616b28748ea4df4d9c2150843fecfba68

2.2 Enregistrement local

La directive d'enregistrement local fait référence à l'ajout de la fonction de directive à l'attribut directives du composant Vue. De cette façon, vous pouvez utiliser des directives personnalisées dans le composant.

Ce qui suit est un exemple d'enregistrement local d'une directive dans un composant Vue :

Vue.component('my-component', {
directives: {

'directive-name': {
  // ...
}

}
})

Ensuite, dans le HTML, vous pouvez effectuez les opérations suivantes à l'aide de directives personnalisées :

e8e50b1d9b6a8b160a23a620cdb79e6283153a5025b2246e72401680bb5dd683

3. Exemples de directives personnalisées

Ci-dessous, nous présenterons quelques scénarios courants d'utilisation de directives personnalisées.

3.1. Mise au point automatique

Lorsqu'une zone de saisie est affichée sur la page, on s'attend généralement à ce que la zone de saisie se concentre automatiquement. Nous pouvons réaliser cette fonction grâce à des instructions personnalisées. Voici un exemple de directive d'auto-focus :

Vue.directive('focus', {
insert: function(el) {

el.focus()

}
})

En HTML, il vous suffit d'ajouter le v- directive focus La mise au point automatique peut être obtenue :

2ba73390b5480b7e67e450ba4b9788dc

3.2. Implémenter le chargement par défilement

Le chargement par défilement est une méthode courante de chargement par défilement infini lorsque l'utilisateur fait défiler vers le bas de la page. le chargement de plus de données. Nous pouvons réaliser cette fonction grâce à des instructions personnalisées. Voici un exemple de directive de chargement de défilement :

Vue.directive('scroll', {
insert: function (el, liaison) {

window.addEventListener('scroll', function() {
  if ((window.innerHeight + window.pageYOffset+ 50) >= document.body.offsetHeight) {
    binding.value()
  }
})

}
})

En HTML, vous pouvez passer le v- directive scroll Pour ajouter un chargement par défilement :

4ef2c0f85885855a0e759f14e3b80b6716b28748ea4df4d9c2150843fecfba68

Lorsque l'utilisateur fait défiler vers le bas, l'instruction déclenchera la fonction loadMoreData pour charger plus de données.

3.3. Désactiver le menu contextuel

Dans certains scénarios, vous devrez peut-être désactiver le menu contextuel, par exemple pour empêcher les utilisateurs de copier des données sensibles sur la page. Nous pouvons résoudre ce problème grâce à des instructions personnalisées. Voici un exemple de directive pour désactiver le menu contextuel :

Vue.directive('disable-right-click', {
bind: function(el) {

el.addEventListener('contextmenu', function(event) {
  event.preventDefault()
})

}
})

En HTML, vous pouvez passer la directive v -disable-right-click pour désactiver le menu contextuel :

b6e6c538c20605a1c9f22a57ede9642fle contenu16b28748ea4df4d9c2150843fecfba68

4. Conclusion

Les directives personnalisées sont très fonctionnalité puissante de Vue, elle peut être utilisée pour encapsuler et réutiliser la logique de manipulation DOM, et peut être partagée entre plusieurs composants. Dans cet article, nous avons appris comment créer et utiliser des directives personnalisées dans Vue. Si vous souhaitez en savoir plus sur les instructions et les composants de Vue, veuillez vous référer à la documentation officielle de Vue.

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!