Ana içeriğe atla

Kayıtlar

Aralık, 2019 tarihine ait yayınlar gösteriliyor

Vue js directive kavrami

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

vue js dinamik component

Vue js dinamik component içerisinde component arası geçişlerde component canlı tutmak için keep-alive elementi kullanılır.Böylece component geçişlerinde componentler destroy edilmediği tekrardan render edilmesi engellemiş oluyoruz. Örnek kullanım <keep-alive>     <component :is="selectedComponent">     </component > </keep-alive> Keep Alice elementi kullandığı zaman render ve destroy işlemi yapılmadığı için created ve destroy lifecycle calismayacaktir.Bu yerine actived ve diactived  lifecycle eklenmistir.