Custom instructions are suitable for use in scenarios where DOM is directly operated, such as input box autofocus, permission control, lazy loading of pictures, etc. Common scenarios include: 1. The input box automatically gets focus; 2. The permission control button is displayed or disabled; 3. Implement lazy loading or animation triggering; 4. Numerical formatting display. It can be registered globally or locally when created, and the commonly used hooks are inserted and updated. For example, the permission directive v-permission can control whether the element is displayed according to the user role. When using it, be careful to pass parameters in combination with binding.value parameters and execute logic in appropriate hooks, while avoiding abuse to maintain data-driven principles.

Directly put: Vue's custom instructions are a very practical but often overlooked feature. They allow you to perform low-level operations on the DOM, such as focusing on input boxes, permission control display, lazy loading of pictures, etc. This article will explain clearly how to create and use Vue custom directives without going around the corner.

Under what circumstances is it suitable to use custom directives?

Vue recommends that we use componentized and responsive data to build applications, but in some scenarios, you still need to directly operate the DOM. Custom commands come in handy at this time.

Common usage scenarios include:

• The input box automatically gets focus
• Button permission control (such as disabling buttons or hiding when there is no permission)
• Implement lazy loading of pictures or animation triggers
• Numerical formatting display (although filters can be used, instructions can also be used)

If you find that a function requires frequent operation of the DOM and is not suitable for processing in component logic, you can consider encapsulating it into a custom instruction.

How to create a basic custom directive?

Creating custom directives in Vue is simple and can be registered globally or locally.

Global registration example:

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

Then use it in the template like this:

 <input v-focus />

Example of partial registration:

Register inside the component via directives option:

 export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}

Each instruction can contain the following hook functions:

• bind : Only called once, the command is called when the first time it is bound to an element
• inserted : Called when the bound element is inserted into the parent node
• update : called when the component is updated, but may before its child components are updated
• componentUpdated : Called after both the component and the child component have been updated
• unbind : Called when the directive is unbined with the element

Generally, the most commonly used are inserted and update .

Take a practical example: implement a permission control instruction

Assuming your system has role permissions, some buttons can only be seen or clicked by a specific user.

We can write a v-permission directive to control whether to render or disable elements based on permissions.

 Vue.directive('permission', {
  bind(el, binding) {
    const { value } = binding
    const permissions = ['admin', 'editor'] // Assume this is the user permission obtained from the store if (value && Array.isArray(value)) {
      const hasPermission = value.some(role => permissions.includes(role))
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
  }
})

How to use:

 <button v-permission="[&#39;admin&#39;]">Delete</button>

This way, non-admin users will not see this button.

Note: This method is "front-end control", and actual sensitive operations also require back-end verification permissions.

Some small details that are easy to ignore

• The parameters of the instruction can be obtained through binding.value , and the types can be strings, arrays, objects, etc.
• If you want the instruction to re-execute the logic when the component is updated, remember to write the corresponding processing in update hook.
• It is safe to operate the DOM during the inserted phase because the element has been inserted into the page at this time.
• When deleting an element, use el.remove() or el.parentNode.removeChild(el) to determine whether the parent node exists.

Basically that's it. Custom instructions are not a must, but at some point it can simplify logic and improve code maintainability. Be careful not to abuse it when using it, and give priority to maintaining data-driven development habits.

The above is the detailed content of Vue Custom Directives Creation Tutorial. For more information, please follow other related articles on the PHP Chinese website!