Web Dev. GökhanKR

Kişisel web tasarım ve kodlama blogu. Web tasarımı ve kodlama araçları ile ilgili bilgiler ve yardımcı dökümanlar.

Kod yazmak sanattır...

gokhankr.com

Blogger tarafından desteklenmektedir.

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

  Haziran 19, 2019    

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


   / / / /

  Yorum Yok

Vue.js Direktifler

  Haziran 19, 2019    

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

   / / / /

  Yorum Yok

Vue.js data ve methods

  Haziran 17, 2019    

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

   / / / /

  Yorum Yok

Vue.js Söz Dizimi

  Haziran 15, 2019    

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.


   / / /

  Yorum Yok

Vue.js Kurulumu/Kullanımı

  Haziran 15, 2019    

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

   / / /

  Yorum Yok

Vue.js 'e Giriş

  Haziran 14, 2019    


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.


   / / /

  Yorum Yok

CSS Conic Gradient Kullanımı

  Haziran 14, 2019    

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

   / / / /

  Yorum Yok

Kaydol: Kayıtlar (Atom)