VueJS - Hesaplanan Özellikler
Daha önce Vue örneği ve bileşenleri için yöntemler gördük. Hesaplanan özellikler yöntemler gibidir, ancak bu bölümde tartışacağımız yöntemlerle karşılaştırıldığında bazı farklılıklar vardır.
Bu bölümün sonunda, yöntemlerin ne zaman kullanılacağına ve hesaplanan özelliklerin ne zaman kullanılacağına karar verebileceğiz.
Bir örnek kullanarak hesaplanmış özellikleri anlayalım.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
FirstName : <input type = "text" v-model = "firstname" /> <br/><br/>
LastName : <input type = "text" v-model = "lastname"/> <br/><br/>
<h1>My name is {{firstname}} {{lastname}}</h1>
<h1>Using computed method : {{getfullname}}</h1>
</div>
<script type = "text/javascript" src = "js/vue_computedprops.js"></script>
</body>
</html>vue_computeprops.js
var vm = new Vue({
el: '#computed_props',
data: {
firstname :"",
lastname :"",
birthyear : ""
},
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}
})Burada yarattık .htmlad ve soyad ile dosya. Ad ve Soyad, ad ve soyad özellikleri kullanılarak bağlanan bir metin kutusudur.
Girilen ilk adı ve soyadı döndüren hesaplanan getfullname yöntemini çağırıyoruz.
computed :{
getfullname : function(){
return this.firstname +" "+ this.lastname;
}
}Metin kutusuna yazdığımızda, özelliklerin adı veya soyadı değiştiğinde aynı şey işlev tarafından döndürülür. Böylece, hesaplananların yardımıyla, bir işlevi çağırmayı hatırlamak gibi belirli bir şey yapmak zorunda değiliz. Hesaplanan ile, ad ve soyad gibi özellikler değiştikçe kendi kendine çağrılır.
Aynısı aşağıdaki tarayıcıda görüntülenir. Metin kutusuna yazın, aynısı hesaplanan işlev kullanılarak güncellenecektir.
Şimdi, bir yöntem ile hesaplanmış bir özellik arasındaki farkı anlamaya çalışalım. Her ikisi de nesnedir. İçinde bir değer döndüren tanımlanmış işlevler vardır.
Yöntem durumunda, onu bir işlev olarak ve bir özellik olarak hesaplanmış olarak adlandırıyoruz. Aşağıdaki örneği kullanarak, yöntem ve hesaplanan özellik arasındaki farkı anlayalım.
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method : {{getrandomno1()}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1>
<h1 style = "background-color:gray;">Random No from computed
property: {{getrandomno}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
<h1>Random No from method: {{getrandomno1()}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
name : "helloworld"
},
methods: {
getrandomno1 : function() {
return Math.random();
}
},
computed :{
getrandomno : function(){
return Math.random();
}
}
});
</script>
</body>
</html>Yukarıdaki kodda, adında bir yöntem oluşturduk getrandomno1 ve bir işleve sahip hesaplanmış bir özellik getrandomno. Her ikisi de Math.random () kullanarak rastgele sayılar veriyor.
Aşağıda gösterildiği gibi tarayıcıda görüntülenir. Yöntem ve hesaplanan özellik, farkı göstermek için birçok kez çağrılır.
Yukarıdaki değerlere bakarsak, hesaplanan özellikten döndürülen rastgele sayıların, çağrılma sayısına bakılmaksızın aynı kaldığını göreceğiz. Bu, her çağrıldığında, son değerin herkes için güncellendiği anlamına gelir. Oysa bir yöntem için bu bir işlevdir, dolayısıyla her çağrıldığında farklı bir değer döndürür.
Hesaplanan Özelliklerde Al / Ayarla
Bu bölümde, bir örnek kullanarak hesaplanan özelliklerdeki get / set fonksiyonlarını öğreneceğiz.
Misal
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
}
}
}
});
</script>
</body>
</html>Bağlı olan bir giriş kutusu tanımladık fullname, hesaplanmış bir özelliktir. Adlı bir işlevi döndürürget, tam adı, yani ilk adı ve soyadı verir. Ayrıca, adı ve soyadı şu şekilde görüntüledik -
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>Aynısını tarayıcıda kontrol edelim.
Şimdi, metin kutusundaki adı değiştirirsek, aynı şeyin aşağıdaki ekran görüntüsünde görüntülenen adda yansıtılmadığını göreceğiz.
Tam ad hesaplanan özelliğe ayarlayıcı işlevini ekleyelim.
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "computed_props">
<input type = "text" v-model = "fullname" />
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
firstName : "Terry",
lastName : "Ben"
},
methods: {
},
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}
});
</script>
</body>
</html>Tam ad hesaplanan özelliğe set işlevini ekledik.
computed :{
fullname : {
get : function() {
return this.firstName+" "+this.lastName;
},
set : function(name) {
var fname = name.split(" ");
this.firstName = fname[0];
this.lastName = fname[1]
}
}
}Parametre olarak ada sahiptir ve metin kutusundaki tam addan başka bir şey değildir. Daha sonra uzaya bölünür ve ad ve soyad güncellenir. Şimdi, kodu çalıştırdığımızda ve metin kutusunu düzenlediğimizde, aynı şey tarayıcıda görüntülenecektir. Ad ve soyad, set işlevi nedeniyle güncellenecektir. Get işlevi ilk adı ve soyadı döndürürken, set işlevi herhangi bir şey düzenlendiğinde bunu günceller.
Şimdi, metin kutusuna yazılanlar yukarıdaki ekran görüntüsünde görüldüğü gibi görüntülenenlerle eşleşiyor.