Vue.js Yönergelerinin Temelleri

Vue.js yönergeleri, kütüphaneye bir DOM öğesine bir şey yapmasını söyleyen işaretlemedeki özel belirteçlerdir. Vue tarafından sağlanan özel nitelikler olduklarını belirtmek için v- ile öneklenirler. Yönergeler, Vue.js'nin temel özelliklerinden biridir ve geliştiricilerin DOM'u verimli bir şekilde yönetmelerine olanak tanır.

Bu yazıda, Vue.js yönergelerinin temellerini inceleyecek, en sık kullanılan yönergeleri ve bunların Vue uygulamalarınızda nasıl kullanılacağını ele alacağız.

Vue.js'de Yaygın Olarak Kullanılan Yönergeler

Vue.js'de en sık kullanılan yönergelerden bazıları şunlardır:

• v-bind: Bir veya daha fazla niteliği veya bir bileşen özelliğini dinamik olarak bir ifadeye bağlar.
• v-model: Form girişi, textarea ve select elemanlarında iki yönlü veri bağlaması oluşturur.
• v-if: Bir öğeyi veya bileşeni koşullu olarak işler.
• v-else:v-if için bir else bloğu sağlar.
• v-else-if:v-if için bir else-if bloğu sağlar.
• v-for: Bir dizi veya nesne kullanarak bir öğe listesi oluşturur.
• v-on: Öğelere olay dinleyicileri ekler.
• v-show: Bir ifadeye bağlı olarak bir öğenin görünürlüğünü değiştirir.
• v-html: Bir öğenin iç HTML'sini günceller.

v-bind: Nitelikleri Dinamik Olarak Bağlama

v-bind yönergesi, nitelikleri veya özellikleri bir ifadeye dinamik olarak bağlamak için kullanılır. Örneğin, bir img öğesinin src niteliğini bir veri özelliğine bağlayabilirsiniz:

<template>
  <img v-bind:src="imageSrc" alt="Dynamic Image" />
</template>

<script>
export default {
  data() {
    return {
      imageSrc: 'https://example.com/image.jpg'
    };
  }
};
</script>

v-bind ifadesinin kısaltması basitçe iki nokta üst üste işaretidir (:), dolayısıyla yukarıdaki örnek şu şekilde yeniden yazılabilir:

<img :src="imageSrc" alt="Dynamic Image" />

v-model: İki Yönlü Veri Bağlama

v-model yönergesi, form giriş öğelerinde iki yönlü veri bağlaması oluşturmak için kullanılır. Giriş öğesini ve veri özelliğini senkronize tutar:

<template>
  <input v-model="message" placeholder="Type something..." />
  <p>You typed: {{ message }}</p>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

v-if, v-else-if ve v-else: Koşullu Oluşturma

v-if, v-else-if ve v-else yönergeleri öğelerin koşullu işlenmesi için kullanılır. Bunlar, bir ifadenin değerlendirmesine göre öğeleri koşullu olarak işlemenize olanak tanır:

<template>
  <div v-if="isLoggedIn">Welcome back!</div>
  <div v-else-if="isGuest">Hello, Guest!</div>
  <div v-else>Please log in.</div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: false,
      isGuest: true
    };
  }
};
</script>

v-for: Liste Oluşturma

v-for yönergesi, bir dizi veya nesne üzerinde yineleme yaparak bir öğe listesi oluşturmak için kullanılır. Dizideki her öğe bir döngü kullanılarak oluşturulabilir:

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

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

v-on: Olay İşleme

v-on yönergesi, olay dinleyicilerini DOM öğelerine bağlamak için kullanılır. Tıklamalar, girdiler ve daha fazlası gibi kullanıcı etkileşimlerini işleyebilirsiniz:

<template>
  <button v-on:click="showAlert">Click Me</button>
</template>

<script>
export default {
  methods: {
    showAlert() {
      alert('Button clicked!');
    }
  }
};
</script>

v-on ifadesinin kısaltması at sembolüdür (@), dolayısıyla yukarıdaki örnek şu şekilde yeniden yazılabilir:

<button @click="showAlert">Click Me</button>

v-show: Görünürlüğü Değiştir

v-show yönergesi, bir ifadeye dayalı olarak bir öğenin görünürlüğünü değiştirmek için kullanılır. v-if yönergesinin aksine, öğeyi DOM'dan kaldırmaz; yalnızca display CSS özelliğini değiştirir:

<template>
  <div v-show="isVisible">This is visible!</div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
};
</script>

v-html: HTML'yi oluşturma

v-html yönergesi bir öğenin iç HTML'sini güncellemek için kullanılır. Vue bileşenlerinizde ham HTML'yi işlemeniz gerektiğinde faydalıdır:

<template>
  <div v-html="rawHtml"></div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<strong>Bold Text</strong>'
    };
  }
};
</script>

Çözüm

Vue.js yönergeleri, DOM'u manipüle etmek ve dinamik ve etkileşimli web uygulamaları oluşturmak için güçlü yollar sunar. v-bind, v-model, v-if, v-for, v-on, v-show ve v-html gibi Vue.js yönergelerinin temellerini anlamak, her Vue geliştiricisi için önemlidir. Bu yönergelerde ustalaşarak, Vue.js ile daha sağlam ve özellik açısından zengin uygulamalar oluşturabilirsiniz.