VueJS Nedir?
VueJS yazılımın front-end tarafını daha kolay ve kullanışlı bir hale getirmek için geliştirilmiş bir script kütüphanesidir. Öğrenmesi kolaydır ve yavaş yavaş ülkemizde içerik oluşmaya başlamıştır. Birçok büyük ölçekli projede firmalar tarafından kullanılmaya başlanmış ve artık iş ilanlarında VueJs bilen front-end developer aranıyor yazılarını görmeye başlamamız an meselesi.
Gelin birkaç küçük örnek görelim,
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
VueJS ile Listeleme (Repeater)
VueJS ile listeleme işlemi AngularJS sözdizimine oldukça benzer. v-for=“data in list” şeklinde bir kullanım ile tanımlandığı html tagını listedeki elemanlara göre tekrarlar. aşağıdaki örneği inceleyin
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Bilgisayar Mühendisliği' },
{ text: 'Endüstri Mühendisliği' },
{ text: 'Elektronik Mühendisliği' }
]
}
})
</script>
VueJS ile Method Kullanımı
VueJS ile method tanımlamak kolaydır anlaşıldığu üzere bu framework’un genel yapısı JSON yapısını kullanır aynı şekilde metotları da json değişkeni şeklinde tanımlayabilirsiniz. standart kullanıcı işlevlerini de v-on:click=“metotismi” şeklinde html etiketine tanımlayabilirsiniz.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Yazıyı Ters Çevir</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Merhaba Dünya'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
VueJS ile Model Kullanımı
VueJS’de input elemanlarına v-model=“degiskenismi” şeklinde veri bağlayabilirsiniz. ve herhangi bir etki ile model güncellendiğinde siz bir tetikleme yapmadan input değerleri güncellenecektir.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
</script>
VueJS ile Component Kullanımı
VueJS ile kendi komponentlerinizi yazabilir html içerisinde bunları render edebilirsiniz. bu şekilde çalışmak işinizi hızlandıracaktır ayrıca komponent kullanımı ile bir kez yazdığınız arayüz parçalarını bir çok projede kullanabilirsiniz. Html içerisinde şeklinde özel etiketler oluşturmanıza izin verdiği için kullanım kolaylığı sağlamaktadır.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app-7">
<ol>
<todo-item v-for="todo in todos" v-bind:todo="todo"></todo-item>
</ol>
</div>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
</script>
Güzel bir başlangıç olsun, kolay gelsin :)
Osman KURT
Yazılım Uzmanı