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.