Osman KURT

Yazılım Uzmanı | MVC Eğitmeni

VueJS Nedir? Kullanımı ve Örnekleri

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ı

React.js Nedir?

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ı

Jquery All Replace

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ı

JQuery Alert Örneği

Kullanımı çok basit ve güzel olan bir alert uygulaması. Bende projelerimde kullanıyorum ve gerçektende hoş bir görüntü sağlıyor. Ayrıca kullanmış olduğumuz diğer scriptlerle de alakalı herhangi bir çakışma problemi de yaratmıyor.

Bildiğiniz üzere arka planda yaptığımız bütün işlemler içi kullanıcıya bilgilendirm amaçlı mesaj döndermemiz gerekmekte. Bir arkadaşımın tavsiyesi üzerine kullandığım bu alert scripti emin ki inceleyince sizin de hoşunuza gidecek ve sizde projelerinide kullanacaksınız. Bu arada sadece link kısmıı payalaşacağım ama isterseniz .Net platformunda kullanacağım derseniz visual studio programından Package Manager Console alanında Install-Package toastr yazarak da otomatik ekleme yapabilirsiniz. Alt kısımda vereceğim linkte detaylı anlataımı bulabilirsiniz.

http://codeseven.github.io/toastr/demo.html

 

Görüşmek üzere,

Osman KURT
Yazılım Uzmanı