Расскажи про директивы во Vue.js: самые используемые

Во Vue.js директивы — это специальные атрибуты с префиксом v-, которые расширяют HTML и позволяют связывать данные с DOM.

Самые используемые директивы:

• v-bind — связывает атрибуты HTML с данными компонента. Например, v-bind:href="url" динамически задаёт ссылку.
• v-model — двунаправленная привязка данных для форм (input, textarea, select).
• v-if — условный рендеринг элемента, элемент добавляется в DOM только если условие истинно.
• v-else / v-else-if — дополнение к v-if для альтернативных условий.
• v-for — рендерит список элементов на основе массива или объекта.
• v-on — слушает события, например, v-on:click="handleClick".

Пример использования:

<template>
  <a v-bind:href="link">Ссылка</a>
  <input v-model="text" />
  <div v-if="isVisible">Показывается, если isVisible true</div>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <button v-on:click="doSomething">Нажми меня</button>
</template>