Vue.js ile Veri Bağlama (Data Binding)
Vue.js’in en güçlü yanlarından biri, veri bağlama (data binding) özelliğidir. Bu özellik sayesinde HTML içindeki değerler, JavaScript’te tanımlanan verilere otomatik olarak bağlanır. Aşağıdaki örnekte, kullanıcının yazdığı metin anında ekrana yansıyor — tamamen canlı etkileşim! Bu yapı, form verileri, dinamik arayüzler ve anlık hesaplamalar için vazgeçilmezdir.
<div id="app">
<h2>Canlı Veri Bağlama Örneği</h2>
<input v-model="mesaj" placeholder="Bir şey yaz...">
<p>{{ mesaj }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
mesaj: "Zebifytech Vue.js örneği 🚀"
};
}
}).mount("#app");
</script>Kod Açıklaması
Vue.js’in en güçlü yanlarından biri, veri bağlama (data binding) özelliğidir.
Bu özellik sayesinde HTML içindeki değerler, JavaScript’te tanımlanan verilere otomatik olarak bağlanır.
Aşağıdaki örnekte, kullanıcının yazdığı metin anında ekrana yansıyor — tamamen canlı etkileşim!
Bu yapı, form verileri, dinamik arayüzler ve anlık hesaplamalar için vazgeçilmezdir.
Nasıl Çalışır?
Bu kod örneği, Web Speech API kullanılarak sesli olarak açıklanmaktadır. Kod bloğunun üzerine mouse ile geldiğinizde otomatik olarak açıklama başlar.
Kullanım Alanları
Web Speech API
Bu kod örneği Web Speech API kullanılarak sesli olarak açıklanmaktadır.
İlgili Kodlar
<div id="app">
<h2>Koşullu Görünüm Örneği</h2>
<button @click="goster = !goster">
{{ goster ? "Gizle" : "Göster" }}
</button>
<p v-if="goster">🎉 Vue.js ile koşullu görü...Vue.js ile Koşullu Görünüm (v-if / v-else)
Kendi Konuşan Kodunuzu Oluşturun
Web Speech API ile kendi projelerinizde de konuşan kod örnekleri oluşturabilirsiniz.