How to use custom instructions to implement DOM operations in Vue

Vue is a very popular JavaScript framework that can be used to build high-performance, scalable single-page applications (SPA). One of the powerful features is custom directives, which are an extension of Vue's core directives (v-model, v-if, v-for, etc.) and can be used to add behaviors to DOM elements. In this article, we will learn how to use custom directives in Vue to implement DOM operations.

1. Create custom directives

You can use Vue’s directive function to create custom directives. The command function must return an object that contains multiple hook functions (hooks) that control the behavior of the command. The following is a template for a custom directive:

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

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

},
inserted: function (el, binding, vnode) {

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

},
update: function (el, binding, vnode, oldVnode) {

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

},
componentUpdated: function (el, binding, vnode, oldVnode) {

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

},
unbind: function (el, binding, vnode) {

// 解绑时触发

}
});

2. Using custom directives

There are two ways to use custom directives in Vue:

2.1. Global registration

Globally registering a custom instruction means adding the custom instruction function to the Vue instance global instruction function list. This way, you can use custom directives in all components.

Use Vue.directive() syntax to register directives globally:

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

Then in HTML, you can use custom directives in the following ways:

2.2 Partial Registration

Local registration directive refers to adding the directive function to the directives attribute of the Vue component. This way, you can use custom directives within the component.

The following is an example of registering a directive locally in a Vue component:

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

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

}
})

Then in HTML, you can use the custom directive via:

3. Custom instruction examples

Below, we will introduce some common scenarios for using custom instructions.

3.1. Automatic focus

When an input box in the page is rendered, it is usually expected that the input box will focus automatically. We can achieve this function through custom instructions. The following is an example of an auto-focus directive:

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

el.focus()

}
})

In HTML, you only need to add the v-focus directive to achieve automatic focus:

3.2. Implement rolling loading

Scroll loading is a common infinite scroll loading method. When the user scrolls to the bottom of the page, it will trigger the loading of more data. We can achieve this function through custom instructions. The following is an example of a rolling loading directive:

Vue.directive('scroll', {
inserted: function (el, binding) {

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

}
})

In HTML, you can add scrolling loading through the v-scroll directive:

When the user scrolls to the bottom, the instruction triggers the loadMoreData function to load more data.

3.3. Disable the right-click menu

In some scenarios, you may need to disable the right-click menu, such as to prevent users from copying sensitive data on the page. We can solve this problem through custom instructions. The following is an example of a directive to disable the right-click menu:

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

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

}
})

In HTML, you can disable the right-click menu through the v-disable-right-click directive: