Vue.js ile Tanışalım

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ç

---

Ö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ç

---

Ö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ç