Vuejs Direktifler (Directives)

Direktifler nedir?

Direktifler, v- ile başlayan özel niteliklerdir (attributes) ve görevi DOM’a(Document Object Model) özelleştirilmiş davranışlar uygulatmaktır.

VueJs’de yer alan bazı direktifler aşağıdaki gibidir ;

1-)v-if: Belirlediğimiz bir şarta göre bir elementi oluşturup oluşturmayacağımızı belirler.

2-)v-show: Temelde v-if direktifi ile aynı şeyi yapmaktadır, farkı ise element oluşturulup dom’da display none yada varsayılan şekilde style eklemesi yapmaktadır.

3-)v-for: Tekrar edilmesini istediğimiz element üzerinde kullanarak döngü oluşturur.

4-)v-on: Html taglarına event bağlamak için kullanılır. Event bağlamak için diğer bir yol ise “@” işaretini kullanarak ilgili eventi bağlamaktır.

5-)v-bind: Html içindeki attribute’lere erişmek için kullanılır.Attribute’lere erişmek için diğer bir yol ise “:” işaretini kullanarak ilgili attribute erişilir.

6-)v-model: Html’de form elementlerine two way bind yapmak için kullanır.

Şimdi sırayla öğrenmiş olduğumuz direktifleri örneklendirelim.

V-if

<template>
<div id="app">
<p v-if="v_if">Ekranda Oluştur</p>
<button @click="changeVif()">V-if</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
v_if: true
};
},
methods: {
changeVif() {
this.v_if = !this.v_if;
}
}
};
</script>

V-show

<template>
<div id="app">
<p v-show="v_show">Ekranda Göster</p>
<button @click="changeVshow()">V-show</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
v_show: true
};
},
methods: {
changeVshow() {
this.v_show = !this.v_show;
}
}
};
</script>

V-for

<template>
<div id="app">
<p>V-for</p>
<p v-for="(item,index) in isimler" :key="index">{{item}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
isimler: ["Yasin", "Efem", "Ali", "Ayşe", "Fatma"]
};
},
};
</script>

V-on veya “@”

<template>
<div id="app">
<p>v-on veya @</p>
<button v-on:click="vonClick">v-on Tıkla</button>
<button @click="click">@ Tıkla</button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
vonClick() {
alert("v-on:click Tıklandı");
},
click() {
alert("@click Tıklandı");
},
}
};
</script>

V-bind

<template>
<div id="app">
<p>v-bind</p>
<button v-bind:disabled="button_disabled">v-bind</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
button_disabled: true,
};
},
};
</script>

V-model

<template>
<div id="app">
<p>v-model</p>
<input type="text" v-model="myname">
<p>{{myname}}</p>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
myname: "yasin efem",
};
},
};
</script>

Codesandbox:https://codesandbox.io/s/elastic-meninsky-tml05?file=/src/App.vue

Herkese İyi Çalışmalar. :)