VueJS Nedir? Kullanımı ve Örnekleri

  • 20.11.2016
  • M.Tayyip Yetiş
  • Eklenti ve Kütüphaneler

Merhaba arkadaşlar, bu makalede web üzerinde kullanıcı arayüzleri oluşturmak için kullanılan yeni bir kütüphaneden bahsedeceğim. VueJS ile aynı amaç için daha önceden tanıtma fırsatı bulduğum diğer kütüphaneler de bulunmaktadır örneğin ReactJS kütüphanesi facebook'un desteğiyle geniş kullanım oranına ulaşmış olanlarından bir tanesidir. AngularJS de Google tarafından desteklenen ve 2.0 versiyonu ile büyük değişimler geçirmiş kendi alanında başarılı bir kütüphanedir. Elbetteki alternatiflerin bulunması her zaman için iyidir ve problemlerin çözümleri için farklı bakış açıları geliştirilmesine sebep olur. VueJS ile de bu sebepten ilgilenmeye başladım ve kullanım olarak ReactJS ile AngularJS'nin ortasında ve ikisinden de güzel özellikler almış olduğunu gördüm. VueJS de Model-View Mantığı ile çalışır. Bu bilgilerden sonra örneklere başlayalım. Kütüphaneyi Buradaki CDN üzerinden indirebilir ya da direkt kullanabilirsiniz.

Hello VueJS!

<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 <component-name> </component-name>  ş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>

Şimdilik bu kadar örneğin yeterli olduğunu düşünüyorum. ileriki zamanlarda daha ileri seviye örnekler hakkında da paylaşımlar yapmayı planlıyorum. Umarım herkese faydalı olmuştur.

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap

Diğer Makaleler

Etiketler