V-Model ile Vue.js’de 2 Yönlü Veri İletişimi Nasıl Sağlanır?

Bu yazı blogumdaki ilk yazı. Açıkçası insan ilk yazıda ne yazacağına karar veremiyor. Ama bir yerden başlamak gerekiyordu. Umarım faydası olur.🙂

Küçük bir açıklama,

2 yönlü veri iletişimi (Two-way data binding), kullanıcının girdiği değere bağlı olarak sayfadaki ilgili tüm yerlerdeki değerlerin eş zamanlı olarak değişmesini sağlar.

Mesela bir iletişim formunda Ad bilgisi değiştiyse geri gidip tamamını değiştirmesine gerek kalmaz. Ya da örneğin kullanıcıdan aldığınız her yeni veriye göre sayfadaki bir değeri eşzamanlı olarak değiştirebilirsiniz.

Aşağıdaki örnekte sayfamızdaki input elementine v-model attribute ekleyerek değerine name verdik.

Vue.js kodu içerisindeki name elementinin varsayılan değeri ne olursa olsun, input içine girilen değer hem script içindeki değeri hem de buna bağlı olarak sayfadaki tüm name değerlerini eş zamanlı olarak güncelleyecektir.

Örnek kod: