Vue.js Değişken Tanımlama Ve Yazdırma

Sezai AlkanFrontend Developer

Vue.js #vue-js

Vue.Js Kullanımı için belirli bir ana divimizin olması gerekmektedir. Kullanacağımız değişkenleri veya fonksiyonları bu div içersinde kullanabiliriz, divin dışında Vue.js ile tanımladığımız değişken veya fonksiyonları çağırdığımız zaman elde etmek istediğimiz değeri bize vermeyecektir.    

İlk olarak id'si first olan div oluşturalım Ve Vue.js ile bu divimizi ana div olarak belirleyelim.

<div id="first"></div>

Vue.Js Kütüphanesini başlatmak için new Vue(); söz dizilimini kullanıyoruz. Oluşturduğumuz Vue() Alanı içersinde {} süslü parantezler kullanarak işlevleri kullanmaya başlayabiliriz.

<script type="text/javascript">
    new Vue();
</script>

Vue.js ile oluşturduğumuz ana divimizi seçmek için 'el' özelliğini kullanıyoruz. Ve bir başka özellik olarakda içersinde değişken veya değişkenler tanımlayabileceğimiz 'data' özelliğinide bu aşamada kullanabiliriz. 

<script type="text/javascript">
    new Vue({
        el : '#first',
        data : {
            degisken : 'Merhaba Dünya !'
        }
    });
</script>

Yukarıdaki örnekte oluşturduğumuz first id'li divimizi el özelliğimiz ile ana divimiz olarak seçmiş bulunmaktayız. Bu aşamadan sonra oluşturacağımız tüm değişkenleri bu div içersinde yazdırabiliriz. Değişken tanımlamak içinse data özelliğini kullanıyoruz. Bu özellik içersinde değişken adımızı ve değişken içeriğini yukarıdaki örnekteki 'degisken' adındaki değişken gibi oluşturabiliyoruz. 

Peki bu değişkeni nasıl yazdırabiliyoruz ?

Değişkeni yazdırmak için iç içe iki tane süslü parantezle '{{ }}', çağıracağımız değişken adını yazıyoruz.

<div id="first">
    {{ degisken }}
</div>

Yukarıdaki örnekte Vue.Js ile oluşturduğumuz degiskeni yukarıdada belirttiğim gibi süslü parantezler içersinde sadece değişken adıyla yazmak yeterli olacaktır.

Yazdığımız Vue Javascript kodlarılarını sayfa sonunda yazmanız veya eklemeniz iyi olacaktır. ana divinizden önce yazılan yazılan Vue.js kodlarınız gözükmeyebilir. Son olarak bir örnek daha Yapalım.

HTML

<div id="message">
    <p> {{ post }} </p>
</div>

Js

<script type="text/javascript">
    new Vue({
        el : '#message',
        data : {
            post : 'Vue.Js Öğreniyorum'
        }
    });
</script>