Vuejs Window EventListener Kullanma

Vuejs Window EventListener

Herkese merhabalar bu yazımızda sizlerle beraber vuejs kullanırken window için event listenerları nasıl kullanabiliriz onu görüyor olacağız.Senaryomuzda tarayıcı penceresi resize olduğu zaman sayfamızın arka plan rengini vuejs ile beraber değiştirmeye çalışıyor olacağız.

Proje Oluşturma;

Vue Cli kullanarak proje oluşturmak için 
vue create hello-world

projemizi oluşturduktan sonra src/app.vue dosyamız üzerinde

created() {
window.addEventListener('resize',this.onResize)
},
destroyed() {
window.removeEventListener('resize',this.onResize)
},

created hookunda window a event listener ekleyip ardından destroy olduğu zaman bu listeneri remove edeceğimiz belirtip, eklemiş olduğumuz listener ile onResize adlı fonksiyonun ilgilendiğini belirtip onResize fonksiyonumuzu yazıyoruz.

methods:{
onResize(){
this.color=this.getRandomColor();
},
getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];}
return color
;}},
data(){return{color:"",}},

color adında bir değer oluşturuyorum ve getRandomColor ile rastgele bir renk oluşturacak fonksiyonu yazıp ardından onResize fonksiyonumda rengimi değiştiriyorum ve bu renk değişikliğini ise aşağıdaki gibi;

#app divime style olarak bağlıyorum. Ardından tek yapmam gereken tarayıcı penceresini yeniden boyutlandırmak.

Herkese İyi Çalışmalar Dilerim.