JSFiddle - React, Tailwind, and code Playground

by scheinercc

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.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 Vue Instance'
    },
    beforeCreate() {
    	console.log('beforeCreate');
    },
    created() {
    	console.log('created');
    },
    beforeMount() {
    	console.log('beforeMount');
    },
    mounted() {
    	console.log('mounted');
    },
    beforeUpdate() {
    	console.log('beforeUpdate');
    },
    updated() {
    	console.log('updated');
    },
    beforeDestroy() {
        this.title = 'Oh, oh!';
    	console.log('beforeDestroy');
    },
    destroyed() {
    	console.log('destroyed');
    },
    methods: {
        destroy: function() {
			this.$destroy();
        }
    }
})