So today we'll learn about methods and computed properties. So before we jump into methods or conference, I just want to install a small library called a skeleton. So skeleton is a CSS library similar to bootstrap. But skeleton is very, very lightweight, and generally makes your project look a lot nicer. So here we have our test project. And this is how it looks.

So we can install sea skeleton by copying the minified version. So by installing skeleton, make sure that you're installing the minified version of it, because we're not going to be using skeleton on a huge scale. And our use of skeleton is very, very low. So we don't need the full skeleton CSS. So we can take the CSS and go to index dot HTML in the view project, which we set up in the last video. So inside the index dot HTML, I can create a new link with CSS and inside the head chef, I can paste the skeleton link.

So as soon as I hit save, you can see that my budget refreshes and my phone has been changed. So with that setup, we can go inside our code view, and we can comment out the image and the Hello World components. We should have a blank slate. So here meta properties looks neat, right? So one thing you might remember is that while installing view in the previous projects before the vcli, we use data as an object, right? When you're using data properties inside actually view project, what happens is that the data property is unique for each and every component.

So each and every component needs to have its own data property. So if we use a data property as an object, it gets shared between all the components. So to prevent that view doesn't allow us to use data as an object. So if we can see, we had the console error that says data options should be a function that returns a per instance value in the component definitions. So we can do that by changing the data into a function which returns an object. And inside this object, we can have the data properties.

So this case doesn't apply to properties like components or methods because the properties properties are only called when the component requests them. So until then they don't have to be unique for each and every component. So with that said, we can create our methods properties. methods, again is an object. And inside these methods, we can have a JavaScript functions. So methods are nothing but JavaScript functions.

And if you don't know what JavaScript functions are, JavaScript functions are used to execute a set of actions. So for example, we can say full name. So we created a new JavaScript function or method and full name we can return. So this method, full name, returns a string, which is from Krishna. So how do we access This method, so you can access this method very much similar to the data properties we can have we can have a p tag and inside that and inside the p tag we have My name is an interpolation. And inside interpolation, just like we access the data properties, we can access full name.

And since it's a method, we need to have the brackets. If you stay in this My name is computational. Let's just make it a lot more bigger than where it is right now can use the h3 and our scale right. So methods can do a lot code. For example, in the data properties, we can have two variables or two data properties that says a variable A, which has a value of 20 variable b, which has a value of 10. And inside this method, we can return the product of these two variables.

So when you're working with JavaScript and when you have two variables and you want return the product of those two variables, you can have this method name as multiply, you can say return variable A into star variable right. So, now by this sense, you can change multiply here as well. So, it should it should say the product is multiply, so this multiply will multiply the variable a and variable b. So let's see what we get. If I save I get an error, it says variable a is not defined. So why are we getting this error?

We clearly have variable a here. The reason is that you cannot distinguish between local variables versus the data properties. Let me give an example. Now this method will work if I have two local variables. Now we can see the profit is 200. The reason is, when you're returning variable a and variable b is looking for these variables within this method within the method multiply.

So when in the previous case, when these two variables were missing, JavaScript will throw an error that it doesn't find the variable eight, or the variable is not defined. Now to access the data properties inside a component, you just need to tell view that we're accessing the data property of this component. So you can use the this keyword when you say this dot variable A into this dot variable P. So what this this keyword does is it references that you need to get the property variable a from the data property of this particular component. Similarly for the variable b from the data property of this component, so when we save this, the value is again 200. So when I refresh the value is also 200. So these methods can also accept arguments.

For example, if I want to send in to, so what I want to do is, I'm going to receive another variable multiply with and I want to multiply variable a variable b and this new variable multiply with which has been passed on to an argument. So what I can do is when I say into a star, multiply with since multiply with is a local variable, we don't need to use this when we if we use this, it is search for the variable inside the data properties. So when we hit save, the product is 400. All right, so let me show you one amazing view property, it is called as V model. Let's say we have an input property. And the property of the input is enter a number to multiply.

So what I'm doing is that I want this to be variable to be dynamic. So we create a new data property that says, dynamic, readable. Right. So, in the multiply, we will send the dynamic variable. So just like we discussed in the previous lectures, which if you haven't watched the links are down below, the template is bound to the script. So while we are referencing the data properties, or the measure properties within the template, you don't need this.

So inside the multiply method, I'm passing in a dynamic dynamic variable, this dynamic variable is passed in through the argument. and here we can also rename it as dynamic variable and he also dynamic variable or for better understanding, we In this scene it has local dynamic variable and this has global dynamic variable Right, okay. So, now, what I want is that when whenever the So, what I want is that whatever the value or whatever the number that the user enters inside this input tag, I want it to be assigned to the global dynamic variable. So, view is reactive by nature. So, what it means is that whenever the global dynamic variable value changes, the multiply function gets executed, which means, this whole thing is recalculated and the place where the product is displayed and the value is displayed also gets updated again automatically. So, one way we can bind the user input to this variable called as global dynamic variable is by using the model.

Instead, as we model we can place global Double dynamic variable. And if I want to, we can just change it to number. All right. So what I've done is that how, how bound this global dynamic variable to this input input component, so this V model access event is known. So whenever the value inside the input component changes, or inside the input element changes, it assigns a value to the data property global dynamic variable. And whenever the global dynamic variable value changes, this multiple of this multiply function is going to be executed.

And this extra value is going to get updated. So, let's see. So here I have an input that and it's asking me to enter a number. So if I enter food, you can see that we don't even have to refresh the page view automatically changes the values corresponding to that variable. And we can have fun with it. Whatever you enter is instantly reflected.

So these are methods What are computed properties So to understand computed properties, let's take another example. Let's say I want to calculate simple interest. And to calculate simple interest, I would need three different variables, I will need the principal, I would need the interest and I would need the rate. Let's create those three data properties right. Now, I want to calculate the simple interest. So, the way we calculate the simple interest is we have a formula right.

So I use the interpolation and for interpolation, I can also perform multiple operations. So instead of multiply here, I can also directly perform this operation. Variable a, maybe will be into global dynamic variable, and the result will still be the same. So instead of simple interest, what we can do is We can see principal into interest into trade by 100. All right, so as of now, the simple interest is zero because principal interest rates are zero. So we can create three more input variables which are bound to principal interest and rate data properties.

So now we have three different input variables which are bound to principal interest and date. So, whenever one of these three data variables changes, the simple interest value also changes. So, let's check it out. Alright, so now that this is working. And for example, let's say that the simple interest text was not there, right. So when a new developer comes in is trying to understand your code, he will not understand what this formula means, or if the formula is way too long, it will be way too hard for him, it will be way too hard for you or the new developer to debug it.

So enter computed properties. So, computed properties are very much similar to data properties. So, one thing you need to understand is that computed properties also have the syntax of an object same like methods and components. So, instead the computed properties we can have a property that that says return simple interest. So, computed properties I like to call them as Advanced Data properties. So, these are basically data properties with much more functions return 100 and if we want we can have this all inside a bracket as well.

So, we can use this return simple interest computed property just like we will use a normal data property we don't need to specify any back For this because it's a computed property. So when we go back, it's the same thing. Right? So by using computed properties, your template looks a lot more cleaner. And if any new developers coming around, he or she can understand what you're trying to do much more easily