VueJS Lifecycle hooks

by PlĂ­nio Naves

HTML

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
  <h1>Boards</h1>
  <ul>
    <app-product v-for="p in products" :product="p"></app-product>
  </ul>
</div>

JavaScript

Vue.component('app-product', {
	props: ['product'],
  template: '<li>{{ product }}</li>'
});

var app = new Vue({
	data: {
  	products: [
    	'Arduino Uno',
      'Arduino Mega',
      'Raspberry pi'
    ]
  },
  created: () => {
  	console.log('Created!')
  },
  mounted: () => {
  	console.log('Mounted!');
  }
});

setTimeout(() => app.$mount('#app'), 5000);