Vue js directive tanımla
<p v-color="red"> directive kullanimi</p>
Main js içerisinde global olarak tanımlanması
Vue.directive('color',{
bind(el,binding,vnode){
el.style.backgroundColor=binding.value
}
})
Directive çalışabilmesi için directive hook dediğimiz 5 farklı metod bulunur.Directive hook dediğimiz kavram ise componentlerdeki lifecycle kavramı gibi düşünülebilir.
1-bind(el,binding,vnode)
Directive elemente attach olduğu durumda çalışır.
el:directive kullanıldığı elementin adıdır
bindig:directive gönderilen parameterlerin adıdır.
vnode:Virtual dom üzerindeki node verir.
2-inserted(el,binding,vnode)
Element virtual dom eklendiği durumlarda çalışır.
3-update(el,binding,vnode,oldVnode)
Element değişiklik durumlarda çalışır.
oldVnode: değişiklik yapılacak elementi virtual dom üzerindeki eski node belirtir
Önemli:Directive kullanıldığı elementi içerisinde başka elementler var ise ve bu element içerisinde herhangi bir update işlemi varsa ise update metodu çalışmaz.Bunun yerine componentUpdated metodu tetiklenir.
4-unbind(el,binding,vnode,oldVnode)
Bu metodu ise directive element unbind olduğunda çalışır.
Directive Kullanım Örnekleri
Binding içerisindeki arguman kullanarak
Template
<p v-color:background=" 'green' ">
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
Main.js
Vue.directive('color',{
bind(el,binding,vnode){
if(binding.arg=="background"){
el.style.backgroundColor=binding.value;
}
}
})
Binding içerisindeki modifiers kullanarak
Template
<p v-color:background.delay=" 'red' ">
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
Main.js
Vue.directive('color',{
bind(el,binding,vnode){
if(binding.modifiers["delay"]){
setTimeout(()=>{
if(binding.arg=="background"){
el.style.backgroundColor=binding.value;
}
},200)
}
}
})
Local de directive tanımlama
Product.vue adında bir component olduğunu varsayalım.
Product.vue
<html>
<p v-color:background.delay=" 'red' ">
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
</html>
<script>
export default{
directives:{
"color":{
bind(el,binding,vnode){
if(binding.modifiers["delay"]){
setTimeout(()=>{
if(binding.arg=="background"){
el.style.backgroundColor=binding.value;
}
},200)
}
}
}
}
}
</script>
Directive Kullanım Örnekleri
Binding içerisindeki arguman kullanarak
Template
<p v-color:background=" 'green' ">
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
Main.js
Vue.directive('color',{
bind(el,binding,vnode){
if(binding.arg=="background"){
el.style.backgroundColor=binding.value;
}
}
})
Binding içerisindeki modifiers kullanarak
Template
<p v-color:background.delay=" 'red' ">
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
Main.js
Vue.directive('color',{
bind(el,binding,vnode){
if(binding.modifiers["delay"]){
setTimeout(()=>{
if(binding.arg=="background"){
el.style.backgroundColor=binding.value;
}
},200)
}
}
})
Local de directive tanımlama
Product.vue adında bir component olduğunu varsayalım.
Product.vue
<html>
<p v-color:background.delay=" 'red' ">
Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır.
</p>
</html>
<script>
export default{
directives:{
"color":{
bind(el,binding,vnode){
if(binding.modifiers["delay"]){
setTimeout(()=>{
if(binding.arg=="background"){
el.style.backgroundColor=binding.value;
}
},200)
}
}
}
}
}
</script>
Yorumlar
Yorum Gönder