Vue.js Direktifleri - 3

v-model, v-pre, v-cloak, v-slot

Bu yazıda bahsi geçecek olan v-model direktifi two-way binding olarak ifade edilen özelliği sebebiyle sıklıkla kullanılan direktiflerden biridir. Two-way binding ifadesi Model’deki bir değişikliğin ekranda, ekrandaki bir değişikliğin de eş zamanlı olarak (.lazy kullanımı dışında) Model’de güncellenmesi olarak açıklanabilir. O halde, v-model ile ilgili diğer detaylara geçebiliriz.

v-model

Az önce de belirttiğim üzere sıklıkla kullanılan bir diğer direktif olan v-model sunduğu two-way binding özelliği sayesinde pek çok form elemanıyla ^{1 2} birlikte (value, checked, selected) kullanılabilir. v-model yerine v-bind/v-on kullanıldığına da tanık olabilirsiniz³. Bu durumda bilmeniz gereken, bunun bir zorunluluk olabileceğidir. Diğer durumda v-model ilk tercih olmalıdır.

<div id="app">
 <h1 v-text="message"></h1>
 <input type="text" v-model="message" />
</div>

<script>
// Vue v2.x
new Vue({
 el: '#app',
 data: {
  message: 'Hello World!'
 }
});

// Vue v3.x
Vue.createApp({
  data() {
    return {
      message: 'Hello World!'
    }
  }
}).mount('#app');
</script>

Yukarıdaki örnek en basit şekilde bir v-model işlemi gerçekleştirmektedir. Form elemanı içerisindeki değişikliğin aynı zamanda h1 etiketi içeriğine uygulandığını görebilirsiniz. Örneği biraz değiştirelim ve 3 farklı şekilde (js expression, computed ve method) yineleyelim.

<h1>{{ message.split('').reverse().join('') }}</h1>

Yukarıdaki örnekte message içeriğine doğrudan işlem uygulayabildiğimizi görebilmektesiniz. v-text başlığında da belirttiğim üzere, aşinalık kazandırmak amacıyla paylaştığım bu yöntem pek tavsiye edilen bir yöntem değil. Şimdi, aynı işlemi computed olarak gerçekleştirelim.

<div id="app">
    <h1 v-text="message"></h1>
    <h1>{{ reversedMessage }}</h1>
    <h1 v-text="reversedMessage"></h1>
    <input type="text" v-model="message" />
</div>
<script>
  // Vue v2.x
new Vue({
 el: '#app',
 data: {
  message: 'Hello World!'
 }
 computed: {
  reversedMessage() {
   return this.message.split('').reverse().join('')
  }
 }
});

// Vue v3.x
Vue.createApp({
  data() {
    return {
      message: 'Hello World!'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}).mount('#app');
</script>

Görüldüğü gibi sonuçta bir farklılık yaşanmamakta. computed property ve method kullanımlarına dair ayrıca yazı yayınlacağım için şimilik açıklamayı kısa tutacağım. computed property içeriği uygulandığında, yani bağlı olduğu değişken ekranda gösterildiğinde ön belleğe alınır (cache) ve bu değişken değişmediği sürece tekrar hesaplama yapılmaz ve ilk halini korur. method kullanımında ise her seferinde hesaplama yapılır ve son değer yansıtılır, ön belleğe alma işlemi gerçekleştirilmez. Bu kısa açıklamanın ardından bir de method örneğimizi ekleyelim.

<div id="app">
    <h1 v-text="message"></h1>
    <h1>{{ reversedMessage() }}</h1>
    <h1 v-text="reversedMessage()"></h1>
</div>
<script>
// Vue v2.x
new Vue({
 el: '#app',
 data: {
  message: 'Hello World!'
 }
 method: {
  reversedMessage() {
   return this.message.split('').reverse().join('')
  }
 }
});

// Vue v3.x
Vue.createApp({
  data() {
    return {
      message: 'Hello World!'
    }
  },
  method: {
    reversedMessage() {
    return this.message.split('').reverse().join('')
    }
  }
}).mount('#app');
</script>

Gelelim .lazy, .trim ve .number modifier kullanımlarına.

• .lazy, input yerine etkinlik değişikliklerini dinler. Bu kullanımda, örneğin bir form input’u içerisine girilen metin Enter tuşuna basılarak uygulanabilir. v-model ön tanımlı olarak her tuş (on keypress) veya kopyala/yapıştır (copy/paste) işlemini değerlendirecektir^{4 5}.
• .number, geçerli girdi dizisini sayılara çevirir.
• .trim ise boşlukları (whitespace) tıraşlar.

Yeri geldikçe v-model ile ilgili notlar aktaracağım.

v-pre

Empty directive olarak ifade edilebilir. Herhangi bir expression almaz. v-pre kendi elementi ve alt elementler için derlemenin (compilation) es geçilmesini sağlar. Aşağıdaki gibi bir kullanımda mustaches içeriği uygulanmayacak ve ifade olduğu haliyle tutulacaktır.

<p v-pre>{{ selected }}</p>

Mustaches dışında, herhangi bir yönerge içermeten geniş çaplı etiket yığınlarının derlenmesinin istenmediği durumlarda da kullanılabilir.

v-cloak

Bir diğer empty directive olan v-cloak ViewModel derlemeyi tamamlayana kadar eklendiği element üzerinde kalır. Bir CSS tanımı ile birlikte (örneğin bir div için) derleme süreci tamamlanana, ViewModel hazır olana kadar mustaches ifadelerin gizlenmesi sağlanabilir.

[v-cloak] {
 display:none
}

v-slot

v-slot <template> ve bileşenlerle (component) kullanılır^{6 7}. İçerik için (template, component) dağıtım noktaları olarak görev yapar. Kısaca # ile ifade edilebilir.

<base-layout>
  <template v-slot:header>
    <h1>H1 Heading</h1>
  </template>

  <p>A paragraph.</p>

  <template #:footer>
    <p>A footer info.</p>
  </template>
</base-layout>

Sonuç Olarak

Bu yazı ile birlikte direktifler başlığını da tamamlamış olmaktayız. Örnekler için GitLab > Vue Examples linkine göz atabilirsiniz. Vue.js ile ilgili değineceğim bir sonraki konu: Computed, Method, Watch Kullanımı.