Directive Nedir?

Vue.js direktifleri, Vue.js framework'ünün bir parçası olan özel komutlardır ve HTML elementlerine özel davranışlar eklemek için kullanılırlar. Bu direktifler, Vue.js'in reaktif özellikleriyle birleştirilerek, HTML dokümanını Vue.js uygulamasının veri modeli ile senkronize etmeye ve etkileşimli web uygulamaları oluşturmaya olanak tanır.

Vue.js direktifleri, v- öneki ile başlar ve bir HTML elementine eklenerek belirli bir işlevselliği aktive eder. İşte bazı yaygın Vue.js direktifleri:

1. v-bind: HTML attribute'larını dinamik bir şekilde bağlamak için kullanılır. Örneğin, v-bind ile bir elementin href özelliğini belirli bir veriye bağlayabilirsiniz.

   <a v-bind:href="url">Bağlantı</a>

2. v-model: Form elemanları (input, textarea, select) ile ilişkilendirilerek, kullanıcının girdiğini bir Vue.js veri özelliğine bağlamak için kullanılır.

   <input v-model="username" />

3. v-for: Döngü kullanarak bir liste üzerinde işlem yapmak için kullanılır. Örneğin, bir dizi içindeki öğeleri listelemek için kullanılabilir.

   <ul>
     <li v-for="item in items">{{ item.name }}</li>
   </ul>

4. v-if, v-else-if, v-else: Bir şartın doğruluğuna bağlı olarak bir HTML elementinin görünürlüğünü kontrol etmek için kullanılır.

   <p v-if="isUserLoggedIn">Kullanıcı giriş yaptı!</p>
   <p v-else>Giriş yapın</p>

5. v-show: v-if gibi, bir şartın doğruluğuna bağlı olarak bir elementin görünürlüğünü kontrol eder, ancak v-show daha hafif bir yöntemdir ve element sadece CSS ile gösterilip gizlenir.

   <p v-show="isVisible">Bu metin gösterilecek veya gizlenecek</p>

Bu örnekler, Vue.js direktiflerinin çeşitli kullanımlarını göstermektedir. Vue.js direktifleri, HTML ve JavaScript arasında güçlü bir bağlantı sağlar, bu da geliştiricilere daha etkileşimli ve dinamik web uygulamaları oluşturmada esneklik sunar.

Aşağıdaki örnek bu direktiflerin hepsini tek bir bileşende bir arada kullanıyor; çalıştırıp metin kutusuna yazmayı ve düğmeye tıklamayı deneyebilirsiniz:

<template>
  <a v-bind:href="url">Vue.js belgeleri</a>
  <input v-model="username" placeholder="Adınız" />
  <p v-if="username">Merhaba, {{ username }}!</p>
  <p v-else>Lütfen adınızı yazın.</p>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
  <p v-show="isVisible">Bu metin v-show ile gösterilip gizlenir.</p>
  <button @click="isVisible = !isVisible">Göster / gizle</button>
</template>

<script>
export default {
  data() {
    return {
      url: 'https://vuejs.org',
      username: '',
      items: [
        { id: 1, name: 'Vue' },
        { id: 2, name: 'React' },
        { id: 3, name: 'Angular' },
      ],
      isVisible: true,
    };
  },
};
</script>