What are Vue Directives?

<template>
  <!-- v-if / v-else-if / v-else -->
  <p v-if="show">Visible</p>
  <p v-else>Hidden</p>

  <!-- v-show (toggle display) -->
  <p v-show="show">Toggle visibility</p>

  <!-- v-for -->
  <li v-for="item in items" :key="item.id">
    {{ item.name }}
  </li>

  <!-- v-bind (shorthand :) -->
  <img :src="imageUrl" :alt="imageAlt">

  <!-- v-on (shorthand @) -->
  <button @click="handleClick">Click</button>

  <!-- v-model -->
  <input v-model="text">

  <!-- v-html -->
  <div v-html="htmlContent"></div>
</template>

<template>
  <form @submit.prevent="onSubmit">
  <button @click.stop="onClick">
  <input @keyup.enter="onEnter">
  <button @click.once="onClickOnce">
</template>

// Focus directive
const vFocus = {
  mounted: (el) => el.focus()
}

// Usage: <input v-focus>