Support Online
MirrorLooking Glass
GenixNodeGenixNode
Client Panel
Skip to main content

Using Vue.js Directives: Built-in and Custom Directive Guide

What Will You Learn in This Guide?​

Vue.js makes HTML templates dynamic with directives.
In this guide, you will learn about built-in and custom Vue.js directives.
You will create clean, readable and scalable interfaces with real examples.

What are Vue.js Directives?​

Directives are Vue-specific attributes that run on HTML.
All begin with the prefix v-.
It gives templates the ability to condition, interact, and bind data.

Prerequisites​

  • Knowledge of HTML, CSS and JavaScript
  • Familiarity with Vue.js basic concepts
  • Node.js and Vue CLI for custom directive

1. Conditional Render (v-if, v-else-if, v-else)​

These directives move JavaScript if / else logic into HTML.
If the condition is false, the element is never added to the DOM.

<p v-if="kullanici.ad && kullanici.soyad">
  Hoş geldin, {{ kullanici.ad }} {{ kullanici.soyad }}
</p>
<p v-else-if="kullanici.kullaniciAdi">
  Hoş geldin, {{ kullanici.kullaniciAdi }}
</p>
<div v-else>
  <button>Giriş Yap</button>
  <button>Hesap Oluştur</button>
</div>
  • v-else and v-else-if should be used directly after v-if.

2. Visibility Control (v-show)​

  1. v-show keeps the element in the DOM but hides it.
  2. It applies display: none on the CSS side.
  3. It is more performant for areas that are opened and closed frequently.

<div v-show="girisYapildiMi">
  <p>Panele hoş geldiniz</p>
</div>
<div v-show="!girisYapildiMi">
  <button>Giriş Yap</button>
</div>

  • Difference between v-if and v-show

  • v-if: removes completely from DOM

  • v-show: keeps it in the DOM, just hides it

3. Incident Management (v-on)​

  1. v-on captures user interactions.
  2. @ is used as a shortcut.

<button @click.once="tikla">Bana Tıkla</button>

function tikla() {
  alert('Butona tıklandı')
}

Frequently Used Modifiers​

  1. .once → Works only once

  2. .prevent → Prevents default behavior

  3. .stop → Stops event propagation

4. Data Binding (v-bind and v-model)​

v-bind (One-Way Binding)​

  1. It makes HTML attributes dynamic.
  2. Its shortcut is the character:

<a :href="wikiLink">{&#123; sehir &#125;}</a>

import &#123; computed &#125; from 'vue'

const sehir = 'İstanbul'
const wikiLink = computed(() => `https://tr.wikipedia.org/wiki/$&#123;sehir&#125;`)
v-model (Çift Yönlü Bağlama)
  • Used for form elements.
  • Data and interface work synchronously.

<input v-model="sehir" placeholder="Şehir giriniz" />
<p>Seçilen şehir: {&#123; sehir &#125;}</p>

5. Raw HTML Render (v-html)​

  1. It directly renders HTML in String.

<div v-html="htmlIcerik"></div>

const htmlIcerik = '<p>Bu <strong>HTML</strong> içeriktir</p>'

⚠️ Security Warning:

  1. v-html creates XSS risk on untrusted data.
  2. Use only from safe sources.

6. Creating a Custom Directive​

  1. If what Vue offers is not enough, you can write a special directive.
  2. Below is an example directive named v-tema.

const app = createApp(App)

app.directive('tema', {
  mounted(el, binding) {
    if (binding.value === 'birincil') {
      el.style.color = '#ff6b00'
    } else if (binding.value === 'ikincil') {
      el.style.color = '#2c3e50'
    } else {
      el.style.color = 'black'
    }
  }
})

app.mount('#app')
  • Usage within template:

<p v-tema="'birincil'">Bu yazı turuncudur</p>
<p v-tema="'ikincil'">Bu yazı koyu renklidir</p>

Frequently Asked Questions (FAQ)​

1. Should I use v-if or v-show? If it changes frequently, v-show is preferred, if it is rare, v-if is preferred.

2. Is v-model only for input? No. It can also be used in components.

3. When does a custom directive make sense? In low-level DOM operations.

4. What is the v-bind shortcut? :href is the same as v-bind:href.

Result​

With this guide, you learned Vue.js directives end to end. You've made your interfaces more dynamic, secure and manageable. You can immediately check out GenixNode solutions to run your Vue projects on high-performance infrastructures.