Loading...
Loading...
Vue.js uses directives — special attributes that control DOM element behavior. They allow dynamically changing markup, managing events, binding data and performing other important tasks.
These directives are used for conditional element display depending on application state.
<template>
<p v-if="isLoggedIn">Welcome!</p>
<p v-else>Please log in.</p>
</template>
<script setup>
import { ref } from 'vue';
const isLoggedIn = ref(false);
</script>
v-if displays element only if isLoggedIn is true.v-else shows if isLoggedIn is false.ref(false) creates reactive state that can be changed.Allows displaying array data, creating elements dynamically.
<template>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref(['Apple', 'Banana', 'Orange']);
</script>
v-for iterates over items array, creating <li> for each element.:key="index" helps Vue efficiently update list.Don't overuse v-if inside v-for:
This can lead to low performance. Better to filter data before displaying it.
Allows dynamically changing element attributes, for example, src, class, style and others.
<template>
<img v-bind:src="imageUrl" alt="Image" />
</template>
v-bind:src="imageUrl" dynamically changes image source.Shorten v-bind:
Instead of v-bind:src="imageUrl" you can write :src="imageUrl".
Allows binding data with form elements.
<template>
<input v-model="text" placeholder="Enter text" />
<p>You entered: {{ text }}</p>
</template>
v-model binds text with <input>, automatically updating <p>.Be careful with v-model:
Used for adding event handlers, similar to addEventListener.
<template>
<button v-on:click="sayHello">Click me</button>
</template>
<script setup>
const sayHello = () => {
alert('Hello, world!');
};
</script>
v-on:click="sayHello" adds click handler.sayHello() is called when button is clicked.Shorten v-on:
Instead of v-on:click="sayHello" you can write @click="sayHello".
Differs from v-if as it hides element using display: none, not removing it from DOM.
<template>
<p v-show="isVisible">This text can be hidden.</p>
</template>
v-show="isVisible" controls visibility through display: none.isVisible = false simply hides element, not removing it from DOM.Use v-if and v-show depending on situation:
Vue.js directives are powerful tool for managing markup and element behavior on page. They help make code cleaner, more convenient and readable.
Using directives, you can easily manage display, event handling, data binding and lists. Understanding these key directives will significantly ease Vue.js development and make your code more efficient.