Vue.js Quick Example

by crucify

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.common.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<table id="exam">
  <tbody>
    <tr v-for="item in items">
      <td>{{ item.a }}</td>
      <td>{{ item.b }}</td>
      <td>{{ item.c }}</td>
    </tr>
  </tbody>
</table>

<button id="add" v-on:click="adding">add</button>

JavaScript

var i, items = [];
for(i = 0; i < 10000; i ++) {
	items.push({a:'a',b:'b',c:'c'});
}
var exam = new Vue({
  el: '#exam',
  data: {
    items: items
  }
});
var add = new Vue({
	el: '#add',
  methods: {
  	adding:function() {
    	var nitems = [];
      for(i = 0; i < 10000; i ++) {
        nitems.push({a:'d',b:'e',c:'f'});
      }
      exam.items = exam.items.concat(nitems);
    }
  }
});