JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

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

<div id="app">
  <h1>{{ title }}</h1>
  <button @click="title = 'Changed'">Update Title</button>
  <button @click="destroy">Destroy</button>
</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	title: 'The VueJS Instance'
  },
  beforeCreate: function() {
   	console.log('beforeCreate()');
  },
  created: function() {
  	console.log('created()');
  },
  beforeMount: function() {
  	console.log('beforeMount()');
  },
  mounted: function() {
  	console.log('mounted()');
  },
  beforeUpdate: function() {
  	console.log('beforeUpdate()');
  },
  updated: function() {
  	console.log('updated()');
  },
  beforeDestroy: function() {
  	console.log('beforeDestroy()');
  },
  destroyed: function() {
  	console.log('destroyed()');
  },
  methods: {
  	destroy: function() {
    	this.$destroy();
    }
  }
});