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.
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.
The following sample code is same as the above one.
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.
defination of atribute
The following demonstrates the way of specifying an attribute in an HTML element.
v-on:click
There are several usages of 'v-on:click' in Vue. So, the following example explains two ways to use the directive.
v-on:mouseover
The following example demonstrates how to obtain the mouse position through the '$event' argument when the mouse is moved.
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.
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.
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.
v-model for radio buttons
'v-model' can also be used with radio buttons.
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.
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.
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.
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.
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.
Top comments (0)