SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

Vue.js ile Tanışalım

JavaScript kütüphanelerinden biri olan Vue ile örneklerle tanışmaya ne dersiniz?

Basit düzeyde giriş yapabilmek için birkaç örnek ile dersimize başlayalım. Vue taraflı olarak işin pratiğini vermek gerekirse ana çatı olarak bir element belirtip el: '#ana-cati' onun içerisinde istediğimiz şekilde metod, data gibi kavramlarla işlemler yapacağız.
Vue kütüphanesini çalışmamıza dahil edelim ki ona ait betik, fonksiyon, metod vs.. gibi yordamları çağırıp onun diliyle rahatça anlaşma sağlamış olalım.
Vue Kütüphanesini Çağıralım
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
Örnek 1 HTML
<div id="ana-cati-1">
<h2>Merhaba: {{degisken1}}</h2>
<h3>Merhaba: {{degisken2}}</h3>
</div>
Örnek 1 Vue
<script>
new Vue({
  el: '#ana-cati-1',
  data:{
    degisken1: 'Serkan Nasılsın?',
    degisken2: 'Ahmed Nasılsın?'
  }
});
</script>

el: satırı şunu demektedir. Bir tane kapsayıcı element seçip tüm işlemleri onun içerisinde yapacağımızı bildiriyoruz. Yani id="ana-cati-1" olan elementi kapsayıcı olarak seçtik.
data: satırında ise içerisinde veriler barındıracağını bildiriyor. Bu katmandaki veriler degisken1 ve degisken2 olarak görülüyor.
Yani id="ana-cati-1" olan bir element içerisinde degisken1 ve degisken2 verilerinin taşıdığı değerleri yazdırmak istersek {{degisken1}} ve {{degisken2}} şeklinde yazabiliriz.
Örnek 1 Sonuç

Merhaba: {{degisken1}}

Merhaba: {{degisken2}}


Örnek 2 HTML
<div id="kapsul-2">
<h5>Kendini Tanıt: {{tanitim}}</h5>
</div>
Örnek 2 Vue
<script>
new Vue({
  el: '#kapsul-2',
  data:{
    tanitim: 'Vue.js öğrenerek bildiklerimizi bir adım öteye taşıyalım.'
  }
});
</script>

el:"#kapsul-2" satırını şunu demektedir. id="kapsul-2" olan elementi seçtik.
tanitim: 'Vue.js öğrenerek bildiklerimizi bir adım öteye taşıyalım.' satırında ise tanitim adlı bir değişken içerisine istediğimiz değerleri aktarmış olduk. Böylece uygulamamız tanitim adlı değişkeni gördüğü yerde onun yerine "Vue.js öğrenerek bildiklerimizi bir adım öteye taşıyalım." değerini oraya işleyecektir.
Örnek 2 Sonuç
Kendini Tanıt: {{tanitim}}

Örnek 3 HTML
<div id="kapsul-3">
<p>1. Satıra İsim Yaz: {{isim}}</p>
<p>2. Satıra İsim Yaz: {{isim}}</p>
<p>3. Satıra İsim Yaz: {{isim}}</p>
<p>4. Satıra İsim Yaz: {{isim}}</p>
</div>
Örnek 3 Vue
<script>
new Vue({
  el: '#kapsul-3',
  data:{
    isim: 'Serkan'
  }
});
</script>

el:"#kapsul-3" kısmında id="kapsul-3" olan elementi seçtik.
isim: 'Serkan' kısmında ise isim adlı bir değişkeni kapsul-3 içerisinde gördüğü her {{isim}} değişkeninde değeri olarak Serkan yazdıracaktır. Örnek 3 Sonuç

1. Satıra İsim Yaz: {{isim}}

2. Satıra İsim Yaz: {{isim}}

3. Satıra İsim Yaz: {{isim}}

4. Satıra İsim Yaz: {{isim}}


Dersimiz güncellenecektir.

Yorumlar

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

REKLAM

Çocuk Etkinlikleri Uygulaması

EN

  • Popüler
  • Yeni
  • Son Yorum