JSFiddle - React, Tailwind, and code Playground

by Serghei Cebotari

HTML

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

<div id="app">
  <h1>{{ title }}</h1>
  <button @click="updateTitle">Change title</button>
  <button @click="destroy">Destroy</button>
</div>

JavaScript

var vm1 = new Vue({
  el: '#app',
  data: {
    title: 'The VueJS Instance'
  },
  methods: {
  	updateTitle: function() {
    	this.title = 'Title changed';
    },
    destroy: function() {
    	this.$destroy();
    }
  },
  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');
  }
});