VueJs ve direktiflere dair yayınladığım önceki 2 yazının (
v-show, v-if / v-else-if / v-else, v-on, v-bind,
v-text, v-html, v-once ve v-for) devamı ve sonuncusu olarak bu başlık altında
v-model,
v-pre,
v-cloak,
v-slot direktiflerine değinmeye çalışacağım.
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.
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 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>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})</script> |
<div id="app">
<h1 v-text="message"></h1>
<input type="text" v-model="message" />
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})</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> |
<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>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
})</script> |
<div id="app">
<h1 v-text="message"></h1>
<h1>{{ reversedMessage }}</h1>
<h1 v-text="reversedMessage"></h1>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
})</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>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
method: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
})</script> |
<div id="app">
<h1 v-text="message"></h1>
<h1>{{ reversedMessage() }}</h1>
<h1 v-text="reversedMessage()"></h1>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
method: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}
})</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..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.
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> |
<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.
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-cloak] {
display:none
}
v-slot <template> ve bileşenlerle (component)
kullanılır. İç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> |
<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>
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ı.
