Something that you absolutely need to know when you approach Vue.js for the first time is its Lifecycle Hooks.
You can go deep to start writing your JavaScript logic inside methods or computed properties and so on. Of course, I understand that when you are excited about learning a new technology you want to see it in action fast (I did exactly that btw ), but I guarantee you that understanding these Hooks will give you a strong foundation to learn this Javascript Framework.
If you get confused with methods and computed properties when you start with Vue.js, I suggest you read this article.
The Vue instance
The core of Vue.js is its instance. Every Vue application starts by creating one and it is an object that will help you to create your desired behavior.
The Vue instance contains different options[1]: data, props, template, methods, computed, watchers, lifecycles and much more.
As you can imagine the instance is the responsible for different things, for example setting data observation, compiling the template, mounting the instance to the DOM, updating the DOM when data changes and others. I invite you to read the documentation here if you are interested to know more about all these arguments.
The Vue lifecycle hooks
The lifecycle hooks are functions that give you the opportunity to add code at specific stages.
There are 11:
- beforeCreate
- create
- beforeMount
- mounted
- beforeUpdate
- updated
- activated
- deactivated
- beforeDestroy
- destroyed
- errorCaptured
