Vue.js Directive (v-bind,v-once,v-html,v-on)
Merhaba,bu yazıda vue.js de kullandığımız directive nedir? nasıl kullanılır? onlara bakacağız.İlk olarak directive işlem yapmamıza olanak sağlayan v- ön eki kullanan tanımlardır. Aslında attribute gibi tanımlanır tek farklı vue.js tarafına şu işlemi yap aksiyonunu gönderir.
v-bind: Herhangi bir attribute’u script (vue instance) içerisindeki property’e bağlar.
<div id="root">
<a v-bind:href="link">Link</a>
</div>
Artık href özelliğine script içerisinde tanımladığımız linki dinamik olarak alabiliriz.Kısaca ”:href” şeklinde de kullanabiliriz.
var root=new Vue({
el:"#root",
data:{
link:"https://vuejs.org/"
}
})
v-once:Html üzerinde süslü parantezler içerisinde bulunan değişken, script kısmında data içerisindeki değeri ne zaman değişirse değişecektir ancak v-once kullandığımızda değerin bir defa kullanılmasını sağlayabiliriz.Kısaca v-once ilk render işlemi sonrasında html üzerinde verinin aynı kalmasını sağlar .
<div id="root">
<p v-once> {{title}} </p>
<p> {{description()}} </p>
</div>
v-once kullanmasaydık “title” içeriği “description” fonksiyonunda değişecek ve ekrana iki satırda da “İyi akşamlar” olarak görüntülenecekti. v-once sayesinde ilk satırda “Merhaba” ikinci satırda “İyi akşamlar” olarak görüntülendi.
var root=new Vue({
el:"#root",
data:{
title:"Merhaba", },
methods:{
description:function(e){
this.title="iyi akşamlar"
return this.title
}
}})
v-html:Vue.js script tarafında yazılan html kodlarını düz metin olarak yorumlar ve çalışamaz hale getirir bunu önlemek için v-html kullanılır.
(!)Süslü parantezler içerisine yazılan herhangi bir property string olarak algılanır.
v-on: Event bağlamak için kullanırız.
<button v-on:click="show">Alert</button>
Örneğin bir butonumuz olsun ve butona tıkladığımızda bir fonksiyon çalıştıralım.
var root=new Vue({
el:"#root",
methods:{
show:function()
{
alert()
}
}})