<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
Vue.config.productionTip = false;
function tm(ms, msg) {
return new Promise(resolve => {
setTimeout(() => {
resolve(msg);
}, ms);
});
}
function out(msg) {
document.write(`<p>${msg}</p>`)
}
const asyncCycle = new Vue({
async beforeCreate() {
out(await tm(4000, "BEFORE CREATE"));
},
async created() {
out(await tm(3000, "CREATED"));
},
async beforeMount() {
out(await tm(2000, "BEFORE MOUNT"));
},
async mounted() {
out(await tm(1000, "MOUNTED"));
}
});
asyncCycle.$mount("#app");
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.