Middle+

Tell about the directives in Vue.js: the most used ones.

sobes.tech AI

Answer from AI

In Vue.js, directives are special attributes with the prefix v- that extend HTML and allow binding data to the DOM.

The most commonly used directives:

v-bind — binds HTML attributes to component data. For example, v-bind:href="url" dynamically sets the link.
v-model — two-way data binding for forms (input, textarea, select).
v-if — conditional rendering of an element; the element is added to the DOM only if the condition is true.
v-else / v-else-if — complements v-if for alternative conditions.
v-for — renders a list of elements based on an array or object.
v-on — listens to events, for example, v-on:click="handleClick".

Example of usage:

<template>
  <a v-bind:href="link">Link</a>
  <input v-model="text" />
  <div v-if="isVisible">Shown if isVisible is true</div>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button v-on:click="doSomething">Click me</button>
</template>

Previous Next