Hack Frontend Community

Main Directives in Vue.js

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.

v-if / v-else / v-else-if

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.

v-for

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.

v-bind

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".

v-model

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:

  • For primitive values (string, number) works without problems.
  • For objects and arrays better make copies to avoid unexpected changes.

v-on

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".

v-show

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:

  • If element is often hidden and shown, better use v-show, as it simply changes display: none.
  • If element is rarely needed, better v-if, as it completely removes element from DOM.

Summary

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.