Intro to VueJS lifecycle hooks with examples
In this post we will give you information about Intro to VueJS lifecycle hooks with examples. Hear we will give you detail about Intro to VueJS lifecycle hooks with examplesAnd how to use it also give you demo for it if it is necessary.
we are going to learn about lifecycle hooks in vuejs with the help of examples.
LifeCycle hooks
LifeCycle hooks are some methods which run from component creation to destruction.
beforeCreate method
beforeCreate method runs synchronously before a component instance is initialized, it means in this stage data properties, watchers, events are still not set up.
example:
<template> <div> <h1>Vuejs lifecycle hooks</h1> </div></template><script>export default { data: function() { return { msg: "Hello vue world" }; }, beforeCreate: function() { console.log("before instance is intialized"); console.log(this.msg); // undefined }}created method
created method runs after a component instance is initialized,it means in this stage data properties, watchers, computed properties and events are set up.
example:
<template> <div> <h1>Vuejs lifecycle hooks</h1> </div></template><script>export default { data: function() { return { msg: "Hello vue world" }; }, created: function() { console.log("after an instance is intialized"); console.log(this.msg); // Hello vue world }}beforeMount method
It runs before a component is connected into the dom.
Note: This hook is not called during server-side rendering.
example:
<template> <div> <h1>Vuejs lifecycle hooks</h1> </div></template><script>export default { data: function() { return { msg: "Hello vue world" }; }, beforeMount: function() { console.log("Component is still not connected to dom"); }}mounted method
It runs after a component is connected into the dom.
example:
<template> <div> <h1>Vuejs lifecycle hooks</h1> </div></template><script>export default { data: function() { return { msg: "Hello vue world" }; }, mounted: function() { console.log("Component is connected to dom"); }}beforeUpdate method
It runs when data changes, before the component re-renders with the updated data.
example:
<template> <div id="app"> <h1 ref="h1-element">{{ msg }}</h1> <button @click="msg = 'Msg is updated';">Change msg</button> </div></template><script>export default { data: function() { return { msg: "Hello Vue world" }; }, beforeUpdate: function() { console.log(this.$refs["h1-element"].textContent); //Hello Vue world }};</script>updated method
It runs when a component data changes and component re-renders with updated data.
<template> <div id="app"> <h1 ref="h1-element">{{ msg }}</h1> <button @click="msg = 'Msg is updated';">Change msg</button> </div></template><script>export default { data: function() { return { msg: "Hello Vue world" }; }, updated: function() { console.log(this.$refs["h1-element"].textContent); //Msg is updated }};</script>beforeDestroy method
it runs before a component is destroyed.
destroyed method
it runs after a component is destroyed.when this method is called it removes all directives, watchers and event listeners attached to the component.
Change default configuration name of Laravel's created_at and updated_at
In this post we will give you information about Change default configuration name of Laravel's created_at and updated_at. Hear we will give you detail about Change default configuration name of Laravel's created_at and updated_atAnd how to use it also give you demo for it if it is necessary.
In this Laravel PHP Tutorial, I will let you know the use of created_at and updated_at column in a database table.
By default, Eloquent automatically maintain the date time value in created_at and updated_at column on your database table. If you do not want for eloquent to maintain created_at and updated_at columns then disable it by adding following property in your model class :
- class Member extends Eloquent {
- protected $table='members';
- public $timestamps= false;
- }
class Member extends Eloquent {
protected $table = 'members';
public $timestamps = false;
}If you want to map Laravel's timestamp from created_at to created_on and updated_at to modified_on then you can override const on your model in following way :
const CREATED_AT = 'created_on'; const UPDATED_AT = 'modified_on';
Now Eloquent will take care of the column "created_on" and "modified_on" on your database table.
How to disable created_at and updated_at timestamps in Laravel Model?
Label :
PHP Laravel PHP Framework How To MVC Web DevelopmentHope this code and post will helped you for implement Change default configuration name of Laravel's created_at and updated_at. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs
example:
<template> <div> <h1>{{ msg }}</h1> <button @click="msg = 'Msg is updated';">Change msg</button> <button @click="$destroy();">Destroy</button> </div></template><script>export default { data: function() { return { msg: "Hello Vue world" }; }, beforeDestroy: function() { console.log("before component is destroyed"); }, destroyed: function() { console.log("after a component is destroyed"); }};</script>Hope this code and post will helped you for implement Intro to VueJS lifecycle hooks with examples. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs