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ı.