Formlar ve Girdi
Vue.js içerisinde form ve giriş elemanları, kullanıcıdan veri almak, bu verileri doğrulamak ve arayüzü dinamik olarak güncellemek için temel araçlardır. v-model gibi reaktif direktifler sayesinde inputlar ile veri arasında çift yönlü bağ kurulabilir ve form durumları anlık olarak yönetilebilir. Formların doğru kullanımı, kullanıcı deneyimini artırır, kodun sürdürülebilirliğini ve ölçeklenebilirliğini sağlar ve DOM manipülasyonuna gerek kalmadan veri akışını yönetir.
Vue.js uygulamalarında form ve giriş elemanları; kullanıcı kayıtları, giriş ekranları, veri filtreleme, anketler ve uygulama ayarları gibi birçok senaryoda kullanılır. Bu ileri seviye eğitimde, formların modüler ve ölçeklenebilir şekilde oluşturulması, veri yapıları ve algoritmaların etkin kullanımı, OOP prensipleri ve Vue.js’in en iyi uygulama standartları ele alınacaktır.
Okuyucu, reaktif formlar oluşturmayı, hataları merkezi olarak yönetmeyi, girişleri dinamik olarak doğrulamayı ve bileşenleri yeniden kullanılabilir şekilde tasarlamayı öğrenecektir. Ayrıca bu formların uygulamanın yazılım mimarisiyle nasıl entegre edileceği, güvenlik ve performans optimizasyonu da açıklanacaktır.
Temel Örnek <template>
text<div>
<h2>Kullanıcı Kaydı</h2>
<form @submit.prevent="submitForm">
<label for="name">Ad:</label>
<input type="text" id="name" v-model="user.name" required />
<label for="email">Email:</label>
<input type="email" id="email" v-model="user.email" required />
<button type="submit">Gönder</button>
</form>
<p v-if="submitted">Kayıtlı Kullanıcı: {{ user.name }} - {{ user.email }}</p>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: '', email: '' },
submitted: false
}
},
methods: {
submitForm() {
if(this.user.name && this.user.email) {
this.submitted = true;
}
}
}
}
</script>Bu temel örnekte v-model ile inputlar ve user nesnesi arasında çift yönlü veri bağlanması yapılmıştır. @submit.prevent formun varsayılan gönderim davranışını engeller ve submitForm metodunu çağırır. submitted değişkeni, mesajın v-if ile koşullu olarak görüntülenmesini sağlar. Bu yapı Vue.js’in reaktif formları güvenli ve verimli şekilde oluşturma yeteneğini gösterir, DOM manipülasyonu ihtiyacını ortadan kaldırır ve veri akışını kontrol altında tutar.
Pratik Örnek <template>
text<div>
<h2>Gelişmiş Form ve Doğrulama</h2>
<form @submit.prevent="submitForm">
<label for="name">Ad:</label>
<input type="text" id="name" v-model="user.name" @input="validateName" required />
<span v-if="errors.name" class="error">{{ errors.name }}</span>
<label for="email">Email:</label>
<input type="email" id="email" v-model="user.email" @input="validateEmail" required />
<span v-if="errors.email" class="error">{{ errors.email }}</span>
<label for="password">Şifre:</label>
<input type="password" id="password" v-model="user.password" @input="validatePassword" required />
<span v-if="errors.password" class="error">{{ errors.password }}</span>
<button type="submit" :disabled="hasErrors">Gönder</button>
</form>
<p v-if="submitted">Kayıtlı Kullanıcı: {{ user.name }} - {{ user.email }}</p>
</div>
</template>
<script>
export default {
data() {
return {
user: { name: '', email: '', password: '' },
errors: {},
submitted: false
}
},
computed: {
hasErrors() { return Object.keys(this.errors).length > 0; }
},
methods: {
validateName() { this.errors.name = this.user.name.length < 3 ? 'Ad en az 3 karakter olmalıdır' : ''; },
validateEmail() { this.errors.email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.user.email) ? '' : 'Geçersiz email'; },
validatePassword() { this.errors.password = this.user.password.length < 6 ? 'Şifre en az 6 karakter olmalıdır' : ''; },
submitForm() { this.validateName(); this.validateEmail(); this.validatePassword(); if(!this.hasErrors) this.submitted = true; }
}
}
</script>Bu ileri seviye örnek, hataları errors nesnesinde tutar ve computed property olan hasErrors ile gönderim butonunu dinamik olarak devre dışı bırakır. validateName, validateEmail ve validatePassword metotları doğrulama mantığını ayırarak kodun modüler ve sürdürülebilir olmasını sağlar. Bu yapı gerçek projelerde, güvenli ve yeniden kullanılabilir formlar oluşturmak için tavsiye edilir.
📊 Referans Tablosu
| Vue.js Element/Concept | Description | Usage Example |
|---|---|---|
| v-model | Çift yönlü veri bağlama | <input v-model="user.name" /> |
| @input | Input değişimlerinde doğrulama çalıştırma | <input @input="validateName" /> |
| computed | Form hatalarını kontrol etme | hasErrors() { return Object.keys(errors).length > 0 } |
| methods | Doğrulama ve gönderim mantığını organize etme | submitForm() { /* doğrulama ve gönderim */ } |
| v-if | Hata veya mesajların koşullu renderı | <span v-if="errors.email">{{ errors.email }}</span> |
Vue.js’de formlar için en iyi uygulamalar, v-model ile veri bağlama, modüler doğrulama metotları kullanma ve computed property ile hata kontrolüdür. Direkt DOM manipülasyonundan kaçınmak ve hem client-side hem server-side doğrulama yapmak önemlidir. Vue Devtools ile form durumlarını takip etmek ve veri yapısını verimli tutmak performans ve güvenlik açısından kritik öneme sahiptir.
Formlar ve girdi yönetiminde uzmanlaşmak, kullanıcı kayıtları, giriş ekranları, filtreleme ve uygulama ayarları gibi özellikler geliştirmek için gereklidir. Sonraki adımlar, dinamik formlar, bileşenler arası veri paylaşımı, Vuex veya Pinia ile durum yönetimi ve büyük ölçekli uygulamalarda performans optimizasyonu üzerine odaklanmalıdır. Bu bilgiler Vue.js projelerinde sürdürülebilir ve güvenli form çözümleri geliştirmek için temel oluşturur.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek