JSFiddle - React, Tailwind, and code Playground

by Bo Andersen

HTML

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

<div id="app">
  <h1>{{ message }}</h1>
  
  <button @click="message = 'A new message'">Change message</button>
  <button @click="counter++">Increase Counter ({{ counter }})</button>
</div>

JavaScript

var vm = new Vue({
  data: {
		message: 'Hello World!',
    counter: 1
  },
  beforeCreate: function() {
    alert("beforeCreate");
  },
  created: function() {
  	alert("created");
  },
  beforeMount: function() {
  	alert("beforeMount");
  },
  mounted: function() {
  	alert("mounted");
  },
  beforeUpdate: function() {
  	alert("beforeUpdate");
  },
  updated: function() {
  	alert("updated");
  },
  beforeDestroy: function() {
  	alert("beforeDestroy");
  },
  destroyed: function() {
  	alert("destroyed");
  }
});

setTimeout(function() {
	vm.$mount('#app');
}, 2000);

console.log(vm);