Vue custom directives are a mechanism for encapsulating repetitive DOM operations, suitable for scenarios where component logic cannot meet the needs and directly operates the DOM. It realizes functions such as focusing input frames, permission control, scrolling behavior processing, etc. through hook functions of instruction objects (such as mounted and updated). Common usage examples include: 1. Automatic focus input box (v-focus); 2. Permission control command (v-permission), which determines whether to remove elements based on user permissions; 3. Scrolling behavior processing command (v-scroll), which triggers data loading or animation through the Intersection Observer API. It should be noted that custom directives should not replace component logic, avoiding abuse that leads to maintenance difficulties or introduces excessive side effects.
In Vue.js, custom directives are a very practical solution if you need to manipulate the DOM directly and the component encapsulation cannot meet the needs. It provides a clean, reusable way to deal with low-level DOM operations that are not suitable for being placed in component logic.

What are Vue custom directives?
Vue's custom directive is essentially a special mark that can be attached to a DOM element to encapsulate some repetitive DOM operation behavior. For example, focus on the input box, set scrolling behavior, bind event listening, etc.
Vue provides several default instructions, such as v-model
and v-show
, but many times we need to create our own instructions according to business needs.

A basic custom directive object can contain the following hook functions:
-
created
: Called before the command is bound -
beforeMount
: Called before the element is inserted into the parent node -
mounted
: Called after the command binding is completed and the DOM is inserted -
beforeUpdate
: Called before component update -
updated
: called after the component is updated -
beforeUnmount
: Called when the directive is about to be removed
Usually we use mounted
and updated
hooks most often, because most DOM operations occur in these two stages.

Common usage scenarios and implementation examples
1. Automatic focus input box ( v-focus
)
This is a very common requirement: the page will automatically position the cursor on an input box after it is loaded.
app.directive('focus', { mounted(el) { el.focus(); } });
Then use in the template:
<input v-focus />
Note: Not all browsers will trigger focus immediately. If you encounter problems, you can add a
setTimeout
to delay execution.
2. Implement permission control instructions (such as v-permission
)
Sometimes you want to use permissions to control whether a button or area is displayed. Although you can use v-if
or v-show
, if the logic is relatively unified, it can also be encapsulated into instructions.
app.directive('permission', { mounted(el, binding) { const requiredPermission = binding.value; const userPermissions = ['admin', 'editor']; // Assume this is the user permission list obtained from the store if (!userPermissions.includes(requiredPermission)) { el.parentNode.removeChild(el); } } });
How to use:
<button v-permission="'admin'">Delete article</button>
In this way, when the user does not have admin permissions, this button will not appear in the DOM.
3. Handle scrolling behavior ( v-scroll
)
You may want to do some animation or data loading when some elements appear in visual areas, which can be achieved through the Intersection Observer API.
app.directive('scroll', { mounted(el, binding) { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { binding.value(); // Trigger the incoming method observer.unobserve(el); // Trigger only once} }); }); observer.observe(el); } });
Use in components:
<div v-scroll="loadMoreData">Load more content...</div>
where loadMoreData
is a method that will be executed when the element enters the viewport.
Tips: When should you not use custom commands?
Although custom directives are powerful, there are some situations that need to be paid attention to:
- If the functionality can be implemented through component props or computed properties, the component scenario is preferred.
- Do not abuse instructions to modify the internal state of the component, as it may easily cause maintenance difficulties.
- Avoid introducing too many side effects into the instructions.
Basically that's it. Custom directives are a useful extension point provided by Vue. Use it reasonably can make your code clearer and improve reusability. But remember to keep it simple and don't let it be too complicated.
The above is the detailed content of Vue.js Custom Directives for DOM Manipulation. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

React itself does not directly manage focus or accessibility, but provides tools to effectively deal with these issues. 1. Use Refs to programmatically manage focus, such as setting element focus through useRef; 2. Use ARIA attributes to improve accessibility, such as defining the structure and state of tab components; 3. Pay attention to keyboard navigation to ensure that the focus logic in components such as modal boxes is clear; 4. Try to use native HTML elements to reduce the workload and error risk of custom implementation; 5. React assists accessibility by controlling the DOM and adding ARIA attributes, but the correct use still depends on developers.

Server-siderendering(SSR)inNext.jsgeneratesHTMLontheserverforeachrequest,improvingperformanceandSEO.1.SSRisidealfordynamiccontentthatchangesfrequently,suchasuserdashboards.2.ItusesgetServerSidePropstofetchdataperrequestandpassittothecomponent.3.UseSS

WebAssembly(WASM)isagame-changerforfront-enddevelopersseekinghigh-performancewebapplications.1.WASMisabinaryinstructionformatthatrunsatnear-nativespeed,enablinglanguageslikeRust,C ,andGotoexecuteinthebrowser.2.ItcomplementsJavaScriptratherthanreplac

Immutable updates are crucial in React because it ensures that state changes can be detected correctly, triggering component re-rendering and avoiding side effects. Directly modifying state, such as push or assignment, will cause React to be unable to detect changes. The correct way to do this is to create new objects instead of old objects, such as updating an array or object using the expand operator. For nested structures, you need to copy layer by layer and modify only the target part, such as using multiple expansion operators to deal with deep attributes. Common operations include updating array elements with maps, deleting elements with filters, adding elements with slices or expansion. Tool libraries such as Immer can simplify the process, allowing "seemingly" to modify the original state but generate new copies, but increase project complexity. Key tips include each

Front-end applications should set security headers to improve security, including: 1. Configure basic security headers such as CSP to prevent XSS, X-Content-Type-Options to prevent MIME guessing, X-Frame-Options to prevent click hijacking, X-XSS-Protection to disable old filters, HSTS to force HTTPS; 2. CSP settings should avoid using unsafe-inline and unsafe-eval, use nonce or hash and enable reporting mode testing; 3. HTTPS-related headers include HSTS automatic upgrade request and Referrer-Policy to control Referer; 4. Other recommended headers such as Permis

The data-* attribute is used in HTML to store additional data, and its advantages include that the data is closely related to elements and comply with HTML5 standards. 1. When using it, name it starts with data-, such as data-product-id; 2. It can be accessed through JavaScript's getAttribute or dataset; 3. Best practices include avoiding sensitive information, reasonable naming, paying attention to performance and not replacing state management.

To style SVGs using CSS, you first need to embed SVGs inline into HTML for fine control. 1. Inline SVG allows its internal elements such as or to be directly selected through CSS and to apply styles, while external SVG only supports global styles such as width and height or filters. 2. Use regular CSS syntax such as .class:hover to achieve interactive effects, but use fill instead of color to control the color, and use stroke and stroke-width to control the outline. 3. Use class names to organize styles to avoid duplication and pay attention to naming conflicts and scope management. 4. The SVG style may be inherited from the page, and can be reset through svg*{fill:none;stroke:none;} to avoid

Adding website Favicon requires preparing icon files, placing the correct path and quoting them. 1. Prepare multi-size .ico or .png icons, which can be generated by online tools; 2. Put favicon.ico in the website root directory; 3. If you need to customize the path or support more devices, you need to add a link tag reference in the HTMLhead; 4. Clear the cache or use the tool to check whether it is effective.
