Vue 3.0 Template Directive CheatSheet
Tags: vue, javascript, cheatsheet, webdev
Published: 2023-09-10 08:15:04

# Vue 3.0 Template Directive CheatSheet
This is a cheat sheet that compiles the Vue 3.0 directives I commonly use. Feel free to utilize it while developing your projects.  

- [Vue 3.0 Template Directive CheatSheet](#vue-30-template-directive-cheatsheet)
  - [v-text](#v-text)
  - [Methods](#methods)
  - [defination of atribute](#defination-of-atribute)
  - [v-on:click](#v-onclick)
  - [v-on:mouseover](#v-onmouseover)
  - [v-on:mouseover.stop](#v-onmouseoverstop)
  - [v-on:click.prevent](#v-onclickprevent)
  - [v-model for text](#v-model-for-text)
  - [v-model for radio buttons](#v-model-for-radio-buttons)
  - [computed](#computed)
  - [watch](#watch)
  - [Changing CSS Classes in HTML Elements](#changing-css-classes-in-html-elements)
  - [Specifying Styles in HTML Elements with Data](#specifying-styles-in-html-elements-with-data)
  - [Conclusion](#conclusion)

## v-text
The `v-text` directive is a fundamental directive used to set the text content of an element. It can be particularly useful when you want to bind dynamic data to an element.

The below example uses 'data()' like Vue2 using.  
{% codepen https://codepen.io/fukugit/pen/XWopoLx %}

The following sample code is same as the above one.  
{% codepen https://codepen.io/fukugit/pen/wvRqoPK %}

## Methods
In Vue.js, methods are essential for creating dynamic web applications.
They let you define reusable functions within your Vue components, triggered in response to events or actions.
{% codepen https://codepen.io/fukugit/pen/OJrpMzV %}

## defination of atribute
The following demonstrates the way of specifying an attribute in an HTML element.
{% codepen https://codepen.io/fukugit/pen/poqegpP %}

##  v-on:click
There are several usages of 'v-on:click' in Vue. So, the following example explains two ways to use the directive.
{% codepen https://codepen.io/fukugit/pen/poqNLRj %}

## v-on:mouseover
The following example demonstrates how to obtain the mouse position through the '$event' argument when the mouse is moved.
{% codepen https://codepen.io/fukugit/pen/LYMWGQM %}

## v-on:mouseover.stop
While the following example retrieves the mouse position in a specific area, it stops capturing the mouse position within that particular region.
{% codepen https://codepen.io/fukugit/pen/gOZmPKb %}

## v-on:click.prevent
The 'v-on:click.prevent' directive prevents the default behavior that HTML elements typically offer when clicked. Instead, it invokes a custom method defined by the developer.
{% codepen https://codepen.io/fukugit/pen/zYyZraa %}

## v-model for text
'v-model' enables two-way interaction. HTML elements can receive values from a data object, and conversely, data objects can receive values from HTML elements.
{% codepen https://codepen.io/fukugit/pen/QWzpEeb %}

## v-model for radio buttons
'v-model' can also be used with radio buttons.
{% codepen https://codepen.io/fukugit/pen/LYMWZwd %}

## computed
Methods always run whenever they are invoked, irrespective of whether the dependent properties have changed or not. On the other hand, Computed properties are recalculated every time they are invoked, but only if any of their dependent properties have changed.  
{% codepen https://codepen.io/fukugit/pen/mdaWryv %}

## watch
Watch is rarely used in production; instead, Computed properties are the preferred choice. This is because Computed properties and Watch serve similar functions. However, if you need to work with properties asynchronously, Watch is the better option compared to Computed properties. The key distinction lies in synchronization: Computed properties are synchronous functions, whereas Watch is asynchronous.
{% codepen https://codepen.io/fukugit/pen/vYvxXJM %}

## Changing CSS Classes in HTML Elements
In Vue.js, you can dynamically change HTML CSS classes based on the data in your JavaScript. This flexibility allows you to adapt the styling of your HTML elements in real-time as your data changes.
{% codepen https://codepen.io/fukugit/pen/LYMWzaN %}

## Specifying Styles in HTML Elements with Data
You can define CSS styles for HTML elements using data arrays in Vue.js. This allows you to manage and customize your element styles dynamically from the JavaScript side.
{% codepen https://codepen.io/fukugit/pen/BavWmQP %}


## Conclusion
All the Vue directives discussed above have differences between Vue 2 and 3, making them essential tools in Vue development. These examples are intended to simplify your daily development tasks and enhance your understanding of Vue.js.