# Vue Directives and Modifiers This is very basic, orientational guide about Vue directives and modifier. For deeper understading check official Vue documentation. ## v-cloak This directive will wait for Vue app to mount itself into document and then it removes itself to whatever it is applied to. It's useful for preventing a flash of un-styled content. ```html

``` ## v-model The **v-model** directive provides two-way data binding between an input element and a data property in your application. ```js

... ``` ### v-model Modifiers - **.lazy**: Updates the data property on **change** events instead of **input**. - **.number**: Casts the input value as a number. - **.trim**: Automatically trims whitespace from the input. ```html ``` ## v-bind This directive allows you to dynamically bind an HTML attribute to a value. ```html

``` **Shorthand:** ```html

Google

``` ## v-html The **v-html** directive renders raw, unescaped HTML. Be cautious when using this directive, as it can expose your application to XSS attacks if the content is user-provided. ```html

``` ## v-on The **v-on** directive attaches an event listener to an element. ```html ``` **Shorthand:** @ ```html ``` We can simulate the **v-model** directive by combining **v-bind** and **v-on**: ```html ``` - **:value**: Sets the initial value. - **@input**: Listens for the input event to update the value. ### Passing Data with Events The **$event** variable can be used to pass the native DOM event object to your method. ```html ``` ### Event Modifiers - **.stop**: Prevents event propagation. - **.prevent**: Prevents the default event behavior. - **.self**: Only triggers the handler if the event originates from this element. - **.capture**: Uses capture mode for the event listener. - **.once**: The event will be triggered at most once. - **.passive**: Improves performance on mobile devices by indicating that the event listener will not call **preventDefault()**. ```html ``` ### Keyboard Events and Modifiers - **.enter** - **.tab** - **.delete** (captures both "Delete" and "Backspace" keys) - **.esc** - **.space** - **.up** - **.down** - **.left** - **.right** ```html ``` ### System Modifier Keys - **.ctrl** - **.alt** - **.shift** - **.meta** (Command key on Mac, Windows key on Windows) ```html ``` ## v-if, v-else, v-else-if These directives are used for conditional rendering. **v-if** will only render a block if the expression is true. **v-else** and **v-else-if** can be used to create more complex conditional logic. ```html

Not A or B

``` ## v-show Similar to **v-if**, **v-show** also conditionally displays an element. The key difference is that **v-show** always renders the element in the DOM and toggles its visibility using the CSS **display** property. ```html

Hello!

``` ## v-for This directive is used to render a list of items based on an array. It iterates over the source data and renders the element for each item. ```html

{{ item.text }}

``` ## v-text The **v-text** directive updates an element's **textContent**. It's a safer alternative to **v-html** when you only need to render plain text. ```html {{msg}} ``` ## Custom Directives A custom directive is defined as an object containing lifecycle hooks. These hooks receive the element the directive is bound to. ### Creating a Custom Directive ```html ``` If a custom directive is not defined in **script setup** it can be defined by **directives** option. ```js export default { setup() { /*...*/ }, directives: { // enables v-focus in template focus: { /* ... */ }, }, }; ``` There's also common practice to register custom directives globally at the app level. ```js const app = createApp({}); // make v-focus usable in all components app.directive("focus", { /* ... */ }); ``` ### Hook Arguments Directive hooks are passed several arguments: - **el**: The element the directive is bound to. This can be used to directly manipulate the DOM. - **binding**: An object containing properties like **value**, **arg**, and **modifiers**. Here's a more advanced example that uses the **binding** argument to create a **v-color** directive: ```js app.directive("color", (el, binding) => { // set the element's background color el.style.backgroundColor = binding.value; }); ``` Now you can pass a color value to the directive: ```html

This will have a red background

```

Vue Directives and Modifiers

Useful Git Commands List

Cookie Consent