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>