Vue 2.0 Hello World

by Pankaj Kargirwar

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app-7">
  <todo-table></todo-table>
</div>

<script type="text/x-template" id="row-template">
	<tr>
  	<td>
    	100
    </td>
    <td>
    	Pankaj
    </td>
  </tr>
</script>

<script type="text/x-template" id="table-template">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
    	<todo-row></todo-row>
    </tbody>
  </table>
</script>

CSS

table {
  border: 1px solid grey;
  border-collapse: collapse
}

td,th,tr {
  border: 1px solid grey
}

JavaScript

Vue.component('todo-row', {
  template: '#row-template'
})

Vue.component('todo-table', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '#table-template'
})

var app7 = new Vue({
  el: '#app-7'
})