VueUse provieds a wide array of composable utilities for Vue applications. Among these, the Elements set focuses on tracking and reacting to browser DOM element states. Below are several practical helpers demonstrated with Vue 3. Tracking the Currently Focused Element The useActiveElement composable...
When implementing batch file downloads with Vue, the naive approach of looping through URLs to create anchor tags fails because most browsers restrict concurrent downloads to around 10 files. A reliable solution involves packaging filles in to a single ZIP archive before downloading. This requires t...
v-on Event Listening <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Eve...
The Vue 3.0 beta has been out for a while, so it's time to get hands-on! Note: All demonstrations in this article are based on Vue 3.0 beta. The API may change before the official release. Please refer to the official documentation when it's available. Environment Setup Use the Vue CLI directly. If...
CSS Fundamentals Block Formatting Context (BFC) BFC represents an isolated rendering environment where elements inside it are independent from outside elements. It helps solve common layout issues like margin collapsing and float clearing. Centering Elements Multiple techniques exist for achieving h...
Cross-project authentication often demands a single login interface that can be embedded into various applications. One efficient pattern places the login page inside an iframe within a modal dialog. The parent applicatoin controls visibility and message hanlding, while the iframe loads a centralise...
Domain Name Registration Register a domain name through a domain registrar such as Tencent Cloud. DNS Record Configuration Configure DNS records in your domain management panel to point the domain to your server's IP address. Nginx Server Block Setup Naivgate to the Nginx configuration directroy: cd...
Core Concepts of Vue's Diff Algorithm When component state changes, Vue leverages Virtual DOM and an optimized diff algorithm to minimize the number of DOM operations, improving overall application performance. The diff algorithm is the core of any Virtual DOM implementation. Its primary job is to c...
The v-hasPermi custom directive provides a mechanism for frontend element-level access control by binding visibility to user permissions stored in the application state. Directive Application Syntax Apply the directive directly to HTML elements within a Vue template. The directive expects an array o...
Install the library via npm: npm install dhtmlx-gantt Import the Gantt component and its stylesheet: import gantt from 'dhtmlx-gantt'; import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; Create a container element in your template: <div ref="chartContainer" class="gantt-chart" /&g...