Vue.js ile Listeleme ve Method Kullanımı

3 ay önce , Okuma süresi 1 dakika.

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.
Vue.js ile Listeleme ve Method Kullanımı

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: 'Yazilim.Net'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
#javascript