VueJs 2.x Lifecycle Explained With Examples

By: Manu
4 years ago
<!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