Steps to encapsulate custom instructions in Vue3

introduction

In Vue 3, encapsulating custom instructions can help you better reuse some common DOM operation logic. Custom instructions can be used to handle some specific user interaction behaviors, such as focus management, drag and drop functions, etc. Here are the steps to create and use custom directives in Vue 3:

Create custom directives

First, you need to register a global or local custom directive in your Vue app. Here we first look at how to create a global custom directive.

Global custom commands

Suppose you want to create an autofocus custom directive that automatically gets focus when the element is first rendered to the page.

• Register global commands in

import { createApp } from 'vue';
import App from './';

const app = createApp(App);

('focus', {
  mounted(el) {
    ();
  }
});

('#app');

• Use in components

<template>
  <input v-focus />
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

Local custom commands

If you want to use custom directives only within a component, you can define it in the options of that component.

• Define instructions inside the component

<template>
  <input v-local-focus />
</template>

<script>
export default {
  name: 'MyComponent',
  directives: {
    'local-focus': {
      mounted(el) {
        ();
      }
    }
  }
};
</script>

Lifecycle hook for custom directives

Custom directives have multiple life cycle hooks that allow you to perform operations on bound elements at different stages:

• mounted(el, binding, vnode, prevVnode)- Called when the bound element is inserted into the DOM.
• updated(el, binding, vnode, prevVnode)- Called when the VNode containing the component's VNode and its child components are updated, but may occur before the VNode of its child components is updated.
• beforeUnmount(el, binding, vnode)- Called only once, and is called when the element bound to the instruction is removed from its parent node.

These hook functions accept the following parameters:

• el: The element bound to the instruction can be used to directly operate the DOM.

• binding: An object containing the following properties:

  • value: The binding value of the directive, for example:v-my-directive="1 + 1"In2。
  • oldValue: The previous value of the directive binding, only inupdatedandbeforeUnmountAvailable in the hook.
  • name: Instruction name, for example:v-my-directiveInmy-directive。
  • expression: Directive expression in the form of a string, for example:v-my-directive="1 + 1"In"1 + 1"。
  • arg: Parameters passed to the instruction (if any), for example:v-my-directive:fooInfoo。
  • modifiers: An object containing modifiers. For example:Include{ foo: true, bar: true }。

• vnode: VNode, indicates the element where the binding occurs.

• prevVnode: Previous VNode, only inupdatedandbeforeUnmountAvailable in the hook.

Example: Custom directives with parameters and modifiers

Suppose we need a custom directive that decides whether to add a click event to an element based on the parameters, and can decide whether to display or hide the element when clicking based on the modifier.

• Define instructions

('click-toggle', {
  mounted(el, binding) {
    ('click', () => {
      if ( === 'show') {
         = 'block';
      } else if ( === 'hide') {
         = 'none';
      }
    });
  }
});

• Use in templates

<template>
  <button v-click-toggle:hide>Click to hide me</button>
  <button v-click-toggle:show>Click to show me</button>
</template>

Through the above steps, you can create and use custom directives in your Vue 3 project. These instructions can greatly simplify DOM operations, making the code more concise and easy to maintain.

This is the article about the operation steps of Vue3 encapsulation custom instructions. For more related contents of Vue3 encapsulation custom instructions, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!