Home>Article>Web Front-end> 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.
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) {
// 解绑时触发
}
});
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:
232732ea76785df2167c2360d5ae901616b28748ea4df4d9c2150843fecfba68
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:
e8e50b1d9b6a8b160a23a620cdb79e6283153a5025b2246e72401680bb5dd683
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:
2ba73390b5480b7e67e450ba4b9788dc
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:
4ef2c0f85885855a0e759f14e3b80b6716b28748ea4df4d9c2150843fecfba68
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:
b6e6c538c20605a1c9f22a57ede9642fthe content
Custom directives are a very powerful feature of Vue. It can be used to encapsulate and reuse DOM operation logic, and can be used between multiple components. to share. In this article, we learned how to create and use custom directives in Vue. If you want to learn more about Vue's instructions and components, please refer to Vue's official documentation.
The above is the detailed content of How to use custom instructions to implement DOM operations in Vue. For more information, please follow other related articles on the PHP Chinese website!