Vue.js Lifecycle Hooks Anlatımı

Vue.js Lifecycle Hooks Anlatımı

  Haziran 20, 2019    Gökhan Krl

---

Vue.js Lifecycle Hooks

Türkçesi biraz değişik gelebilir ama aslında çok net ve anlaşılabilir bir çevirisi var. "Lifecycle Hooks" yani "Yaşamdöngüsü Kancaları" nedir bunu işleyeceğiz.

Bir örnek ile anlamaya çalışalım, elinizde bir çark var. A, B, C, D noktaları var ve çark döndükçe bu noktalara temas edecek. İşte bu noktaları programın içerisinde çalışan kod blokları olarak alın.

Mesela A fonksiyonu, B fonksiyonu olacak şekilde kabul edelim. A 'ya geldiğinde A içerisindeki kodlar işlenecek sonra da diğerleri. Buna Yaşamdöngüsü diyelim. Şimdi de kodlar çalışırken A ' veya B 'ye uğramadan veya her ikisi arasında bir işlem yapmak istiyorsak ne yaparız ?

Yaşamdöngüsünü bir anlık ta olsa durdurmamız gerekir. İşte burada Kancalar devreye giriyor. Yani A, B, C fonksiyonları çalışırken araya A > A 'dan önce bunu yap > B > C > D 'den önce bunu yap > E şeklinde bu döngüye müdahalede bulunuyoruz.

İşte her Vue örneği aslında bu Yaşamdöngüsü şeklinde çalışıyor ve bizlere bu döngü içerisinde çeşitli yerlere müdahale etme imkanı sunuyor.

Lifecycle Hooks Diyagramı
Öncelikle diyagrama bir göz atalım.

Yukarıdaki diyagram herşeyi açıklıyor aslında. Aşağıda bu diyagram içerisindeki fonksiyonları açıklamasıyla verdim. "before", önce ve "after", sonra demek.

// Uygulama oluşturulmadan önce
beforeCreate()
// Uygulama oluşturulduktan sonra
created()
// Uygulamaya bir etiket mount edilmeden hemen önce
beforeMount()
// Mount edildikten sonra
mounted()
// DOM verisi güncellenmeden hemen önce
beforeUpdate()
// DOM güncellendikten sonra
updated()
// beforeDestroy yani uygulama dağıtılmadan önce
beforeDestroy()
// Uygulama dağıtıldıktan sonra çalışır
destroyed()

Bunların ne olduklarını açıkladık listeledik şimdi detaylarına inelim ve aşama aşama görelim.

1. beforeCreated() ile uygulama henüz oluşturulmadan önce yani data 'lar ve event 'lerden önce istediğinizi bu fonksiyon içerisinde çalıştırabilirsiniz. 
2. Bundan sonra da created() yani uygulama oluşturuldu ve bu fonksiyon içerisinde uygulama oluşturulduktan sonra yapılacak bir şey varsa kullanılır.
3. ve aşağı doğru inerken program bir soru soruyor: "el" var mı? Görüyoruz uygulamada ilk olarak "el" degerini girip etikete bağlıyorduk. Peki ya bağlı değilse ? O zaman program diyor ki uygulama.$mount("#etiket") girildiği zaman devam et. (Hani mount etmenin ikinci yöntemiydi bu($mount("#etiket")))
4. "el" işlemini sorguladıktan sonra bir soru soruyor "template" degeri ile bir şablon girilmiş mi. Eğer varsa render fonksiyonu ile derle, yoksa "el" ile bağlı olan etikete derle. (Biz başladığımızdan bu yana hep "el" kullandık)
5. Mount edilmeden hemen bir tık öncesinde beforeMount() fonksiyonuna geçiyor.
6. Ardından $mount işlemi yapılıyor. DOM verisi listeleniyor ve sonrasında mounted() fonksiyonuna geçiyor. Eğer listeleme tarzında işlemler kullanacaksanız sık kullanacağınız aşama.
7. Şimdi mounted 'den sonra süreç ikiye ayrılıyor. Birisi diyagramda gördüğünüz üzere beforeUpdate() -> Update(), diğeri de beforeDestroy() -> destroyed()
8. sayfada bir update işlemi yaparsanız, mesela ürün listelediniz ve "Sil" deyip listeyi db 'den tekrar çekip listelediniz. Sonuç olarak veri değişikliği oldu o zaman beforeUpdate() yani güncellemeden hemen önce ve sonrasında updated() fonksiyonu ile DOM verisi tekrar güncellendikten hemen sonra.
9. Yukardakilerin hepsi anlaşılır fakat destroy görmediğiniz bir şey. Destroy bir Vue uygulaması üzerinden tüm direktiflerinin, eylemlerinin(events) ve alt çocuk örneklerinin dağıtılması yani kaldırılmasıdır. Örneğin açtığınız etiket içerisindeki tanımladığınız hiç bir eylemi bir daha kullanamazsınız. Ancak bu etiketin boşalması, silinmesi vs. durumu değil. Sadece o etiket üzerindeki işlemlerinizi kullanamazsınız. Listelediğiniz veriler son haliyle orada kalır.

Bir uygulama aşağıdaki şekilde dağıtılır.

uygulama.$destroy()


Bir örnek uygulama ile bu anlatımı da bitireceğim. Baştan aşağı lifecycle hooks ile tasarlanmış bir uygulama hazırladım. Aşağıya kodları ve jsfiddle önizlemesini paylaştım. Sayfa ilk açıldığında beforeCreate -> created çalışacak, "Başlat" dediğimizde $mount edecek, "Değiştir" dediğimizde veri değeri değişecek ve beforeUpdate -> updated çalışacak ardından "Uygulamayı dağıt" denildiğinde $destroy devreye girecek.

Ek olarak belirteyim ben alert() kullandığım için veri değeri güncellenmeden önce uyarı çıkıyor gibi duruyor ancak alert() güncelleme işlemine paralel değil daha erken davranıyor. Bu yüzden veri güncellemesi sonra yapılıyor gibi duruyor.

Bu yazımda burada bitmiş bulunuyor. Bir sonraki yazımda görüşmek üzere...

Yazıyı Oku...

Vue.js Bileşenler

Vue.js Bileşenler

  Haziran 19, 2019    Gökhan Krl

---

Vue.js Bileşenler

Bu yazımda Vue Bileşenleri 'ni anlatacağım. Bileşenler sayfa içerisinde kullandığımız hazır şablonlardır. Bileşenler tıpkı bir Vue uygulaması gibi çalışır ancak amaçları farklıdır.
Klasik bir bileşen yapısı aşağıdaki gibidir.

Aslında düşündüğümüz zaman bir web sayfasında her alan bir bileşendir. Mesela sayfanın header kısmı yani <header> etiketi içerisindekiler ile beraber bir bileşendir.

Bileşenleri oluşturur ve tekrar tekrar sayfada kullanırız. Örneğin bir e-ticaret sitesini düşünün her zaman ürünlerin listelendiği bir sayfası ve bu ürünleri sayfa içerisinde bir kart içerisinde göstermek zorunda. Ancak bu kartları hem anasayfada hem de herhangi bir ürün sayfasının alt kısmında diğer ürünler olarak göstermek zorunda. Bunun için her sayfaya bu bileşeni kopyala yapıştır yapmak mı daha doğru yoksa tek bir bileşen haline getirip istediği yere sadece <urun-karti> şeklinde listelemesi mi ?

Tab ki bileşen sistemi öte yandan bu bileşeni tekrar tekrar düzenlediğinde tüm sayfadaki ürün kartları da eşzamanlı olarak bu değişimle birlikte görüntülenecek. Böyle de bir avantajı var.

Bir bileşen aşağıdaki gibi oluşturulur:

Vue JS
Vue.component('urun-karti',

{ 

template: '<li>Yepyeni mobilyalar</li>' 

})

<ol>

<!-- Burada urun-karti çağırılacak ve <li> elementi dönecek -->

 <urun-karti></urun-karti>

</ol>

Bu kullanım sade ve sadece tek bir "Yepyeni mobilyalar" çıktısını üretmekten öteye geçemez. İşimizi daha da profesyonelleştirelim.

Burada prob özelliğini kullanacağız ve bir Vue uygulaması içerisindeki bir data 'yı önce bileşen etiketi içerisinde v-bind:xxx şeklinde bağlayacağız ve bunu probs['xxx'] şeklinde bileşen içerisine alacağız.

Tam olarak anlamadıysanız örneği inceleyin.

Vue JS Bileşeni

// Bileşeni oluşturduk

Vue.component('urun-karti', 

{ 

// probs ile etiket üzerindeki "veri" attribute 'unu aldık.

props: ['veri'], 

template: '<li>{{ veri.urunIsmi }}</li>' 

})

HTML

<!-- Listelenecek etiketimizi oluşturduk -->

<div id="urunleri-listele">

<ol> 

<!-- Burada önce v-for ile verileri urun 'e attık sonra da v-bind ile "veri" attribute 'una bağladık -->

 <urun-karti v-for="urun in urunler" v-bind:veri="urun"></urun-karti>

</ol>

</div>

Vue JS

//Uygulamamızı oluşturduk ve ürünler adında dizimizi oluşturduk

var uygulama = new Vue({

el: '#urunleri-listele', 

data: { 

urunler: [ 

{ id: 0, urunIsmi : 'Dolap' }, 

{ id: 1, urunIsmi : 'Sandalye' }, 

{ id: 2, urunIsmi : 'Yeni masa gıcır gıcır' } 

] 

} 

})

Bu örneğin çıktısını aşağıdan inceleyebilirsiniz

probs içerisinde farklı attribute 'lar da çağırıp bileşen içerisinde kullanabilirsiniz. Örneğin probs['id','value','class'] şeklinde kullanabilirsiniz.

Bileşenler yazım bu kadar, bundan sonra Lifecycle Hooks(Yaşamdöngüsü Kancaları) 'u anlatacağım. Görüşmek üzere...

Yazıyı Oku...

Vue.js Koşullar ve Döngüler

Vue.js Koşullar ve Döngüler

  Haziran 19, 2019    Gökhan Krl

---

Vue.js Koşullar ve Döngüler

Vue içerisindeki Koşulları ve Döngüleri anlatmaya çalışacağım. Daha önce direktiflerden bahsetmiştim. Şimdi bu iki özellik de birer direktif olarak çalışmakta. Ancak bunlar Vue içerisinde tanımlanmış direktiflerdir.

Koşullar
İf direktifini inceleyelim.

Vue JS
var uygulama = new Vue(
{
el: '#icerik',
data: {
goster: true
}
})

HTML
<div id="icerik">

<span v-if="goster">Görüntüleniyor</span> 

</div>

Yukarıdaki "v-if" örneği:

En basit kullanımı budur. Peki devamını getirelim, yani else, else if kullanalım.

HTML

<div id="icerik">

<span v-if="goster == 1">Deger: 1</span> 

<span v-else-if="goster == 2">Deger: 2</span>
<span v-else">Ne 1, ne de 2</span>

</div>

Döngüler

Döngüleri gösterelim. Uygulama içerisinde bir dizi tanımlayalım ve içerisindeki verileri HTML etiketi içerisinde döndürelim.

Vue JS

var uygulama = new Vue({

el: '#icerik', 

data: { 

veriler: [ 

{ isim: 'Ali' }, 

{ isim: 'Veli' }, 

{ isim: 'Metin' } 

] 

} 

})

HTML

<div id="icerik">

<ol> 

<li v-for="veri in veriler"> {{ veri.isim}} </li> 

</ol>

</div>

yukarıdaki örnekte de verileri içerisindeki veriyi <li> olarak listeleme etiketi içerisinde yazdırdık. Örneği aşağıdan inceleyebilirsiniz.

İsterseniz diziyi anahtarlarıyla beraber yazdırabilirsiniz.

HTML
<div id="icerik" class="p-4">
<p v-for="(veri, key) in veriler">
  <b>{{key}}.</b> {{ veri.isim}} </p>
</div>

Yukarıdaki örneğin çıktısı:

Son olarak söylemek istediğim aynı etiket içerisinde v-if ve v-for direktiflerini beraber kullanmayın.

Tasarımcılara bu konuda cazip gelen iki durum var:

• <li v-for="kullanıcı in kullanıcılar" v-if="kullanıcı.aktifMi"> bunu bu şekilde değil de kullanıcılar verisini döndürmeden önce aktifKullanicilar diye bir değer oluşturup listelenecekler buraya filtre ile atılabilir sonra listelenebilir.(filterelere değineceğiz anlaşılması açısından değindim)
• ikincisi bir li elemanında if ve for kullanacaksanız öncesinde bir etiket açın if direktifini girin daha sonrasında li içerisinde for kullanarak verilerinizi listeleyin. Örn:

<ul v-if="goster">

      <li v-for="kullanici in kullanicilar">{{kullanici.isim}}</li>

</ul>

Bu dersimiz de burada bitti. Bundan sonra Components yani Bileşenleri işleyeceğiz. Görüşmek üzere...

Yazıyı Oku...

Vue.js Direktifler

Vue.js Direktifler

  Haziran 19, 2019    Gökhan Krl

---

Vue.js Direktifler

Vue.js ile bir elemente özellik atamak veya kontrol sağlamak için direktifler kullanılır. Mesela önceki dersimizde method 'lardan bahsetmiştim. onclick ve onfocus gibi özellikleri direktif olarak kullanıyoruz.

v-html
Örneğin bir Vue uygulamasında bir data içerisinde bir HTML kodu bulunsun.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      veriHTML: "<b>Gökhan</b>"
}
})

Şimdi veriHTML değerini {{ veriHTML }} olarak yazdırabiliriz ancak sayfada HTML olarak değil string olarak görüntülenecektir. Bunun için "v-html" direktifini kullanacağız.

HTML
<div id="anasayfa">
      <p v-html="veriHTML"></p>
</div>

Böylece değeri HTML kodu olarak p etiketi içerisinde görüntüledik.

v-show
Bir başka direktif de "v-show" dur. Eğer veri true dönerse etiketi görüntüleyecektir, false dönerse etiket yok olacaktır. v-show ekranda display:block|none; işlemi görecektir. v-if gibi etiketi komple ortadan kaldırmaz.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      veri1: "Merhaba",
      veri2: true,
      veri3: false
}
})

HTML
<div id="anasayfa">
      <p v-show="veri1">{{ veri1 }}</p>
      <p v-show="veri2">{{ veri2}}</p>      <p v-show="veri3">Çalışmayacak</p>
</div>


• veri1 görüntülenecek ve Merhaba yazacaktır.
• veri2 görüntülenecek ve true yazacaktır.
• veri3 ise false olduğu için görüntülenmeyecektir.

v-model
Bir diğer direktif v-model bu direktif ile reaktif olarak input girişi yapılmaktadır.

Vue JS
var uygulama = new Vue({


el: "#anasayfa",
data:{
      inputGiris: "Merhaba"
}
})

HTML
<div id="anasayfa">
      <input type="text" v-model="inputGiris" />
      <p>{{ inputGiris }}</p>
</div>


v-model input örneği:
v-bind
Son olarak yoğun olarak kullanacağımız v-bind direktifinden bahsedeceğim. v-bind ile bir element içerisinde istediğimiz attribute 'a işlem yapabiliyoruz ve istersek isteğe bağlı attr değeri ekleyebiliyoruz.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      sinifAdi: "Merhaba",
      idDegeri: "paragrafim"
}
})


HTML
<div id="anasayfa">
<p v-bind:class="sinifAdi" v-bind:id="idDegeri">Gökhan Korul</p>
</div>

İstersek class ataması yaparken bir if koşulu da kullanabiliriz. Mesela 2 adet butonumuz var hangisi tıkalırsa ona aktif(active) sınıfı eklemek istiyoruz.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      btn1:1,
      btn2:2
},
methods: {
aktifEt(id) {
      if (id == 1) {
        this.btn1 = 1
        this.btn2 = 0
        } else if (id == 2) {
        this.btn2 = 1
        this.btn1 = 0
        }
      }
}
})

HTML
<div id="anasayfa" class="p-2">
   <a href="#"
   v-bind:class="[btn1 == 1 ? 'active' : '']"
   v-on:click="aktifEt(1)"
   class="btn btn-primary btn-lg">
      Anasayfa
   </a>
   <a href="#"
   v-bind:class="[btn2 == 1 ? 'active' : '']" 
   v-on:click="aktifEt(2)"
   class="btn btn-primary btn-lg">
      Ürünler
   </a>
</div>

Burada btn1 ve btn2 adında iki data verisi oluşturduk ve bunlardan hangisi 1 ise o class içerisinde active yazacak şeklinde a etiketi v-bind:class içerisinde koşul oluşturduk. Tabiiki böyle kullanmayın :) Sadece örnek olsun diye böyle kodladım sizin daha usta örnekler yapacağınızdan eminim.

Butonu akif et örneği:

Bir sonraki yazımda Koşullardan ve Döngülerden bahsedeceğim. Görüşmek üzere...

Yazıyı Oku...

Vue.js data ve methods

Vue.js data ve methods

  Haziran 17, 2019    Gökhan Krl

---

Vue.js data ve method 'lar

Klasik bir Vue uygulamasının nasıl oluşturulduğunu öğrenmiştik. Şimdi tekrar Vue örneğini bir hatırlayalım.

var vm = new Vue({ 

// özellikler 

})

Daha sonra verilerimizin tamamını içerisinde barındıracağımız data nesnesini ekleyelim.

var vm = new Vue({ 

data {
      veri:" "

} 

})

Data ve Method 'lar

Yukarıda data içerisinde veri adında bir değer oluşturduk ve şimdi bu örneğe bazı veriler eklemeye çalışalım.

vm.veri = 2;

Bu şekilde veri 'ye "2" değerini verdik. Vue reaktif olduğu için hemen tepki verecektir. Örneğin bir önceki derste de anlattığım gibi {{ veri }} şeklinde sayfanın herhangi bir yerinde bu data 'yı kullanacak olsaydık anlık olarak sayfada da "2" yazdığını görecektik.

Aynı şekilde bir Vue uygulaması içerisinden bir data 'ya ulaşmak isterseniz aşağıdaki örneği de kullanabilirsiniz.

vm.$data.veri

Ayrıntılara ilerde değineceğiz. Bu uygulamaya dışardan bir değer almak istersek de aşağıdaki gibi bir örnek uygulayabiliriz.

var deger = "Merhaba";

var vm = new Vue({ 

data {
      veri: deger 

} 

})

Değer değişkenini veri içerisine attık. 

Şimdi ise method 'lara değinelim. Bildiğimiz onclick ve onfocus gibi olayları Vue 'da methods olarak kullanırız ve klasik olarak JS ile yaptığımız işlerin aynısını Vue örneği içerisinde yaparız. Bir onclick olayı örneği yapalım.

Vue JS

var vm = new Vue({

el:"#uygulama",

data {
      veri:"Merhaba"

} 

})

HTML

<div id="uygulama"> 

<p>{{ veri }}</p> 

<button v-on:click="veri = 'Selam'">Değiştir</button> 

</div>

Yukarıdaki örnekte "Değiştir" tıklanınca bir event tetiklenecek ve method kullanmış olacağız. Böylece veri değişkenine "Selam" değerini vermiş olacağız. 

Şimdi daha detaylı olarak onclick içerisinde bir fonksiyon devreye sokalım. Bunun için Vue içerisine data 'nın hemen altına methods:{ } nesnesini ekliyoruz ve nesne parantezlerini açıyoruz. Bundan sonra fonksiyonlarımız burada oluşturacağız. Bir örnek:

 

Vue JS

var vm = new Vue({

el:"#uygulama",

data {
      veri:"Merhaba"

},

methods:{

degistir() {

   this.veri = "Selam ben Gökhan";

  }

}

})

HTML

<div id="uygulama"> 

<p>{{ veri }}</p> 

<button v-on:click="degistir()">Değiştir</button> 

</div>

Şimdi de butona tıkladığımızda "Selam ben Gökhan" yazacaktır ve aynı işlemi bu sefer bir fonksiyon(method) tanımlayarak yaptık. Burada son olarak dikkat etmişsinizdir, data içerisindeki verilere ulaşmak için uygulama içerisinde her zaman this.veri şeklinde ulaşırız.

Bu dersimizde burada bitmiş bulunuyor. Görüşmek üzere...

Yazıyı Oku...

Vue.js Söz Dizimi

Vue.js Söz Dizimi

  Haziran 15, 2019    Gökhan Krl

---

Vue.js Sözdizimi

Vue.js 'in sözdizimi(Syntax) ile devam edelim. Bir Vue uygulaması oluşturmak için "Vue()" sınıfını çağırmamız gerekir.

new Vue()

Sınıfı çağırdıktan sonra içerisine gerekli verileri tanımlamak için nesne parantezlerini açıyoruz. Daha sonra Vue içerisinde tanımlı olan nesnelere gerekli verileri tanımlıyoruz. Bu veriler şu şekildedir.

new Vue({
el:"#div-etiketi",
data:{
      veri:"Gökhan"
}
})

En yukarıdaki "el" bizim bu çağırdığımız uygulamayı hangi etiket içerisinde kullanacağımızı tanımlar. Burada işlem yapacağımız etiketi belirleriz. Böylelikle bu etiket ve alt elementleri üzerinde tüm işlemlerimizi gerçekleştirebileceğiz.

data etiketi ise adından da anlaşılacağı üzere bu uygulama içerisinde kullanacağımız tüm verilerimizin tutulduğu alandır.

Şimdi uygulamayı uygulama değişkenine aktaralım ve #div-etiketi elementi içerisinde basit bir uygulama yapalım.

JS
var uygulama = new Vue({
el:"#div-etiketi",
data:{
      veri:"Gökhan"
}
})

HTML
<div id="div-etiketi">
<h3>{{veri}}</h3>
</div>

Yukarıdaki örnekte de gördüğünüz üzere data içerisindeki bir veriyi {{ }} parantezleri içerisinde çağırıyoruz. Bu örnekte "#div-etiketi" içerisinde "Gökhan" yazacaktır.

Şimdi Console 'u açın ve uygulama.veri yazın, karşınıza verdiğimiz değer gelecektir. Bu değeri değiştirin ve div etiketi içerisinde de değişimi gözlemleyin.

Buraya kadar söz dizimini ve temel mantığını anladık. Bundan sonra artık kullanılan özelliklere giriş yapacağız.

Yazıyı Oku...

Vue.js Kurulumu/Kullanımı

Vue.js Kurulumu/Kullanımı

  Haziran 15, 2019    Gökhan Krl

---

Vue.js Kurulumu/Kullanımı
Biz Vue.js 'i tarayıcı üzerinde dist olarak kullanacağız. Yani tarayıcıda direkt kütüphane ile çağıracağız. NPM üzerinden kullanmak isteyen varsa aşağıdaki linkten CLI 'yi yükleyebilir.

https://vuejs.org/v2/guide/installation.html#CLI



CDN 'yi Ekle
Şimdi, tarayıcımızın <head> içerisine aşağıdaki kodu ekleyerek Vue.js 'i sayfamıza dahil edelim.

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

Yok eğer doğrudan site dizinine eklemek istiyorsanız. Aşağıdaki linki ziyaret edin ve oradan Procuct Version 'u bilgisayarınıza indirip. Site dizinine atın.

https://vuejs.org/v2/guide/installation.html#Direct-lt-script-gt-Include

Yazıyı Oku...

Vue.js 'e Giriş

Vue.js 'e Giriş

  Haziran 14, 2019    Gökhan Krl

---

Merhaba arkadaşlar, Vue.js Dersleri başlığı altında Vue ile ilgili tüm bilgileri sizlere elimden geldiğince aktarmaya çalışacağım. Burada bir giriş yazısı ile başlayıp küçük bir örnek ile de bitirmek istiyorum.

Nedir ?
Çok fazla detaya girmek istemiyorum çünkü React ve Angular 'ı duymayan herhalde yoktur. Vue 'da diğer kütüphaneler gibi Model ve View kısmı üzerinde eşzamanlı etkileşimi sağlar. Aynı sayfa üzerinde aktif olarak içeriklerinizi yenilemenizi ve işlem yapmanızı sağlar. Web sayfalarınızı daha pratik ve kullanışlı hale getirir.

Vue 'da herşey reaktiftir. Örneğin bir .js dosyası oluşturup sayfaya dahil edin ve aşağıdaki örneği girin;

var app3 = new Vue(

{

  el: '#app-3', 

  data: { 

    veri: "Merhaba" 

} 

})

Şimdi Console 'u açın ve app3.veri yazıp enterlayın "Merhaba" yazısını alacaksınız. İsterseniz buna yeni bir değer girin o değeri alacak ve yazacaktır.

İşte uygulamalarımızı kodlarken sayfa üzerinde sürekli aktif olarak farklı işlerinizi sadece bir tık ile Vue üzerindeki bir değişkene veri aktarıp ardından farklı işlemleri otomatik olarak tetikleyebileceğiz.

Vue Öğrenmek İçin Ne Gerekli ?

Orta düzeyde Javascript bilmeniz yeterli. Özellikle Javascript Nesnelerini iyi bilmeniz gerekiyor. Çünki çalışmalarımızın temeli zaten buna dayanıyor. Javascript 'te herşey bir nesnedir ve bu yüzden bu konuda eksiğinizin olmaması yararınıza olur. Bundan sonraki yazımızda Vue 'nun sözdizimi ile başlayalım.

Yazıyı Oku...

CSS Conic Gradient Kullanımı

CSS Conic Gradient Kullanımı

  Haziran 14, 2019    Gökhan Krl

---

Giriş
Diğer bir çok gradient efekti gibi henüz yeni sayılabilecek farklı bir gradient özelliği. Conical Gradient henüz tarayıcıları çoğu tarafından desteklenmese de popüler tarayıcılar arasında kullanılabilecek bir özellik.

Örneklerle gösterelim,
İstediğiniz kadar renk atayabilirsiniz. Soldan başlayarak en son renk paletine kadar dairesel bir şekil ile karşımıza çıkmakta.

Sözdizimi
Conic Gradient aşağıdaki şekilde parametre alır.

conic-gradient() = conic-gradient(

 [ from <açı> ]? [ at <pozisyon> ]?, <renkler> 

)

Aşağıda en basit haliyle kullanımı örnek gösterilmiştir

.conic-gradient { 

background: conic-gradient(#fff, #000); 

}

from <açı> yani örnek olarak from 0deg veya from 30deg şeklindeki değerler ile renklerin hangi açıdan itibaren başlayacağını belirtiriz.

at <pozisyon> yani örnek olarak at 50% 50% dediğimiz zaman soldaki yatay eksende sağdaki de dikey eksende merkezi noktanın konumunu belirler.

Aşağıda tüm örnekleri görüntüleyebilirsiniz.

.conic-gradient {


/* Basit hali */

background-image: conic-gradient(#fff, #000); 

/* Başlangıç konumunu belirle */ 

background: conic-gradient(at 50% 50%, #fff, #000); 

/* Başlangıç açısını belirle */ 

background: conic-gradient(from 0deg, #fff, #000); 

/* Başlangıç noktası ve başlangıç konumunu bir arada belirle */ 

background: conic-gradient(from 0deg at center, #fff, #000); 

/* Renklerin açılarını yüzde olarak belirle */ 

background: conic-gradient(#fff 0%, #000 100%); 

/* Başlangıç ​​renginin açısını derece cinsinden ve bitiş rengini dairenin tam bir dönüşü ile bitir */

background: conic-gradient(#fff 0deg, #000 1turn); 

}

Eğer açı değeri girmezsek 0 dan 360 dereceye kadar keskin bir çizgi oluşturur. Burada daha yumuşak bir görüntü elde etmek için başlangıç ve bitiş renklerini aynı yapabilirsiniz. Böylece örneğin yukarıdan bakınca koni görünümü veren bir görüntü elde edebilirsiniz.

Aşağıdaki örnekteki gibi bir görüntü elde edip animasyon ile döndür komutu vererek bir Mac efekti verebilirsiniz.

.conic-gradient { 

background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red); 

}

Renkler arasında sabitleme sayısal değerleri girerek daha keskin görünümler elde edebilirsiniz.

.conic-gradient { 

background: conic-gradient(lime 40%, yellow 0 70%, red 0); 

}

Conic gradient 'in tarayıcı desteği listesine aşağıdan ulaşabilirsiniz.
https://caniuse.com/#search=conic%20gradient

Daha deylı bilgi için W3C resmi sayfasına gözatabilirsiniz.
https://www.w3.org/TR/css-images-4/#conic-gradients

Yazıyı Oku...

CSS elementi ortalama yöntemleri

CSS elementi ortalama yöntemleri

  Haziran 11, 2019    Gökhan Krl

---

CSS ile herhangi bir nesneyi ortalama yapmanın bir çok yolu vardır. Bunları aşamalar halinde açıklayalım.


1. Display: flex ile hizalama
CSS 3 te uzun zamandır kullanılan flex düzeni ile ortalamayı ilk olarak gösterelim.

display:flex;
justify-content:center;
align-items:center;

display: flex her tarayıcıda sorunsuz çalışmıyor olabilir. Diğer yöntemleri de deneyebilirsiniz.


2. Margin: auto
Sıklıkla kullandığımız yöntemlerden birisi de margin: auto 'dur.

display:block;
margin:0px auto;


3. Display: Inline-Block
Elementin türünü inline-block olarak ayarlayıp bir text gibi davranmasını sağlayabilirsiniz.

display:inline-block;
text-align:center;


4. Position: absolute
Son olarak ta position türünü değiştirip, top ve left kullanımı ile ortalama yapabilirsiniz.

position:absolute;
top:50%;
left:50;
transform:translate(-50%, -50%);

Yazıyı Oku...

Bilgisayar Diskinin %100 Kullanması Sorununun Çözümü

Bilgisayar Diskinin %100 Kullanması Sorununun Çözümü

  Haziran 11, 2019    Gökhan Krl

---

Merhabalar, bu yazımda bilgisayar kullanırken can sıkıcı sorunlardan biri olan diskin %100 kullanılması sorunu için çeşitli çözüm yöntemlerini paylaşacağım. Bu adımları tek tek uygularsanız kısmen de olsa çözme ihtimaliniz yüksektir.

Öncelikle şunu belirtmeliyim bu sorunla birden fazla cihazda karşılaştım ve şahsi kanaatim disk üzerindeki performans bozukluğundan kaynaklanan bir sorun bu. İşletim sistemi siz bilgisayarınızı kullanırken arka planda çeşitli sistem uygulamalarını çalıştırır. Bunlar normaldir ancak eğer diskinizde bir performans kaybı varsa işte o zaman bu sorunla karşılaşabiliyorsunuz.

Çözüm yöntemlerinden önce HDD 'nizin uzun ömürlü olması açısından sizlere bir kaç tavsiyem olacak;

1. Bilgisayarınızı çok sıcak ortamlarda kullanmayın.
2. Bilgisayarınıza çeşitli şekillerde darbe alacak etkenlerden uzak tutun.
3. Bilgisayarınızın fişini kesinlikle çekmeyin, normal yol olan "Bilgisayarı Kapat" komutu ile kapatın. (Bu durum genelde güncelleme yapılırken insanların bilgisayarın fişini direkt olarak çekerek veya power tuşuna basılı tutarak kapatmasıyla ortaya çıkıyor)

Kullandığımız HDD 'ler içerisinde mekanik bir disk barındırdığı için darbeden, sıcaklıktan ve ani durdurmalardan etkileniyor. Siz fark etmiyorsunuz ama disk içerisindeki bölümler kötü kullanımlardan dolayı ölüyor ve diskiniz zamanla çalışmaz iş görmez hale geliyor.

Bunları yaptıysak şimdi çözüm yöntemlerine geçelim;

1.a. Windows Search Hizmetini kapatın

Windows Search hızlı arama yapmanız için arka planda verilerinizi toplar ve endeks haline getirir. Bu hizmet arka planda disk kullanım oranını artırır. Eğer aramayı çok fazla kullanmıyorsanız bu özelliği kapatmanız iyi olur. Kapatsanızda aramayı kullanabilirsiniz sadece aramalarınız biraz uzun sürer.

Başlat+X > Komut İstemi(Yönetici) > Evet deyin ve şu komutu girin net.exe stop "Windows search"

1.b.Windows Search 'ü kalıcı olarak devre dışı bırakmak

Windows+R > services.msc > Windows Search 'ü bulun.

Çift tıklayıp özelliklerini açın ve Başlangıç Tipi 'ni Devre dışı bırak olarak ayarlayın ardından Tamam deyin.

2. Sürücülerinizi güncelleyin

Bilgisayarınıza ait sürücülerinizi güncelleyin. Bunun için bilgisayarınızın destek sitesine veya OEM kullanıyorsanız Anakart ve Ekran kartı bilgilerinize göre sürücülerinizi güncelleyebilirsiniz.

Özellikle İntel işlemci kullanıyorsanız Depolama ve RAID sürücülerinin güncel olmasına özen gösterin.

3. Superfetch yazılımını devre dışı bırak

Superfetch önyükleme ve zorunlu olarak çalışan programları daha verimli için tasarlanmış bir sistem uygulamasıdır. Ancak Windows 10 ve 8 'de disk sorunlarının olası nedenleri arasında olduğu görülmüştür. Bu yüzden bunu da devre dışı bırakabilirsiniz.

Tekrar Komut İstemi 'ni yönetici olarak çalıştıralım ve aşağıdaki komutu girelim.

net.exe stop superfetch

Daha sonra aşağıdaki çıktıyı görebilmeniz lazım

4. Disk kontrolü yapın

Aşağıdaki komutu çalıştırarak bilgisayarınızın sabit diskini tarayın

chkdsk.exe /f /r :c

Bu komutu kullandığınızda karşınıza bir uyarı gelecek "Y" diyerek Enterlayın.

Bilgisayarınız yeniden başladığında diskiniz taranacak bozuk dosyalarınız varsa onarılacak ve sisteminiz yeniden açılacaktır. Bu işlem sabit diskinizin performansına göre biraz uzun sürebilir.

5. Sanal Belleği Sıfırla

Bilgisayarım > Özellikler > Gelişmiş Sistem Ayarları

ardından açılan pencereden

Gelişmiş > Performans başlığı altından Ayarlar ' a girin.

Oradan Sanal Bellek kısmından Değiştir 'e tıklayın.

"Tüm sürücüler için disk belleği dosyası boyutunu otomatik yönet" seçeneği tik işareti olmadığından emin olun.

Burada Özel Boyut 'u Seçin ve 

• Minimum Boyut 'u pencerenin aşağısındaki Önerilen: xxx şeklinde yazan boyutu girebilirsiniz.
• Maksimum Boyut kısmına da RAM 'inizin 1.5 katı oranında bir değer girin. Bu kısım çok yüksek olmasın.

Şimdi yeniden başlatın ve sorunu gözlemleyin.

6. Geçici Dosyaları Silin

Başlat > Çalıştır 'a gelin ve temp yazarak enterlayın. Karşınıza bilgisayarınızda kayıtlı tüm geçici dosyaların olduğu bir pencere açılacaktır. Buradaki tüm dosyaları seçin ve silin. 

CCleaner programı kullanıyorsanız da aynı işlemi yapabilirsiniz.

Bilgisayarınızdaki disk kullanımını tekrar gözlemleyebilirsiniz.

Yazıyı Oku...