Vue Directives

Directives are special attributes in Vue template syntax with the v- prefix. The responsibility of a directive is to apply behavior to the DOM when the value of its expression changes.

1. v-bind: Bind Attributes

Used to dynamically bind one or more HTML attributes.

<script setup>
import { ref } from 'vue'

const imageUrl = ref('https://vuejs.org/images/logo.png')
const linkUrl = ref('https://vuejs.org/')
</script>

<template>
  <a v-bind:href="linkUrl">
    <img :src="imageUrl" alt="Vue Logo"> <!-- : is shorthand for v-bind: -->
  </a>
</template>

• Shorthand: :

2. v-on: Listen to Events

Used to listen to DOM events and execute some JavaScript code when the event is triggered.

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <!-- When the button is clicked, call the increment method -->
  <button v-on:click="increment">Count is: {{ count }}</button>
</template>

• Shorthand: @

  <button @click="increment">...</button>

3. v-model: Two-Way Binding

v-model is a very powerful directive that creates two-way data binding on form <input>, <textarea>, and <select> elements. It automatically selects the correct way to update the element based on the control type.

<script setup>
import { ref } from 'vue'

const message = ref('Hello Vue!')
</script>

<template>
  <p>Message is: {{ message }}</p>
  <input v-model="message" placeholder="edit me" />
</template>

v-model is essentially syntactic sugar, equivalent to combining v-bind:value and v-on:input.

4. v-if, v-else, v-else-if: Conditional Rendering

Used to conditionally render a block of content based on the truthiness of an expression. This block is only rendered when the directive's expression returns a truthy value.

<script setup>
import { ref } from 'vue'

const awesome = ref(true)
</script>

<template>
  <button @click="awesome = !awesome">Toggle</button>

  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

The v-else element must immediately follow a v-if or v-else-if element, otherwise it will not be recognized.

5. v-show: Conditional Display

Another option for conditionally displaying elements is the v-show directive. Usage is similar:

<template>
  <h1 v-show="ok">Hello!</h1>
</template>

The difference is that elements with v-show will always be rendered and retained in the DOM. v-show simply toggles the element's CSS display property.

• v-if vs v-show:
  • v-if is "true" conditional rendering because it ensures event listeners and child components inside the conditional block are properly destroyed and rebuilt during toggling.
  • v-show has higher overhead because it always renders the element regardless of initial conditions.
  • Choice: If you need to toggle frequently, v-show is better. If conditions rarely change at runtime, v-if is better.

6. v-for: List Rendering

Used to render a list based on an array. The v-for directive requires special syntax in the form (item, index) in items.

<script setup>
import { ref } from 'vue'

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
</script>

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.message">
      {{ index }} - {{ item.message }}
    </li>
  </ul>
</template>

v-for can also be used to iterate over an object's properties.

Importance of :key: key is a special attribute that Vue uses to track the identity of each node, thereby reusing and reordering existing elements. The value of key must be a unique string or number.