Learning

Components have the same structure as the examples that we have been working with up to this moment, i.e. a template part containing HTML markup and a controller part containing the Vue app's logic.

When a new Vue component instance is created, it goes through a series of initialization steps such as data observation, template compilation, mounting data to DOM, and data updates. Through these initialization steps, Vue invokes functions - "lifecycle hooks", that give users the opportunity to add custom code at specific points of its lifecycle.

Watchers are another option in Vue as "computed" properties are. We declare watchers by adding a "watch" property inside the Object we pass inside Vue's createApp() function, then passing the names of variables we intend to watch for changes as subsequent functions names inside this property.

Of the most important activities in web applications is form interaction. We use forms for user authentication, providing feedback in the form of comments and answering online questionnaires, rating things such as books or contributing to polls, filling in address information on e-commerce websites, writing e-mails, and the list goes on.

We can package component styles in named selectors e.g the class attribute, then change it on state changes, or we can in-line our styles within HTML elements with the style attribute and directly change the styles when the states change.

In this post we are going to cover list rendering in Vue, simply put, we are going to learn how to list data with the same schema in list-like presentation, within the Vue templates.

Computed properties will only re-evaluate when one of their dependencies have changed. This is an important characteristic as it helps save on physical resources, especially when running complex expressions that require a lot of computations.