Vue.js kullanım örnekleri
Uygulama geliştirme esnasında back-end ve front-end olmak üzere 2 yapı vardır.
Back-end tarafında uyulama geliştirilirken veri erişim gibi işlemler yapılırken, front-end tarafında ise back-end den gelen veriler gösterilmektedir. Front-end ortamında sayfa etkileşimi için önceleri daha çok Javascrit kullanırken daha sonra Jquery kullanımı ağırlık kazanmıştır. Son zamanlarda ise Angular, React gibi frameworkler yaygın olarak kullanılmaktadır.
Vue.js de bu mantıkla bir twiter çalışanı tarafından yazılmış bir framework olarak karşımıza çıkmaktadır.
Vue kendi başına bir uygulama geliştirme platformu olarak kullanılabildiği gibi, html içinde kütüphanesi çağrılarak da kullanılabilir.
Aşağıdaki örnek html içinde nasıl kullanılacağı ve bütün ekranı post etmeden asenkron çalışan son derece etkileşimli html sayfaların nasıl yapıldığı ile ilgili ipuçları bulabilirsiniz.
Örnek Html İçerik
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Vue Örnekleri</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="container">
<h1 class="ortlama">Vue.js Kullanımı</h1>
<hr />
<h3>Vue Sayaç Örneği</h3>
<div id="ornek1" class="flex flex-column">
<button @click="incrementValue" class="btn success"> Artırma </button>
<button @click="decrementValue" class="btn success"> Azatma </button>
<button @click="resetValue" class="btn success"> Sıfırla </button>
<h3> {{sayac}} </h3>
<hr />
</div>
<h3>Vue Sayaç Örneği 2</h3>
<div id="ornek2">
<button v-on:click="sayac += 1" class="btn success">Say</button>
<br />
<h3> Sayaç : {{sayac}} </h3>
<hr />
</div>
<div id="ornek3">
<h3>Textbox</h3>
<input v-model="name" placeholder="İsim" />
<h3>Girilen İsim : {{name}}</h3>
<hr />
<h3>Textarea</h3>
<textarea v-model="textmessage" placeholder="Açıklama"></textarea>
<h3>{{textmessage}}</h3>
<hr />
<h3>Checkbox</h3>
<input type="checkbox" id="checkbox" v-model="Kontrol"> {{checked}}
</div>
<br />
<div id="ornek4" class="form-group ">
<h3>Radio</h3>
<input type="radio" id="black" value="Siyah" v-model="picked">Siyah
<input type="radio" id="white" value="Beyaz" v-model="picked">Beyaz
<h3>Seçilen : {{picked}} </h3>
<hr />
<h3>Select</h3>
<div class="row">
<div class="col-xs-2">
<select v-model="languages" class="form-control">
<option disabled value="">Hangi Bilgisayar Dili</option>
<option>Java</option>
<option>Javascript</option>
<option>Php</option>
<option>C</option>
<option>C++</option>
</select>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<h3>Seçilen : {{ languages }}</h3>
<hr />
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
var vue1 = new Vue({
el: '#ornek1',
data: {
sayac: 0,
firstName: ''
},
methods: {
incrementValue() {
this.sayac++;
},
decrementValue() {
this.sayac--;
},
resetValue() {
this.sayac = 0;
},
logName: function () {
console.log('firstName:', this.firstName);
}
}
})
var vue2 = new Vue({
el: '#ornek2',
data: {
sayac: 0
}
})
var vue3 = new Vue({
el: '#ornek3',
data: {
name: '',
textmessage: '',
checked: false
}
})
var vue4 = new Vue({
el: '#ornek4',
data: {
picked: 'White',
languages: "Java"
}
});
</script>
<style>
.btn {
border: none; /* Remove borders */
color: white; /* Add a text color */
padding: 14px 28px; /* Add some padding */
cursor: pointer; /* Add a pointer cursor on mouse-over */
background-color: #ff6a00
}
.btn:hover {
background: #0b7dda;
}
.ortlama {
text-align: center
}
</style>
