YouTip

* * Vue3 Global API](#) `app.directive()` is a very powerful function that allows developers to define custom global directives. Directives are a special feature provided by Vue for directly manipulating DOM elements. Through `app.directive()`, you can define your own directives and use them throughout the application. * * * ## 1. What are Directives? Directives are a special kind of attribute in Vue, starting with `v-`. Vue has some built-in commonly used directives, such as `v-if`, `v-for`, `v-bind`, etc. These directives can help us manipulate DOM elements more conveniently. For example, the `v-if` directive can determine whether to render an element based on the value of an expression: ## Example When `isVisible` is `true`, the `div` element will be rendered; otherwise, the `div` element will not be rendered. * * * ## 2. Custom Directives In addition to built-in directives, Vue also allows us to define our own directives. Custom directives can be used to handle some specific DOM operations, such as auto-focus, scroll listening, etc. In Vue3, we can register a global directive through the `app.directive()` function. * * * ## 3. Basic Usage of app.directive() The `app.directive()` function accepts two parameters: * **Directive Name**: The name of the directive. Note that it should not include the `v-` prefix. * **Directive Object**: An object containing directive hook functions, used to define the behavior of the directive. ### 3.1 Registering a Simple Directive Suppose we need to define a directive that automatically focuses on an element when it is inserted into the DOM. We can implement it like this: ## Example import{ createApp } from 'vue'; const app = createApp({}); app.directive('focus',{ mounted(el){ el.focus(); } }); app.mount('#app'); In this example, we defined a directive named `focus`. When an element is inserted into the DOM, the `mounted` hook function will be called, and `el.focus()` will automatically focus on that element. ### 3.2 Using Custom Directives When using custom directives in templates, you need to add the `v-` prefix: ## Example When the page loads, the `input` element will automatically get focus. * * * ## 4. Directive Hook Functions Custom directives can contain multiple hook functions, used to execute specific operations at different lifecycle stages. Common hook functions include: * **mounted**: Called when the element with the directive is inserted into the DOM. * **updated**: Called when the component with the directive is updated. * **unmounted**: Called when the element with the directive is removed from the DOM. ### 4.1 Example: Listening to Scroll Events Suppose we need to perform some operations when the user scrolls the page. We can define a `scroll` directive: ## Example app.directive('scroll',{ mounted(el, binding){ const handler = binding.value; el.addEventListener('scroll', handler); }, unmounted(el, binding){ const handler = binding.value; el.removeEventListener('scroll', handler); } }); In this example, the `mounted` hook function is used to add a scroll event listener, and the `unmounted` hook function is used to remove the listener. ### 4.2 Using the Scroll Directive ## Example Define the `onScroll` method in the component: ## Example methods:{ onScroll(event){ console.log('User is scrolling', event); } } When the user scrolls the `div` element, the `onScroll` method will be called. * * * ## 5. Directive Arguments and Modifiers Custom directives can accept arguments and modifiers. Arguments are the part after the colon in the directive name, and modifiers are the part after the dot in the directive name. ### 5.1 Example: Using Arguments and Modifiers Suppose we need to define a `color` directive that sets the background color of an element based on an argument: ## Example app.directive('color',{ mounted(el, binding){ const color = binding.arg||'red'; const modifiers = binding.modifiers; if(modifiers.bold){ el.style.fontWeight='bold'; } el.style.backgroundColor= color; } }); Use it in the template: ## Example In this example, `blue` is the argument of the directive, and `bold` is the modifier. * * Vue3 Global API](#)