JSFiddle - React, Tailwind, and code Playground
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,
created: new Date()
},
beforeCreate: [
function() {
alert("beforeCreate #1");
},
function() {
alert("beforeCreate #2");
}
],
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");
}
});
//vm.$destroy();
setTimeout(function() {
vm.$mount('#app');
}, 2000);
setTimeout(function() {
vm.$destroy();
}, 10000);
console.log(vm);