Projelerinizde verimliliği artırmak, hataları bulmak ve daha hızlı geliştirmek için kullanabileceğiniz araçlarla dolu bir dünya!
Vue.js ile form elemanlarından v-model
ile veriyi iki yönlü olarak bind işlemi sağlayabilmekteyiz. v-model
kullanımında vue.js içerisinde oluşturduğumuz değişken ile veriyi işleyebilir veya anlık olarak çekebiliriz.
<template>
<div>
<input type="text" v-model="yakala">
<label>{{yakala}}</label>
</div>
</template>
Yukarıda template
içerisinde oluşturduğumuz örnek textbox'a v-model
attribute ile Vue.js tarafında oluşturduğumuz yakala değişkenini tanımladık.
<script>
export default {
data(){
return {
yakala : 'Buraya Yazılanı yakalarım',
}
}
}
</script>
Yukarıda ise Vue.Js tarafından oluşturmamız gereken script kodlarımız bulunmaktadır. Değişken tanımlarken değişkenimize bir değer tanımlar isek bu değer projemiz çalıştığında varsayılan olarak input
içerisine yazılacaktır.
Bu örnek içerisinde anlık kullanıcı tarafından girilen değer label
içerisine yazılacaktır.
v-model
kullanımı ek olarak checkbox
, selectbox
vb. gibi html elemanları üzerinde de kullanım sağlayabilirsiniz.
Yorum yapabilmek için giriş yapmanız gerekmektedir.