Vue 2.0 Hello World

HTML

<!-- jQuery -->
<h2>jQuery</h2>
<table id="t1">
  <tr>
    <th>Item</th>
    <th>Quantity</th>
  </tr>
  <tr id="r1">
    <td><input name="item[]" type="text"/></td>
    <td><input name="quantity[]" type="number"/></td>
    <td><button class="deleteRow">X</button></td>
  </tr>
</table>
<button id="addRow">Add Row</button>
<!-- Vue.js -->
<script src="https://vuejs.org/js/vue.js"></script>

<hr>
<h2>Vue.js</h2>


<div id="app">
  <p>{{ message }}</p>
</div>

CSS

.deleteRow {
  background-color: #FF0000;
}

JavaScript

// jQuery
$(document).on('click', '#addRow', function(){
    var row = parseInt($('#t1 tr:last-child').attr('id').replace(/[^\d]/g, ''), 10) + 1;
		$('#t1').append('<tr id="r'+row+'"><td><input name="item[]" type="text"/></td><td><input name="quantity[]" type="number"/></td><td><button class="deleteRow">X</button></td></tr>');
});

$(document).on('click', '.deleteRow', function(){
		var row = parseInt($(this).closest('tr').attr('id').replace(/[^\d]/g, ''), 10);
    
    if (row > 1)
    		$('#r'+row).remove();
});

// Vue.js
new Vue({
  el: '#app',
  data: {
    message: 'How to make the same thing (above) with Vue??'
  }
})