Comment créer des instructions dans vue

Vue.js est un framework JavaScript extensible qui fournit de nombreuses fonctionnalités pour créer des applications Web interactives. L'une des fonctionnalités permettant de personnaliser et de contrôler les éléments DOM sont les directives Vue. Cet article expliquera comment créer des directives dans Vue.js.

Présentation

Dans Vue.js, les directives sont des attributs HTML avec un préfixe spécial. Par exemple, "v-" est le préfixe des directives Vue. La valeur d'une directive peut être une expression JavaScript ou un « paramètre de directive », qui est la valeur séparée par deux points après le nom de la directive. Les directives peuvent recevoir un ou plusieurs paramètres et avoir des hooks de cycle de vie.

L'exemple suivant montre comment utiliser les directives dans Vue.js :

<div v-my-directive:foo.bar></div>

Ici, "v-my-directive" est le nom de la directive, "foo" est le paramètre de directive et "bar" est le modificateur de directive. Les instructions peuvent également accepter des expressions :

<div v-my-directive="{ arg1: 1, arg2: &#39;foo&#39; }"></div>

Création d'instructions

Pour utiliser les instructions Vue, vous devez d'abord définir une fonction d'instruction. La fonction d'instruction Vue peut accepter quatre paramètres : el, contraignant, vnode et oldVnode. Ces paramètres sont l'élément DOM de l'élément lié par l'instruction, l'objet lié par l'instruction, le nœud virtuel généré par la compilation Vue et l'ancien nœud virtuel.

La fonction de commande possède des fonctions de hook, qui sont similaires aux fonctions de hook des composants Vue. Voici quelques hooks de directive courants :

• bind : Appelée une seule fois, la première fois que la directive est liée à un élément. Certains réglages initiaux peuvent être effectués ici.
• inséré : appelé lorsque l'élément lié est inséré dans le nœud parent (applicable uniquement aux nœuds d'élément).
• update : appelé lorsqu'un composant est mis à jour, mais éventuellement avant que ses composants enfants ne soient mis à jour.
• componentUpdated : appelé une fois la mise à jour du composant terminée.
• unbind : appelé une seule fois, lorsque l'instruction n'est pas liée à l'élément.

Ce qui suit est un exemple simple de directive personnalisée :

Vue.directive('my-directive', {
  bind: function (el, binding) {
    el.innerHTML = binding.value.toUpperCase();
  }
});

Ici, nous définissons une directive globale my-directive en utilisant la fonction Vue.directive. Cette fonction de commande possède un hook bind qui accepte les paramètres el et binding. Lorsque cette directive est liée à un élément, el.innerHTML sera défini sur la version majuscule de binding.value. Vue.directive函数定义了一个全局指令my-directive。这个指令函数有一个bind钩子，接受el和binding参数。当这个指令绑定到元素上时，el.innerHTML会被设置成binding.value的大写形式。

使用指令

定义指令后，可以将其用作HTML元素的属性。以下示例演示了my-directive指令的用法：

<div v-my-directive="message"></div>

这里message是定义在Vue实例中的一个data属性。当指令被绑定到元素上时，message的值会传递给指令函数的binding.value参数并进行处理。

还可以用冒号指定指令的修饰符：

<div v-my-directive.some-modifier="message"></div>

在指令函数中，可以使用binding.modifiers来访问指令的修饰符。在这个例子中，如果指令名称为my-directive且有some-modifier修饰符，则binding.modifiers会返回{someModifier: true}的值。

移除指令

有时候需要动态地添加或删除指令。Vue.js提供了v-bind指令的简写方式:。因此，可以通过设置一个属性为null来移除一个指令：

<div v-bind:my-directive="condition ? message : null"></div>

在这个例子中，指令在条件condition

Utilisation de directives

Après avoir défini une directive, vous pouvez l'utiliser comme attribut d'un élément HTML. L'exemple suivant démontre l'utilisation de la directive my-directive :

rrreee

Ici, message est un attribut de données défini dans l'instance Vue. Lorsqu'une directive est liée à un élément, la valeur de message est transmise au paramètre binding.value de la fonction de directive et traitée. 🎜🎜Vous pouvez également utiliser deux points pour spécifier les modificateurs de l'instruction : 🎜rrreee🎜Dans la fonction instruction, vous pouvez utiliser binding.modifiers pour accéder aux modificateurs de l'instruction. Dans cet exemple, si le nom de la directive est my-directive et possède le modificateur some-modifier, binding.modifiers renverra Le valeur de {someModifier : true. 🎜🎜Supprimer des commandes🎜🎜Parfois, vous devez ajouter ou supprimer des commandes de manière dynamique. Vue.js fournit l'abréviation : pour la directive v-bind. Par conséquent, une directive peut être supprimée en définissant une propriété sur null : 🎜rrreee🎜 Dans cet exemple, la directive est liée à l'élément si la condition condition est remplie, et non liée à l'élément dans le cas contraire. 🎜🎜Conclusion🎜🎜Cet article présente la création et l'utilisation de directives dans Vue.js, qui peuvent contrôler les éléments DOM et la logique d'interaction avec eux. Vous pouvez désormais personnaliser vos directives et améliorer votre application 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!