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,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <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ı
Reactjs son zamanlarda özellikle son bir yıldır yaygın olarak kullanılmaya başlanan bir javascript framework. İçeriğin zaman içinde değiştiği interaktif uygulamalar için oldukça etkili bir yönetilebilirlik sunan bu teknoloji, zamanla çok daha yaygın hale gelecektir.
Halihazırda dünya genelinde kullanım oranına bakılırsa java script framework listesinde Angular Js sonrasında ikinci sırada yer alıyor.
Kısaca bakmak gerekirse zamanında Facebook mühendisleri tarafından geliştirilmiş bir teknoloji. Yüzlerce geliştiricinin aynı zaman zarfında proje üzerinde çalışmasına kolay şekilde olanak veren, etkili bir DOM yönetimi sağlayan bir proje.
Facebook mühendisleri kardeşlerimiz sırf kendi işleri kolaylaşsın diye böyle bir geliştirmeye gitmişken, sonrasında yapılan instagram satın alımı ve instagram mühendislerinin biz de kullanmak istiyoruz demesi üzerine, mucitlerinin ve yöneticilerinin yahu biz neden bunu open source olarak insanların kullanıma açmıyoruz demesi üzerine biz developer kulların kullanımına açılmıştır.
Birkaç örnek inceledikten sonra eminim ki kullanım alanlarını farkedecek ve projelerinizde deli gibi kullanmak isteyeceğiniz bir framework. Ayrıca maliyet hesabı yapan bütün herkesi mutlu edecek bir yapıya sahip.
Kurulum ve dosyalar için;
https://facebook.github.io/react/
Osman KURT
Yazılım Uzmanı
Merhaba,
Jquery yazarken hepimiz yeri gelir replace kullanmışızdır. Ama şöyle bir saçmalık var. Örnek vermek gerekirse '/','-' şeklinde bir değiştirme yapacaksak yazmamız gereken kod islem.replace('+','-'); yalnız dikkat etmemiz gereken şey bu replace işlemini yaparken sadece soldan ilk / işaretini değiştirecek olması. Ama bize ful içerikte bulunan / işaretinin değişmesi lazım. O zaman kullanmamız gereken kod parçası;
Normal;
islem.replace('+','-');
Olması gereken;
islem.replace(/\+/g, ' ');
Osman KURT
Yazılım Uzmanı
