Vue.js Directive (v-bind,v-once,v-html,v-on)

sinem ünal
2 min readJun 22, 2020

--

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()
}
}
})

--

--

sinem ünal
sinem ünal

No responses yet