Vue.Js Method / Fonksiyon Oluşturma

Sezai AlkanFrontend Developer

Vue.js #vue-js

Vue.Js ile method oluşturmak, değişken oluşturmakla neredeyse aynı diyebiliriz.    Vue.Js i kullanmak için html template tarafında herzaman bir ana divimizin olması gerekmektedir. Html tarafında bir ana div oluşturalım ve sonrasında Vue.js tarafına geçiş yapalım.

<div id="status"></div>

status id sine sahip divimizi oluşturduk. Vue.js ile Method oluşturmak için methods özelliğini kullanıyoruz. Örnek olarak bir tane method oluşturalım.

<script type="text/javascript">
    new Vue({
        el : '#status',
        methods : {
            message : function (){
                alert('Bu Bir Fonksiyon');
            }
        }
    });
</script>

Yukarıdaki örnekte message adında bir method oluşturduk. Fonksiyon içersinede alert ile ekrana bildirim vermesini sağladık.

Peki bu fonksiyonu nasıl çağırıyoruz ?

Fonksiyonu Çağırmak için değişken çağırırken yaptığımız işlemin aynısını fonksiyonlar içinde kullanabiliyoruz. içi içe çift süslü parantez {{ }} ile fonksiyonumuzu çağırabiliyoruz.

<div id="status">
    {{ message() }}
</div>

Yukarıdaki örnekte oluşturduğumuz methodu çağırdık template çalıştığı zaman kullanıcıya Bu Bir Fonksiyon diye alert bildirim verecektir.

Bir Başka Örnek daha yapalım ve bu örnekte bir değişken oluşturalım ve method a dışarıdan parametre gönderelim bu parametre ile değişkenin büyüklük küçüklük ölçümünü yapalım.

Html

<div id="status">
    {{ calc(1) }}
</div>

Js

<script type="text/javascript">
    new Vue({
        el : '#status',
        data : {
            number : 2
        },
        methods : {
            calc : function(e){
                if (e > this.number) {
                    return "Girilen Sayı Varsayılandan Büyüktür."
                }else if (e < this.number) {
                    return "Girilen Sayı Varsayılandan Küçüktür."
                }else{
                    return "Girilen Sayı İle Varsayılan Eşittir."
                }
            }
        }
    });
</script>

Yukarıdaki Örnekte calc adında bir fonksiyon oluşturduk ve bu fonksiyona dışarıdan parametra gönderdik. Dışarıdak gelen parametre ile bizim number adındaki değişkenin değeri ile if else yöntemiyle karşılaştırma yaptık.

method içersinde, data içersindeki değişkenlere ulaşmak için this anahtar kelimesini kullanmaktayız. this anahtar kelimesinden sonra ulaşmak istediğimiz değişken adı yazabiliriz.