VueJs 2.x Lifecycle Explained With Examples
<!DOCTYPE html>
<html>
<head>
<title>Vue Project</title>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<div id="app">
<div v-on:click="updateName()">{name}</div>
<h3 v-on:click="killItAll()">Destroyer</h3>
</div>
</div>
</body>
<script type="text/javascript">
const app1 = new Vue({
el:"#app",
data:{
name:'Roger',
posts:[]
},
methods:{
updateName(){
this.name = 'Andrew';
},
getPosts(){
this.posts = fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(json => console.log(json))
console.log(this.posts)
},
killItAll(){
this.$destroy()
}
},
beforeCreate(){
console.log('Before Create Fired');
},
created(){
this.getPosts();
console.log('Created Fired');
},
beforeMount(){
console.log('Before Mount Fired');
},
mounted(){
console.log('Mounted Fired');
},
beforeUpdate(){
console.log('Before Updated Fired');
},
updated(){
console.log('Updated Fired');
},
beforeDestroy(){
console.log('Before Destroy Fired');
},
destroyed(){
console.log('Destroyed Fired');
}
});
</script>
</html>
Video Guide For this Code Here