Basic Hooks, Functions and Properties in Components

[mostakimvip06]

Let's start from the beginning. What is a component?
Look at any website. By following the standards, I assume that it has elements such as menus, links, buttons, sliders, etc. Each of these elements is a component used on the page. It is important to remember that a component can also be a collection of smaller components, up to the basic element on the page. In the example of the menu, we see a whole collection of elements, from a simple link to more or less complicated elements that expand and collapse. The whole thing creates a "menu" component, while inside this component there is a single component with a specific element.

In the case of a dropdown, we break the component into even more components, for example a link in a dropdown element. The main advantage of breaking elements into individual components is that we can use them whenever they are useful to us .

So, take a look at the visual example. Below I have presented the menu of our website. See how many components it can be divided into. With each individual color I have marked one component, which ultimately makes up the entire menu.

Components
The structure of a component prepared in Visual Studio Code
The component consists of three main elements:

Template , or HTML structure that will be used on the website. It is worth remembering that there can only be one element here that wraps around the entire structure of our component. In the example, under the text, you can see the element that will contain the entire structure.
Script , i.e. all the functionalities that the component will support
Styles , simply styles that will give visual appeal to our component. The "scoped" attribute allows you to interfere only with a given component. This means that if we have more elements of the same class on the page, then using bulgaria telemarketing data this attribute, it will not inherit styles from identical classes on the page.
Code with components
Basic functions and properties available in the component (Options API) that Vue.js offers us
Props - these are values ​​or arguments that we pass from the parent to the component that we want to create. This allows us to manage content in the component or perform operations in it based on the values ​​of another component. The values ​​passed in props can be static or dynamic. Below we will create a prop in the component that will receive a name and then display it on the user's screen

Creating a prop:

Creating Props
Rendering a component with a passed prop:

Rendering a component with a passed prop
Data - is a function in a component and can have one or more variables. The scope of these variables is limited to the component. Variables can be initialized to a value or simply assigned a type. It is important to note that the function must return an object with properties.

Date function
Computed - According to many people, computed is very similar to the Data function, while computed has many advantages over the above described function. Computed, most importantly, listens for changes in the values ​​that are used. We can return filtered data or values ​​calculated depending on conditions right from the start. Computed properties are used for frequently changed values ​​displayed on the page. It is also used for more readable code maintenance.

Computed function
It is worth adding that if the “age” variable were passed in Props, we could check the age of each newly added person right from the start, as soon as the component is rendered on the page. Notice how clear and understandable the age information is displayed in the “Template” section.

Methods - in this property we define, as the name suggests, all the methods that the component will handle. The difference from "computed" is that the method must be called for the values ​​to be updated, while in computed it happens automatically if a change is detected on the listened variable. Note that in the example below, the button listens for the method to be called after being clicked. Only then will this function be called.