Comment créer des instructions personnalisées dans vue

Utilisez la méthode Vue.directive() pour créer une directive personnalisée dans Vue. Le nom de la directive commence par le préfixe v-. Les options de la directive incluent des hooks de cycle de vie tels que bind, insert, update, componentUpdated, unbind, etc. qui sont utilisés pour faire fonctionner les éléments DOM à différentes étapes. Les paramètres peuvent être acceptés. Ajoutez deux points (: nom du paramètre) après le nom de la commande pour spécifier les paramètres.

Créez des directives personnalisées dans Vue

Créez des directives personnalisées dans Vue via la méthode Vue.directive(). Cette méthode accepte deux paramètres : le nom de la directive et un objet contenant les options de la directive. Vue.directive() 方法创建自定义指令。该方法接受两个参数：指令名称和一个包含指令选项的对象。

指令名称

指令名称必须以 v- 前缀开头，后跟一个驼峰式名称来标识指令。例如，v-myDirective。

指令选项

指令选项对象可以包含以下属性：

• bind (可选) 在元素插入 DOM 时调用一次。
• inserted (可选) 在元素被插入 DOM 后立即调用。
• update (可选) 在元素更新时调用。
• componentUpdated (可选) 在父组件更新后调用。
• unbind (可选) 在元素从 DOM 中移除时调用。

示例

例如，创建一个名为 v-highlight 的自定义指令，它会在元素上添加一个黄色背景：

<code class="javascript">Vue.directive('highlight', {
  bind: function (el, binding, vnode) {
    el.style.backgroundColor = 'yellow';
  }
});</code>

然后，可以在模板中使用此指令：

<code class="html"><div v-highlight>突出显示此文本</div></code>

带参数的指令

指令也可以接受参数。要实现这一点，可以在指令名称后添加冒号 (: 参数名称)。例如，创建一个名为 v-size

Nom de la commande

🎜🎜Le nom de la commande doit commencer par le préfixe v-, suivi d'un nom camelCase pour identifier la commande. Par exemple, v-myDirective. 🎜🎜🎜Options de directive🎜🎜🎜Les objets d'options de directive peuvent contenir les attributs suivants : 🎜

• 🎜bind (facultatif)🎜 Appelé une fois lorsque l'élément est inséré dans le DOM.
• 🎜inserted (facultatif)🎜 Appelé immédiatement après l'insertion de l'élément dans le DOM.
• 🎜update (facultatif)🎜 Appelé lorsque l'élément est mis à jour.
• 🎜componentUpdated (facultatif)🎜 Appelé après la mise à jour du composant parent.
• 🎜unbind (facultatif)🎜 Appelé lorsque l'élément est supprimé du DOM.

🎜🎜Exemple🎜🎜🎜Par exemple, créez une directive personnalisée appelée v-highlight qui ajoute un fond jaune à l'élément : 🎜

<code class="javascript">Vue.directive('size', {
  bind: function (el, binding, vnode) {
    el.style.fontSize = binding.value + 'px';
  }
});</code>

🎜Ensuite, vous pouvez utiliser ceci directive dans un modèle : 🎜

<code class="html"><div v-size="20">设置字体大小为 20px</div></code>

🎜🎜Directive avec paramètres🎜🎜🎜Les directives peuvent également accepter des paramètres. Pour ce faire, ajoutez deux points (: nom du paramètre) après le nom de la directive. Par exemple, créez une directive personnalisée appelée v-size qui définit la taille de police d'un élément sur un paramètre : 🎜rrreee🎜 Vous pouvez ensuite utiliser cette directive dans un modèle et passer le paramètre : 🎜rrreee

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!