Vue JS - Fundamentals for Beginners with Examples

1. 01. Course Introduction: Hello and welcome to the View Jay's fundamentals course for beginners. My name is warm. She and I'm glad to have you here. So what is this course all about? In this course, we learn about the fundamentals of you. Jay's from scratch. By the end of this court, you'll have a strong grip on the fundamentals as well as you can start developing your own projects on view. Js prerequisites. In order to fully understand and make the most of the scores, you need to know html, CSS and JavaScript. So these are the topics covered in the course. So first we look into war different and frameworks, and among these friend and frameworks, why you need to choose future? Yes on. Then we'll add view into a website. Then we look into the other properties. Then we'll proceed to look into view, see Ally, which is a very handed tool to create view projects. Then we look into mental properties than computed properties. They will also look into data binding to a data binding events and even modifiers. Keyboard events, mouse events, watch properties and components basics. Then we'll proceed to look into conditions, rendering props and custom events before directives. Lifecycle hooks viewed out. I am programmatic, routing, dynamic routing. But then we'll have some more examples on routing and dynamic routing. Then we look into mix ins. Then we'll look into how to find jobs on futures, even if it is a full time job or freelancing. Maybe look into water, the websites and the resources you can use to get Broken View Jr's as well as this. In the next lecture, I'll be giving you willing to take a tablet positivity where you can find all the court for each and every lecture. All right, let's get started. 2. 02. Front End Frameworks: so few days is a friend and framework. So what is a friend and framework? So frequent Rainfall can be described as, ah, collection of libraries or blogging thing, much more simpler terms that are used together to create much more efficient and faster than publication or website. So these Web sites were created by using friend and train books, a Cordless Web applications or relapse. Does it don't for these obligations? Call us SPS meeting single bit application. So as of knowing in the industry, there are several different frameworks amongst them, the most popular ones are and reacting view, which is the one we're going to look into today. So to better understand what is the single best application? I was adorable. Website. Begin looking to a small example. SPF was plates, so we goto Amazon Norton. So William does into them Amazon. I just want to go to some of the page, for example. Let's say I'm going toe Amazon. Be so whenever I click Amazon pay, you can see that the whole navigation bar as well as the whole country below it gets real tender or rebuild from scratch. But using print and frameworks like angler reactor view Web sites like YouTube Verbal. On the other hand, YouTube is a single bit application, meaning this functions much for, like your mobile part of the YouTube. So the currently the same example in this case when you see the navigation bar but as the underside menu, these these two things, they get lured up orbit once the only changing but in YouTube, is a content here between these two parts, generally in front end frameworks terms these single sections of the website like navigation bar for their or the SaiPan, and these are called its components. This is how we divide the website into different different parts in front and three months as we go forward, you'll hear the word complaints a lot much more frequently. And as you get much more acquainted, evicted and you, how much more practice of different and DreamWorks, you don't decide much more better. So, for example, is a navigato, the training part of YouTube. So what happens is that my life getting toe are there section of dams on being the whole website gets rebuilt, right, but I navigate to training part of the YouTube. You can see that just a section that has the change in content gets rear ended or rebuild, whereas the side panel and the night vision bars remains constant. So why beauty is so in terms of French and frameworks. We talked about under and react and beauty, so these three are the most popular frameworks out there. So why do you need to consider Buijs among these three? So one of the most major reasons to choose Huges or under react is that it's amazing the light it's past. It's flexible, strong community and very little income. So lets go of those points one by one. So, like so why loading any framework or library or into your website? You need to make sure that the free market library adoring is very light or very small in size. So that is something that's a Lord times on much faster performance. So in terms of that view, Jace is extremely. It's known 16 to 20 Gaby, that said, I need them so fast, since it's very light and extremely fast. In terms of facts, flexibility, beauteous is known for its flexibility. You can be used to be less more preaching your existing website or such as if you have a website already lying around and you want to be less more part of it using you. You can do that. You can used to indicate a small part of your application or to bring your whole application around it. So view is that strong and same time that flexible, strong community. So view Jace has one of the best communities. Laying it on very low learning curve means that it's not asked us full to learn. Beauty is as it is with anger or react. So for letting you, you just need to know each demon season telescope, that's it on yourself. All right, then, So that's for this video. So in the next video, we'll look into how going to get you into your existing application. 3. 03. Virtual DOM: all I just before we go any foot that I just want to talk a little bit about virtual dorm. It's going to be a very small lecture. So virtual dome is kind of a technology or a concept that is used in view to manipulate actual Dom. So Dom means the current object mortal. Right? So what essentially this stone means is that whatever you see on your screen, if the dome so all the elements that b deck html, all these come into the dome, so view uses something called virtual dome. So this concept is very much common. So another framework which uses the virtual dome is react. So angler also has kind of a virtual dome. But it's exactly not for Children. It has its own implementation off it so But keeping it aside, what this vulture dome actually does is it's kind of a blueprint. So, for example, imagine if you have a big box right on inside this box. You have small and swallowed bricks and you want to arrange all the bricks into a certain order. So to do that efficiently, Urinson breaks only when they're not in order. So you leave the bricks, which are in order, and you just only move the bricks, which are not in order. So this is something very similar that what would your doctors? It only updates a dorm on the part, which is required so it doesn't operate the whole dorm. It kind of like updates it only when it is required, meaning when we're changing stuff on the dorm. The virtual dorm can be edited very, very quickly. Then later, during the rendering part, Virtual Dome figures out WorldCom parents, or what parts of the actual Dominic's to be teens denting just only that. But so essentially making it a lot lightweight and efficient approach. So you don't need to worry that much about what your job. This is something that happens in the background, and you take scared most of that. But the thing is that it's good to know that nothing like virtual room exists on that sort . Controlling your dump on it before we go any further. These are the links, So for the world subgroup, it's re blind dot l y slash I am Vicky Ward sub and for the gettable oppose it reviewed all the court will be hosted for each and every lecture. It's rebranded advice slash and we could get help. So in the world subgroup, you can text me on. You can ask questions. So that's it I'll see in the next one. 4. 04. Vue Instance and Data Properties: Hello and welcome to your first lecture on beauteous like we discussed in the last lecture . You Jay's is very flexible, right? So we can use view Jay's to add a small functionality into existing website. All we can really hope complete website around Beauty s so before we go further and we look complete website or by Bob around you, Jess, we'll look into how to establish or integrate huges into the existing website. But example, if you already have in its demon website and you want to add huge is onto it, you can do that as so. So now let's open up the folder. I'm going to create a new directory that says view project. I'm going to go into that charity on inside its territory. I'm going to open up visual studio cord. So if you don't know, this is to the accord is a coordinator so he can use sublime text or atoms. So these are some other co editors that you can use toe right in it. It court Soviet territory. What I can do is I can create a new index dot html file is before we go any further, you might want to install the falling plug ins inside with the studio Court. You have this kind of like a small option for extensions inside extensions. I want you to install the lives over extension. This one is by. It would be if you can install this, what it will do? Is it kind of like a small local server in your system? So whatever the tightness, you're doing it in court, you can ultimately see them on your website without having to refresh your website every every now and then. All right, so that's one handy extension you don't have to install. It's not. It's not something complicity, but it's a handy due to have so in our next hour. HTML. Let's have the template up so we can have the template by saying the exclamation mark on tab. So this will get the small template. So before we get into a few days later, get a small example, right? Let's say I have ah h one tag on. I won't I said name. So now we can run this website or we can understand our sultan in this view goals Electoral One. Now what I can do is I can run this by right clicking. I'll get an option saying open with life's over. And if I click it, it should open up in groom. Yes. So now we can see name here. Right? I'll just sum it up, Ali. So now, for example, let's say, want to change the content of the H one type, right? I don't want to have name inside it. So what I'll do is a lot of script file script that says I had a source off abroad. Yes, on as And since we don't have after Jess, we're going to create average es. What I can do is I can give the hatch one and I d I can't see name, and I can see it on inside out Georgie s What I can do is I can say document dot get element by i d. I can see name door in the HTML and it contains the name my actually. So if I save it and go back, I'll get my actual name here. Right? So this is something how you do in plain javascript in vanilla javascript. So now that's a plane, Jascha or the very ledger skipped way off doing things right now. Let's see how we can implement the same thing with view. So first thing what we're going to do is we're going to bring View J a Syrian in your application or into a website. If you don't know what the CBN is, it usually means that content delivery network, a content delivery network, sounds complex. But trust me, it's not. It's very, very simple. We can go to the beauteous daughter official website on. We can copy this link so we can take the script link on. You can come back on and we can just place below or about our script on. With that, we have implemented view on your website. That said, Now we need to know how to use it. So instead of the hitch one, let's create ah def. That saves mean and inside the deal, let's have the H one, and it's leave it blank for now, I intended I mean Internet AB gorgeous. What we need to do this, we need to create a new view. Instance that we can do by saying new view and inside that it accepts an object on that object consist of multiple properties, so the first main important property, which we need to know about is G L. He'll stands for element, right? So basically, what we're doing is we're binding this view instance toward live. So in our case, we want to bind it though this dip with a glass off main. So usually for glass, we're going to say dot mean, but if you have an I d off me and we will see it Hashmi. But since we have glass, we're going to go but dot so dot hell is the first property of this view instance on the next property would be the data property. So the data property is kind of like the property which holds in all the variables. So these variables are reactive in nature, right? So what it essentially means is that so these wait tables, when using the template, observe the changes within the template. So if there are any changes with respect to these variables, these variables update themselves. We don't have to specifically attach any event listeners to them. They update themselves. Hence the SAARC or less reactive variables on all these variables are declared inside the data properties. So the first available which we're going to declare inside the data property is name and that is convinced that we consist off my name. So you need to understand in view that most of the things are in object format, so you need to get used to it. But as you go through, you automatically get used to it. So see how all the vegetables are declared like this. So if I save it now, I can use this variable name or the date a property name, Internal HTML. Now, keep in mind that this variables I mean all the all the properties that critically inside his instance will work only under this live whatever the element of you is attached to. So if I go in, I didn't tell you mean I can see name. So this is called interpolation syntax. So when you do this, what happens is that of you essentially looks for a later property name. I instead of you instance, we have agreed a property core last name and hence is absolute value off this name on this . So if I see it and go back, we should see my name on and we can change it just So we understand it's coming from the view instance. All right, So now let's look at what happens if I tried to use the leader property outside the Dev right? We'll have other Hitch one. We'll say the same thing on Do the name. If I save it, I'm going to get the curly braces as well. Because view is not bound with this element, it's only bound with the elements under this dip. That's the reason why View needs to have a rooted in upcoming lectures. You'll see that you need to have a specific it would if that can bind itself toe on under the road. They water elements are there. It will work on those. So just to recap what we did, let's get another in view instance. So in this case, what we'll do is we'll create up David and I d off New Main and inside the i D. Let's see which one. Let's see, my name is I know what really Louis. Instead, it Abdur Jess, we create a new view instance again, so notice that we can create multiple view instances for multiple Dave's. We can say it went again, and this time we're gonna use hash because we haven't I d id inside. This very good declared to data properties. We have been saved. First name on with the last name. All right, so if I save it and go back, I can use the do names. I can see first name. I could give a small space and conceded last name. So if I say we didn't go back, my name is when she Krishna so that it's more electron view instance on how data properties work. So in the next lecture, we will look into view. See? Ally, I'll see you in the next one. 5. 05. Vue CLI: so the first thing to do is to open the terminal. So if you're on Mac OS are immediately next machine, you can open up the dominant, but you feel on windows, you open up the command from so before we even jump in the terminal. So the first thing nor J start or so. If you go to North, just adore here you'll find dollar for Mac OS. But if you're on Windows, you get dollar for me. No. So if you don't any of the links distribution, you'll get your particularly things distributions version. So you need to donor this and install that. I already have it installs. I'm not gonna install it again. And then we can install beauty lie using north. So for installing the view CLR, you need to type the following command. So npm install type in G so in payment stole hyphen JIA dread juicy alike. So hyphen gee indicates that it's global. So installing for the whole machine on a great views Last Eli means that a dead view is the main package aren't sliced Realize a subset of the package. I already had this install so it should not take me much longer. All right, so once it's installed. So no, we have the views here, like in starting that system. So now we can use view, See, ally to create view projects also to creative u boat that we need to go into specific entry made. We want to create a view projects for me It's here. So here I'm going to create a new view project. So for creating the viewpoint that you need to get the fall in command, it's view create on the project name. So for me, the project name would be next project. One thing to note here is that beause Eli doesn't accept, Captain, it is in your project name. So if I go ahead and give a capital D, I'm gonna get in it. Name can no longer contain Captain litters. Previously responsible induce a light, but since moron to use a light three, it has not been possible. So as soon as we heat and don't get the falling option to select the preset, so precept is nothing but a collection of packages that come along with a view project. So just to see what all features are plug ins that we have available. We can go to manual select features, so first thing we have available is Babel. So Babel is used for JavaScript combat abilities. So if you're running a new Asian JavaScript older browser on the browser does not support the newer features over JavaScript, Baby will convert. The newer versions of jazz come into the older version. For example, if you can work here six syntax in two years. Five Exit typescript You know, types, keyboard or it is beatable. Support progressively, Babs. So if you want to create the progress of a bump, you might want to have a check. I doubt it's a viewed out of these used for navigation inside of you application. So as of Noah, lots like that. What began selected in the future U Ex's Estate Management Library for view sees his pre processors are nothing but sass and less so. If you're not familiar with SAS or less, these CSS three processes that that help us to write better CSS. So this is not absolutely necessary because you can also write normal CSS in view. But if you want right, if you want to have size or less support. If you consider that I'm going to say that. Linder Yes, Land on August of that urine testing and retesting. So these are a couple of testing features which lots of talk about in the future. So once we have seen it, all the required features because Llorente on and since exited the SAS or since s and I go to docs is people. Since I said enter the CSS pre processors, it's asking me which one I want to use at its ass or this Or do you says you can have something Conflict files for each of the creature that installed, or we can have all of them in one package. Find I'm going to have some great package pants. All right, So what the CLI has done for us is it s creative. You project here instrument bm amusing yon. So I'm getting your answer. So if you're using NBN, you'll get NPM amounts of So we're going to the artist project. I'm young. So So if you're wondering what is your union is very what similar to in B M. So it's kind of like a much more efficient version of NPM. It's fine if you don't have it. So the difference is that NPM schedule stuff and complete someone after another. But as John does them or batter Lee making much more faster. So typing your on serve on, we launch a local sober like the one we launched in the previous lectures. So our local Severus whole straight local host 80 80. So this is what you see when you set up your first beauteous application. There's nicer to lower here and say it's completely you just ab on links to documentation Babel cli documentation, essential links for the community. Chad to return news ecosystem in the constants, we can see that you're out of us, which we discussed only of you turtles, which we discussed in the previous like Trump. Okay, so let's see what kind of file inside inside of you project. So for that, I can do court space dot It's an extension for the escort, so we escort. If you don't know visual studio cord. It's It's a neat little quarter. I'm using the escort you can use Sublime or Adam or anything is fine, so but if you're using the escort, you need to go to extensions on install one of the plugging me to score less. Beaudo. So if you did is kind of like a view support for the U. S. Court. It's why buying view by envoy Ghous When you come to the files, you can see that we have a lot fewer files and what we normally have the Lord more disease are given in public. We have the index dot html and instead of the next HTML, we have the abdomen. So, like we discussed in the previous like job, we haven't abdomen. So this is a day which would be working with in export excitedly. Desist. Most of the important fights exist, so we have our main Dodgers. So instead of you instance, it's a little bit different, right? Render an amount in the previous videos what we discussed. Waas, in the view instance, we're going to give an element right in element. We're going to specify whether it's first class or whether it wasn't ready. But here we have Riendeau and we have around. The reason why is that it's rendering a component instructor and trainer Dave. It's sending rendering competent. If you can see here importing view as a plug in, I mean viewers a library, and we're also importing view app as a component. So these doors view fans are called its components. So in terms of you so mostly in front and DreamWorks, how developers deal with stuff is that we deal with them incompetence. So, for example, a website has a head of body and photo header is a competent bodies, a competent and foot is a component. So what happens is that when you have this header and footer as a separate conference, instead of having to read idea court extensively, you can just say to use the conference already existing. So here the inter component is actually mounting the component on to the next HTML so that competent is the root competent for all the activity was would happen your application. So inside this competent, you can see we have other components, were importing conference, and we're dictating them. So let's go with this door. Few file, indeed A so adult you file consists of three parts. It can self template. It can serve a script it can sustain. So this is what makes the door few files so much easier to work with. So we have all the template ing scripting and styling at one place for a single component. Generally, when you work, meet anger. Each comfort has multiple fights, right? So each angle competent has four vials html CSS types Revenge Oscar. But here we have all three month. This might not see much of an advantage that right now, so were scaling up on your project is getting bigger and your conference that increasing the number, it's gonna be very much easier to maintain. So the first thing, the template So the template we have the devil fire the app on inside the day We have an image. They may just the logo which you can see here under that we have this custom component Hello, Word with the message. Welcome to view Just happen So I can just change the message and I can see instant genius. So this hello world is a custom component on this message is called is a problem. We'll discuss more than were props leader. So to use a custom competent, you have two steps. First step is important Custom competent import Hello world from competent slash. Hello world socom parent slash l a word run so inside the export default section in a dried components on Hello word. So one thing, as we discussed with view more something's going to be structurally now object format. So even when you if you have a date of property, you need to have it in object format. Similarly, if you have the components, you need to have their conference as an object and inside the confidence you're going to declare water the conference you want to use. So in our case, hello were then you can use the confident. So if I just commented out, you can see how much of the data was actually from that component so we can go to hell overlord few, and we can see that. So everything that is here is being rendered in a rhabdo review. So any change in making the Hollywood competent automatically gets reflected into the app you competent and automatically gets affected onto. The main beach style is CSS. There's nothing special about that, so you can use with your language a comfortable, but I ain't even in script. You can use script with Charles Company. Can you script with typescript? So these are kind of like the main find switching you to know about before starting of you Project. I know this year package or Jason. It consists of all the scripts and all the dependencies that you're using. In our case, we're using view. So that's it for this video. In the next video, we'll discuss, as promised, aboard conference and methods inside our new view project. And we're also going to look at use cases like how to use conference and how to use methods . So most of the upcoming developers have, ah, little bit of confusion when to use computer properties and went to use methods. So we're going to look at that with some more examples, so you can understand that I'd context to use this kind of like properties. 6. 06. Methods and Computed Properties: So today we learn about methods and computer properties. So before we jump into my head circumference, I just want to install a small library. Corliss skeleton. So skilled in is a CSS library similar to bootstrap, but skilled. It is very, very lightweight and generally makes a project look a lot nicer. So here we have our test project on this is how it looks. So we can still see skeleton by copying the unified version. So by installing scared, didn't make sure that you're installing them unified version of it because we're not going to be using skilled in on a huge scale and use a skeleton is very, very low. So we don't need the full skeleton CSS so we can take the CSS on Gordon extort html in the view project, which was set up in the last video. So inside the next HTML, I can create a new link I would see assess, I'm inside the head Chef Aiken based the skeleton link. So as soon as they hit save, you can see that my project refreshes and therefore it has been changed. So with that set up, we can go inside out good view on, We can comment out the image and the hello world components. We should have a blanks lead. So here, medicine liberties looks need Right? So one thing you might remember is that by installing view in the previous projects before the view, cli used data as an object. Right when you're are 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 competent needs to have its own data property. So if you use the detonator 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 you can see we had the concert letter that says date option should be a function that returns apart instance value in the competent definitions So we can do that. But changing the leader in the function which you're Dunn's an object, and inside the subject we can have the reader properties. So this case doesn't apply to properties like components or methods, because the problem these properties are only called when the com printed Kristen. So until then, they don't have to be unique for each and every component. So with that said, we can clear dramatic properties Methods again is an object. And inside this material, we can have a JavaScript functions so much there's nothing but javascript functions. And if you don't know what javascript functions, heart does good functions had used to exude a set of actions. So, for example, we can see fully name So we create a new javascript function or mattered on full name. We can't return so that this mattered Full name returns a string with a swimsuit. Krishna. So how do we access this? Mentored so you can access This mattered very much similar to the data properties have you can have a big bag. And inside that and inside the P debt we have my name is an interpolation and insert interpolation. Just like we access their data properties. We can access full name. And since it's a matter, we need to have the brackets. If you say this, my name is one traditional. Let's just make it a lot bigger. And where it is right now, you can use a history. I know it's guilt. I so my kids can do a lot for. For example, in the data properties, we can have two variables or two data properties that says available A which has a value off 20 where they will be, which is a value of 10. And inside this matter we can return the part off this to vegetables. So when you're working with JavaScript and when you have to valuables and you won't return the part of those two variables, you can have this met. Her name is my reply. You consider it done media, but a and don't stud variable B, right? So no, by descends, you can change might apply here as well. So it should it you see him, the product is multiply so this multi play will multiplied available in and where they will be. So let's see what we get. If I see I get a new one. It is very ability is not defined. So why are we getting the center? We clearly have very billy here. The reason is that view can or distinguish between local variables. Was this the detail properties? Let me give an example. No dismantled will work if I have to. Local variables, no vacancy the part is 200. The reason is when you're returning variable in the way they will be it's looking for these variables within this method within the metal multiply. So when in the previous case when these two variables were missing dusted with through another that it doesn't find available eight or the variably is not defined now to access the data properties instead of confident, you just need to tell view that would accessing the data property off this component so I can use the discovered. But you said this start very early in this your feet it will be so what this this keeper does is it references That view needs to get the property video with a from the date of property off this butler component and similarly for the baby will be from the data property off this component. So we saved this the values again 200 when I refresh the value of 200 So these methods can also accept arguments. For example, if I want to send then so what I want to do is I'm going to receive under available might apply for it on I want to multiply variably variable be on this new variable multiply with which has been passed on to an argument. So what I can do is when I say in tow, a star, Mike Leavitt. Since my dip Levitt is a local variable. We don't need to use this when we if you use this it to search for the variable inside the data properties. So when he deceive, the part is 400. All right, So let me show you one amazing view. Property. It is called his V immortal. Let's say we have a name for property. Fine. The property of the input is and the 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. All right, so in the multi play, we will send the dynamic Really? So just like we discussed in the previous lectures, which, if you have involved the links are down below, the template is bound to the script. So value difference in the data properties are the middle properties within the template. You don't need this. So inside the my deployment, er I'm passing in a dynamic dynamic variable. This dynamic variable is passed in through the argument on and here we can also rename it as dynamic variable on here also dynamic medium or for better understanding. We can just seen it has local dynamic variable and this is global and I'm a greedy right. Okay, so know what I want is that when Whenever the So what I want is that whatever the value or whatever the number that the user interest inside this input tax I wanted 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 re executed, which means this whole thing is re calculator. I'm the place where the parties displayed the values displayed also gets updated again automatically. So one way we can buy in the user input to this variable called s global dynamic Variable is by using the morning instead, his we mortal can place global double that I make variable on. And if I want to, we can just change it to number. All right, So what I've done is that how about how bound this global dynamic variable input component . So this we mortal access event listener. So whenever the value inside the input component changes or inside input element changes, it assigns the value to the data predictable dynamic. Variable on Whenever the global dynamic, variable value teenagers this might develop this multiply function is going to be executed . I this is Steve I do is going to get up later, so let's see. So here I have an input that, and it's asking me to enter number. So if I enter for you can see that we don't even have to refresh the page view. Automated between is the values corresponding to that variable, and you can have fun with it. Whatever you enter is instant, it effected. So these are methods water, computer, properties. So to understand computer properties, let's take another example. Let's say I want to capture simply interest. I'm to calculate simple interest. I would need three different variables. I will need the principal only the interest, and I would need a raid. Let's create those three data properties right now, I wonder Gallery in the simple interest. So the way we guarantee the simply just is we have a formula, right? So I used the interpolation and said into position. I can also perform multiple operations, so instruct multiply here. I can also that it lead. But from this operation variably really will be in tow. Global enema, credible on result will still be the same. So instead of simply interest, what we can do is you can see principal into interest in duplicate by 100. So as of now, the simple interested zero because principal interest rate at zero. So we can clear three more input variables which are bound toe principle interest on great data properties. So we had three different input variables which are bound with principal interest. Indeed. So whenever one of these pretty innovative was changes, the simple interest value also, Tina's so sick you don't. All right, so now that this is working and for example, let's say that this implanted sticks was not dead, right? So very new developer comes in and is trying to understand your court. He will not understand what this formula means. Or if the former is way too long, it'll be way too hard for them. It will be way too hard for you or the new Della book to debug it, so enter computer properties, so computer properties are very much similar to later properties. So one thing you need to understand is that computer properties also have this index often object seem like meters and components. So instead, the computer properties we can have a properties that that sees, but it done simple and dressed So computer properties I like to call them as advanced data properties. So these are basically data properties with much more functions. Are you doing 100 on If we want, we can have this all into the back it as well, so we can use this return. Simple interest company property just like you. We will use a normal data property. We don't need to switch for any brackets for this because it's a computer property. So we've been We go back. It's the same thing, right? So by using computer properties, your template looks a lot more cleaner on If any new developers coming around, he or she can understand what you're trying to do so much more easily 7. 07. Bonus - Computed Vs Method Properties: Hey, guys, this is a bonus lecture. So the reason we're making this is so most of you guys have some confusion between the metal properties and computer properties. You know, when to use what on and also one of the questions have been getting is why can't we use methods for their properties for computer as well? Or why can't use computer from in terms as well towards the exact difference between this story? So let's look into that in this lecture. So what we do is we have this component home lord view on you create mentored property that says returned full name on that turns. Okay, before we can have done anything. It's also have our data property on inside the data property. Let's save you fullest name and we have a last name dismantled. What it does is returns distort first name, place the start last name, right? So it's also have it computed Roberty. So this company property, let's say, returns age, right? It was an inch. It's also have it ate a property that say's age. I'm considered done to start age, so what we can do is we can have going for properties three s place hold up. I'm a combined it to first name and last name. It's also have on their property. That is bone do the age. All right, so the water want is Let's have a hating dag on inside us. Conceive, my name is here. We're going to use a metal, right? Full name. And it's also have a heading bag. And here we can see you doing persons age. All right, So can save it. I know I can dive my name. I can also into my age. How late so for this according also to this and at this moment space just for as people possess. So we'll also consider look to find out many each month it is being called. And when each computer property is being called computer property has bean court. Okay, so begin how this concert of state moons a boat. It done like so in the beginning, Return and company property has been called. Ok, so now what? I'm doing my name. I'm getting metal Property has been caught. Sounds fair, right? So I'm dealing something using the method. So the properties inside the methods are changing. So the metal property is being called on notice. How, though computer property is not being called because we're not doing anything with the age yet, so we'll also enter mine asked last name. So we have the metal property has been called for 13 time. Now. The difference is notice that while calling admitted properties, we're not using the computer properties. But if I division on, if I'm entering my age, you can see Method properties also being gored along with computer property. So the reason why I omitted properties also being executed is so like we discussed earlier . You uses something called It's About Your Dog, right? So what happens is that whenever the virtual room updates, View also updates the metal properties. So what happens is that a lister stayed requires any changes. The competent Robert. It will not be called, but for methods as long as the world system is operating weakened, emitted to be called again and again. So it's usually good practice to use computer properties that method properties, so make your application much more efficient. So that's one example to clarify the difference between mental properties and completed properties on why you need to use on very you need to use committed properties and maybe you need to use computed remedies, so I hope that skill. So that's it for this one. I'll see the next one. 8. 08. Data Binding: so maybe look into data mining. So what is data mining and how to use it in view? And also go to some examples to get much more understanding of the concept? The first thing we'll talk about this we moral. All right. So the moral is also a kind of a data binding attribute that to use in their previous lecture. But the moral is mostly used for to a data mining. So we'll start off a data mining and just covering everything out. All it have come into the previous court out. But I do manage each of the lecture into a separate branch so you can go to a specific branch and you can access the core for that lecture. All it let's see, I have any dog. And this points to my website on my website. Lingus make it Gordon. So if I go here and click on it, I'm going to my website. But what if I warned this to come from a data property? What if I want this to be dynamic, right? So what? We lose? We're going to create date object. You know, data has to be a function right on inside the Dedeaux. We're going to created an object inside that. So what if I want this data property to be binding with this attack? Now I want this data property toe be the link which which this attack points toe. So previously we displayed the data properties inside his table templates using the interpolation method. Right? So can we do in preparation in this case? Let's see what happens if I do This view is going to give it another. It says that every complete combined intemperate The reason is this is nor divided Syntex. No big not buying data properties Two attributes just like that. Now, if you want to bind our dynamic property authoritative property to an antidote like head Chef, What we have to do is really to see we bind. SME couldn't. Now this becomes our enemy property Now inside this weaken bind it. Do any of our data properties for example Website link No receive ID there it is gone. And if I lingered, it goes to my website. No, the amazing part of this is what it is. Yeah. No, the amazing part of it is I can write anything here again. Go to Yeogu not gone and I'll be gone through google dot com So one more need drink. What we can do is we can remove this on up here. You can have any input. Dad. You can see him in the morning website link inside this place and Internet upside you are. So what happens is I had this input tax and whatever the whatever the you are like typing, it is going to be automatically binding toe this particular attack. So as of no, you can see the attack is pointing to local host 80 80 time. Now, do not come and it shows google dot com. So now if I want to go to go Lord home, I need breast Be Yes on. Okay, This meaning to them with the dot google dot com that simple, that becomes my website. All right, so that is how you can bind data, properties, toe different attributes. Now we can do much more interesting things than just creating a dynamic link. What we can also do is we can create a dynamic class, right? Let's take it out, for example, would begin to us. We have a catch four tag that says I'm a heading. Right? So for this we have a class that taste active. So instead of script, we can see active means bad runoff like blue. So we have a heading bag and its bad loans like blue. So what if I want to make the background dynamic or I want to switch on and off the background. I wanted artista class active whenever they want and remove it from whenever they want. Now I want this class active, Toby Dynamic, right? I wanted to be conditionally be active. What? I wanted to be conditionally not active. So what I'm going to do is I'm going to buy into this class today the property. So what we can do is insanity to object. We can create active bad one. That is say they'd say to So we can make this class dynamic placing once again be mind we bind. Bless Now inside it, we're going to create object. On first thing is going to be name of the glass that is active. I'm the leader property that should be a boolean with, say's if the classes active or not for us. The reader properties, active background So what does this mean? So we're making the class property dynamic for this heading by making the class active, said toe true or false? This act about your incident, a property which is a bullion right? So as of now, that is a property Acto background is too. So when I hit save there won't be any difference. But when a change is active background to falls, the background disappears. So one more interesting thing what we can do A data mining is have dynamic styles, right? So for example let's say I have a heading that has my name on it. All right, Soul, I want to stay to be kind of blue. I haven't blabbed. All right, So what if I want this color property to be dynamic? So once again, what we can do is we can be blinded. Do you mind this? So one would need to take. What we can do is instruct. Typing would be buying every single time. We can just place the Golan that's also equal into the be blind. This thing should be inside the braces. So we had the color blue, right? So instrument directly attaching blew it. What we can do this we can see we can create a custom color data property. So we go to our data object and inside that create a new property core less system I'm gonna And as if no, we leave it blank. So in, down below, we conclude another input bag and which we mortals could it. So just to understand what's going on here, we have a custom calamity. The property, right so discussed, invalidated property can reorder or its value can be changed. Using this input valuable and once a custom validate a property's value changes the property color inside the hatred bag also changes because it's bound to the custom color property. So when I go to my website, I get in trickle of name. I can see white that makes it disappear. I can see blue. I can see it dead say yellow our village. So what's happening is that whenever the value changes inside input well, the custom color property is being changed on the custom color property is being changed. It's being assigned to the color styling property inside. Go ahead, turn back. All right, so that's it for this one. In the next little be looking Toby moral and a small example between one way data mining into really the burning so that you can understand what's happening, all right. 9. 09. Two Way Data Binding: So today we look into to a data binding. So we have already looked in tow the mortal in the past. So in this elected will just go over it one more time. And then we're also looking towards the difference between me bind and we mortal. And when you when do you need to use what? So I guess most of you by now would be wondering words actual difference between these two properties, like the store directives, we more than be bind. So let's start to get some clarity on it so that you could know I went to use work. All right, so in the previous luxury talked about data binding, right? So we talked about how V buying is used to bind variables so you could think re border is usedto buying the value of a data property. Dual input. Well, so if I have an input for you and I want the value off it and if I want to and I want its value to be there is a corresponding to a variable or to a data property. Why didn't I used to be bind and value? Let's see. Name right. Why did they not do this. I invited. I do. Right? So these are two different directives, almost having the same purpose Getting the data property name to be born with input field. But why did I use maybe more until now? Invited and argues we might. The point is, we buy knees, one radio defining or just here by me. But as we mortals to ready the burning. So now we have to a different fees. One is using be buying and when he's using the morning. So in terms of e by and what happens is the data property is born with a value off the input field. So they never change the data property, the value and change. But whenever I changed, the value that would have operative will not change. For example, if I tried to out, I did a video with or under the dictates of string. You can see that even though these two are linked to the same data property, this name that is using the V mortal doesn't get updated. The reason is it's only boned in one week. So the name is only bounder input field, but the input fields value is not bound to the name. But as in the morning, if either of the two properties change, both of them get updated. So let's try to change the name in the V. Bine. Let's see if it to Knysna be more so. If I add hyphen, develop about are the extra characters. You can see that this value doesn't change. But if I remove this find if I do this, the upper value ultimately changes, right? So the reason is, when you're using the mortal, the name is to be a bone to this infantry, meaning if even if the value changes, it gets up to go to the name, or even if the name changes, it gets updated to the value. So the moral directive is used when you want to read data binding, whereas a be buying narrative is used when there weren't only one redefining. So I hope that skill, uh, I guess this example would be sufficient. So that's it for this lecture. So in the next one, we look into events on duh. What are the different types of events available on? We just goto interaction of the events. Then later we could focus on keyboard events and most events, except it's gonna be a lot of fun. I hope you see in the next one 10. 10. Events - Introduction: So today we look into events, so water events and water, different types of events on water, some of the events that we can get started with. So before we begin as usual, the court will be available on the git repository. So with that said, let's get started. So one main example that we can use to championed events is Riverton's right. So buttons. If we have opportunities quickly and you want to run a function when the button is clicked so you know how to and functions in you were discussed about it so we can use methods that says Collect have function I inside dysfunction, beginning that Lord right now. What do I do to make sure that the metal clip runs whenever the burden is click? So for that we can use something called his events. In plain Javascript, you do something such as on Click, but in huge is your use. Beyond click, I owe it shows right up clicked. So we on. Isn't editor used for events, so we on click binds dysfunction. Click onto this burden, so whenever the button is clicked or whenever though event click happens on this burden, this matter is right, so we'll save it and its ticket out. Click me click. The button was clicked. Awesome. All right, now we can do much more than just the spring Another Suppose we have a counter condo. I know what I want is whenever the badness click, I want the counter to increase. So whenever dis clicked this start counter plus plus Andi, don't click me. The counter increases when I right click the button. Right? So now, since this not counter place, place is just a single line. But since this inclement is just one line, it doesn't need a special function for it or specific method for it. It's good to have a method for all these properties because when someone else comes in, they know that apart good function is happening or if you want to do much more than just increasing the counter, you could easily add it. But so just to show you that you can also be done, we can create. We can remove the Clegg method from here, and we can just implement the counter. Thank you so very fresh. It's still boxing, so if it's a single an operation, we can just do it from here directly or through mattered right? One would need thing. What we can do is we can also use double click. So in task of do you have on click and on double click right so similarly mu to use double click, we need to say beyond I don't like So what happens is we never like DoubleClick, then you in the valiant leaders. Alright, that's it for this interaction off events. In the next lecture, we look into different types, off input events and what all we can do. And once again, this whole court will also be available on get help. So that's that. Let's see in the next one. 11. 11. Keyboard Events and Event Modifiers: all right in this lecture will get some interesting events. So the previous picture we lived at on click and or double click right on. We also learned what events are so in this lecture will look into input events on what are different types of input events available. All right, so let's get started. There are several types of input. Events will go out of you, and we go our age with certain example. So you can understand how to use it in in terms of reelection project. Or how do you know? He was in much for practical sense the first year in which we're going to cover his own blood. So suppose you have an input event, so I just want you to know that all its exact I just like in what event has a placeholder in the name and what they won't do identify from this event is that whenever the user clicks off this input field, be on blood on, exuded with her, so we'll go to the method. Well, say blood, and I'll let the user click off to go over the input field. All right, So what happens is whenever I focus on this input freely and I type something. It's fine, right? So whenever I click out, if it and alert pops up saying that I kicked off the field. So our Miller is used for that. So one morning trick you need to understand is instead of instead of typing beyond, we can just see added so similarly, hold how we use bowling for the B bine. We can use that date for beyond. The next one is similar toe blood that scoreless focus. We can say it. Focus. You have focus. So some believe I rest on this as getting Millard. You have focused. The spelling is onward. Excuse for that. So similarly, What we can also do is we can clear the form we can place those two input variables inside it. I know we can have anywhere Event such that on Submit right. What happens when the user clicks submit so we can see him some big breast so inside this maturity can say submit. So for submit, we can have a button in se type submit on. Don't click the button. It's a submit pressed. I'm so one thing would begin notice. Here is when Whenever the subject is pressed. We're getting sub made. I or what's also happening is the pH gets reloaded. So what if we don't want that to happen? What if I want to? You know, we returned the value off the name, for example. We can, by introducing the moral I can say Name on what if, while pressing submit. I want toe cancer. Log name. All right, so I can end of the name. If isis submit first will get the alert for you, then the basic officious will not be able to see the console log message because it's to me . It's way too fast. What if you don't want this? So what we can do? Is there something called isn't even more defense? So these are the basic events available for JavaScript, and you could mortified that the very commodified is by using the dot afterward door, but event. So what happens is it prevents the default behavior of the subject some protection. So for the sub production, the default behavior is to reload the page or to submit the form right to submit the form. And it tore the page right. So here, if I see my name again. I say Summit. I'm getting my name in the consular. It doesn't reload anymore. This car less even more defendant. There's also another even more effect that is Carla's ones. So the previous one which we discussed his daughter prevent, which prevents the default behavior, whereas start ones make sure that the event is done only single time. For example, we have a button that says Flicked me on a click. We have something for tests. Burdens click. Great so I can have this mattered and against a consular lord, but complete. So usually if I don't mention even modifier, what's going to happen is the number of times I click the button the same number of times I'm going to get the consulate message. But once I added even more defiant dot ones. And if I refresh it, I mean, I'm unable to take part in a second time. So once afflicted, it runs. And that's it. So bad. Good input events. Another one, is it? You don't I guess you might know what does this. So when I go to the input, Really I mean, I press a key. I'm in the keys down. I get the message. So similarly, we have other properties coalesce. Key Up Way will use the same matter, but will say keys up. And if I told the difference between the key of the rent and the kid only renters, the key don't works when the A key is pressed down, right? But whereas the key up works when the key is released, that's it. Keys don't G's up. Keys don't cues up, so there's also one More are needed meant that is just pressed so we can understand whenever the keys breast keeping us so we never type anything. It gets automatically cancel logged. So that's it for the input events and even more diverse. So for the next, literally looking toe mouse events. So whatever friends became captured with Mo's, and we'll have some examples for that, so I'll see in the next one 12. 12. Mouse Events: Hello and welcome back in this. Like to be looking Tomas events In the previous section, we looked into water events and water, even modifiers and order. The different types of events we have available. And we also don't, you know, sometimes off in pretty Vince. Right. So in this, in this lecture, we look into mouse events on order, different types of most events. So there's gonna be a really short one because they're not made, I suppose. Events. So we'll just go with them pretty quickly because we already covered the basics of events, so it should not take much longer. Right? All right, let's get started. So for beginners award indoors, the sound of it are creating our David up class of most on his have. And we just have some hide, and we do It will give it finally pixels off height and looks fired because of it. I'm just to understand that where it is, we can give some color to it. Uh, we'll give it light. According that, should that should be fined. So if I save it should see something. Okay. All right. So, uh, not Mo's night. Fix it. So now we have our Dave that we can work with. So now we want to look at some most events so as it because whenever he wondered, are tryout an event you can either go with me on or you condemn it to go with added it right so you can access most events by typing on Mao's. And these are all the events that you can access. So first, when we look into his most Monsanto, So what happens is this One morning does whenever the most has entered this did or is all orders dip so the baby can trigger it is by associating it with the method. Most of you know we just create the most event matter on inside. I didn't side of script. We're going to create metal object in settlement of subject. We're going to create a most even matter consumer market. Most enter right, So if I save it and if I dig the Mozilla additive, you can see that it been sort Monsanto the consul log. So another similar mouse event is most leave. So no, the southernmost and we're going to look into most leave. It does exactly the opposite of wars end up so very rented Emo's. He doesn't trigger it, but we never leave a Trickle said. So enter and leave it because it right so that the Mao's Leavis under the doing is most move. So what is most moved, as is as long as the curse that is moving inside their particular Dave, it will keep on printing the consulate. So if I go in, But I would just say most move. If I go in and and as a moving the most, you can see that my concern log is being field of it most most. So this motorist regard as my mom's, moves over every single pixel initiative. Another one is most owned, so a za name suggest most, so it really triggered whenever the mouse's click conservative. So if I go in, I click it most clicked right? That's called most down, so triggered whenever the houses down. I know similar to keyboarding, puts key key down and key up. You can also do the moves up, click it and live it moves up, right, so that's it. That's a small it electron Muslims. So I'll see you next picture 13. 13. Watch Properties: welcome to another lecture in this lecture looking toe watch properties. But before we go any further in the biggest lecture, most events and made some changes to the court and have aptitude them and get help. So what? Essentially what teams have done is absolutely the most events into its own individual live , and I just kind of them individually and each of them have given them their own methods. All right, So, for example, there's the moves up. This is most down. This is Muzenda. Andi should be most leave. Anderson is the most move. So instead of having them all in the one dip for your clarity and understanding, I just are divided them into different methods. Lives instead shoots stylings, right? So all right, we have a clean template. So basically water watch properties. So in order to understand words properties, you can kind of like imagine them as an image listeners. So let's say you have a data property right, and you want to listen or watch. The changes have to happen to the data property. You can use awards. Property watch properties would be much more are useful for for meditations when you can evaluate the viability of the data in real time. So let's have an example so we can understand much more better. So what we'll do is we'll create a small form. Inside this form, you can have two input variables. That's a placeholder, all right. Supposedly, the city is a sign up form I for the use of student Justo. The use of them should be more than 10 characters on the password should be more than eight . Guidant's all right. So one day, what we could do is we could have to make a guess. All right, So these messages, I can show them right beside dying trees. So the reason why I am putting these messages rightly said input fields is I just want to know how many characters that are left, right? So usually it would be until password. It's eight hours left. So if I save it, we can see use the name has 10 car just left on past. What has it got this left? I'm sorry. We need two more variables to store the input. So say, use the name. All right, password. And we quickly buying them to these input fields using the moral, and this one is password, right? So whatever the water that extended in putting into these fields will be stored automatically to the user name and password. So now I want to more into these two data properties. Or, you know, now I want to watch these two data properties to understand the length of them and to make sure that they are, please 10 characters long or if it's password. It's eight characters long. So what I can do is I can create another property. Corners watch. It also follows the syntax of an object so intend awards properties I can directly use the data Properties has admitted. Right? So let's say I have using them right. I say Use the name and say it's a matter. So what this index essentially does is this data property is being watched. It's It's kind of like attaching an event is no do available right, So inside use the name, for example. What we'll do is consoled or log this story using it. So whenever the data property use, the name is being changed. The watch property, What is the data property on? Whenever something changes it, our forces or it triggers this method, right? So, for example, if we open the console log and if I am typing anything, you can see whatever the type is being all Put it on to the concert. Look so far removed, bank. All right, so what we can do is with the help of this, since use the name is a string, we cannot put the length of it. So I'm gonna console log it. So if I save it and I start typing, I can see that the length of this thing starts to appear here. So know what we can do is to achieve our desired effect for the foam. We can see him this store using a message equal, then minus this store to use the name Bless left. So everything is tender using in property changes this country cat litter. So they'll into the user name is calculated and it is subtracted from 10. And I added dusting characters left. And this one is it into the data property used in a message. So if I save it and they go out So as I'm typing, you can see that the number of characters left decreases. So I can just a small space here if I can. Yeah, so now it's going into negative Ford means, which means the length of the user name is much more greater than 10. So what if we want it restricted only to them, so we can have a small check that says, if it's a name, not lend is greater Dunton alert. So if I see it this and also what we can also do it. We also had this message on by Save it and I go back As I'm typing, I still have four guarantees left and if I exceeded, there is an alert, all right, so you can also do the same thing with password. Or you can also make sure that one still use the name and password have matched the right amount of terms. You can submit the form automatically, or that would not be that would not be actually practical, but you can do many more cool stuff, is it? And you can also try to add in input events to this form like kind of like create much more intuitive experience toe to make the user understand, like whatever is happening. So most websites kind of like uses, watch properties and imported brands to kind of like as a means for mitt form form validation. So whenever they use the exits, input feel or, you know on blood input event is used can affect to understand the format is right or violated while they're typing that they can find out if the length is right. All of that, including any special characters. So that's kind of stuff. So that's inferred. Watch properties I'll see in the next one. 14. 14. Components : Hello and welcome to another lecture. Great job. Make me, will you? So just to recap what we learned, we learned about what is beauty s we learned about Bear to use you, Jess. We learned about how to indicate beauty is in the website. We learned about data properties. We learned about data binding. We learn about methods computer properties, watch properties. We even learn about to ready the binding. We even learn about events, even modifiers, input events, most events, etcetera. So you learn the Lord So So now, with this fundamental established now, we can really jump into components. So water components were to be used components. We can really understand what makes components so much great on. Why do every friend and framework prefers to use them? So not even not only just view even if you go to anger or if you go to react because complaints are very much useful for quarter use. If you have a piece of court and you want to reuse it, if you want to use the functionality, you don't have relied everything. The first example off component that we saw is hello world component that we saw in the first lecture, right? Maybe set of abuse here, right? By the way, you also learned of you Say, like, great job on that. So let's start off with components. So water components through the most water complaints, we can dig up side. It's Deke Amazon, for example, like we always do so for Amazon. We have the navigation bar, and we had the footage for each and every single page. These took night vision, but and footer will be the same. So these two will have the same functionality. These two will have the same look. So what we can do is we can categorize them into components. The main advantage he ever get by making them into components is we can make this date are dynamic, so let's see what we can do. So first, really, with a high level component, we'll delete it. All right, So to create a new component insider file structure, we have separate folder, call its components. You can right click it new file and we can see headed dot view. So the door you indicates the view fight. It's a view component, so we don't. We already talked about the advantages of door view extension, right. So dark for extension has its own template script on the style, making it very much easier toe maintain and very much easier to understand. So I created a new component. Start off with a basic temperate. I could do that by typing SC and you can see scaffold. And if it was stab No, this is a header component, right? So we want to have whatever isn't headed. So one thing to note here is that each and every component needs to have one main dip or one rooted. So far, this instance we've created day that that's his head up insensitive will create out, um, in a line, right. And if I say David, we will not see anything because we haven't imported it to adapt component so as of now, are so As of now, our website is based on that component, so ab component is what is being rendered. So there is no trace of Heather component inside a component Later, two, later ab component know that there is a header here. What we can do is inside the script. We can import it important hello from and it slash components. Hello so Ed date indicates the source dirty right? So if I see it but still there's nothing being displayed here. That is because we haven't registered yet. So far. They're using a component. We have a subject tack. That's its components. And instead of component, you can see headed. Now the registration part is done. All right, now we have the component registered. We can use it in the template. We can go to the temple. It can see had a with that we have ahead of you. So what happens is that whenever I want to have this head on any page I want, I can just import the component and load it up. It's as simple as that. So in the next lecture, lots of talk about props which will focus on sending it out of the component. So remember how we talked about having that I make you die instead of component. So we can do that using props that that will be the next lecture. So one need thing about component is that we can help Mr Components So head reserve component and inside header, we can have another component. So what we can do is inside components, you can create a new file that says data nor view data component. Right. So instead, header, we can follow the same procedure. First, we're going to import data from component slash data On inside a script tag. You're going to have a components property and its components going to decelerate a component on we can use it. Use it data if I save it. Hi under due to comported. So the data component is being rendered inside headed component. And this header component is being rendered inside the app component. So no one's done headed component. And so what is the header component? And that component could literally All right, so that's it. All right, so that's all right. So the except for the components in direction I'll see you the next section 15. 15. Conditional Rendering: all right, we'll come to another electron beauty is in direction. So in this lecture will be looking into conditions rendering. So we'll be looking into OVI after relatives, for example. They could be situation very want to render a certain element only if a certain value mystery or through a certain values. Forts. Right. So we don't look into how to do that The most is that what we're going to do is we're going to create two forms. So do components. Essentially, we're going to create a log in form that should be logging Northview Another file it sees. But it just typical. So it's artificially this sir form. It's going to be very with some very simple. I remember you should have only one main elements, so I'm having the main form inside. This would have okay, input, placeholder and I use the name so similarly end up password. They should be the end of bastard, right? So we had to register for Mary and we're going toe complicated by hiring former tradition and all because we're just going to look into how to switch components. So that suggested form and the locking form will be very much similar for how this couple really I can have this, and I don't. You do the into the password. So just to identify which one is which we're going to have a head in that log in form and for registration, we have going to have I just for all right. So now what you going to do is we're going to remove the hydra headed component that we imported from the last lecture. And we're going to import though an organ. Also, they just it for me, and it's going to declare it instead the components property logging into Justo. I know we can help boot Logan, you can also have a system, right? If I save it, we can see we have the log in former, especially just so now. We don't want these two forms to be dispirited ones. We want them to be displayed conditionally, so we want to use it to be able to switch between these two forms, right? So let's have a need a property. So, insanity, the property will have a variable cord less show log in, and that should be true, right? So know what begin to is for this component or for any element for that matter, you can have that it took or let's be if all right, so for B if inside this way, if we can have a bullion value in our case, the bullion value is show Logan, I say Sure, log in. And since that a decision component is different from Logan, we don't want to show the physician component for that. You can see if North Shore Logan so if I say then go back, we'll see only only that organ for the reason Here it is. It's basically true, and this falls so I can replace them. It falls and replace them with truth, and that would be very much the same. So display log in. We have surrendered logging only if the value is true or registered Logano live. The value is false, right? So the stroke and also very plays with show log in. And it's going to be because the short not sure log in. We can do this. Otherwise, we also have other director Corliss, we else, And if you have meals, we don't need to specify North Shore logging, so if I save it, we're going to see the logging form itself. No one in distinctly morphing into this. We can conclude a button that is switch forms. And we can have any Brentford in Britain switch forms on this event and have a metered inside. This mattered. We can order the value of shore, Logan. So what I'm going to do is this store show log in is equal to north this door shore Logan. All right, so I'm basically ordering the value of shore organ property. So if the show log in value is, do will change. It falls. If it's false, it'll change it to do. If I save it. No, we have a button, right? So whenever they click a button, the value of shore Logan will be targeted, Which means when you go to falls on when it is false, logging disappeared, and I just herbal appear so I can do this any number of times I've wanted. Now we also have another Derek to call his We else? If so, it's basically if Elsa Nelson right, So inside the we've wanting to know Dad, it doesn't need to be exactly available. You can also have something kind of like an argument So, for example, if I have available that says value and Extent and B if value greater than fight. So if I say that lovingly were displayed on for switch forms, I can see start value called lemon right? So when I click the switch forms, what happens is the value teeniest 11. On this, we will no longer be valid. Hansa changes slowly. They just on it. So what I can do is I can see the start value recorded before, so that now the way of condition is no longer going to be valid. Hence, this will stop rendering and instruct. This register conference will display. So if I save it on excess, which forms are going to the system? Alexa that is controlled and drink. I hope you have an idea for this condition rendering by now, so it's very simple, So it's basically using be if anybody else, we can also use V else. If it's very much similar to that, you can try it on your own. And in the next sector, we look into how to pass props or how to past data into components and making this components dynamic. I'll see in the next one 16. 16. Props and Custom Events: in this section, we will look into how listen data two components how decent data to components and how to get back data from conference. So this data is often referred to as props. So now we're looking to hope to pass data from parent company child component as well as getting back bleeding from child competent, apparent component. So we already have a date. A component we created in the last lecture inside his component. There's nothing much more data. I hate your day. Hi. Emitted a component. So we'll try to send this data this string from the bidding component. For example, if we're in abhor beauty, right? So instead abroad. Really? For data component, we've registered the component under the components property. Now we can use the component and you can save data. This supply refresher Okay, we get nothing because they did not think it here. So we just have ah heading. This is you need to have one route. If so, we'll have big eyes are rooted on inside. This will have unhedged at its one title says Dado component. All right, so we can see the other component I know. So now what we want to do is we want to send data into this component, right? So, for example, let's say I want to have a history tag. I want to have a history dad here. I want to show display a message, right? So this message, I won't descended from the pain and competent, which is abhorred view. To send that message, we will use something called less props. So the data component is expecting a problem with the name message so we can declare it Instead of script bag, we can say props inside probes. We can see the name of the appropriate expecting. In our case, it is message, and this is option, but it's better to have it. It's a good practice to have this, so generally you were just limited message on. That would be it. But in terms of good practice, it's usually good thing to do this. We can declare the type it is a string on, is it required, and it is too. So the significa regional properties to that one little problem I mentioned required. It's true right for this problem, so if I save it an insider, barren component, we're not sending any data. We're not sending the message brought, which it expects, right? So if I go to our website and if I open the console log, we'll get a view warning missing required broke message because we declared that I best through and it's a type string. All right, so now to send this problem message, what we can do is insanity. The component. You can see Gordon message and inside its message, I can pass Idiot of Robert E. So it's created a the property. That's his message. Let's see hello from data component and here we're going to see message. So if I save it, we can see that. So if a refresher on the other side goes away because we're sending in the dodo so we can also send in multiple props. For example, if it's also requiring age, prop against the age type should be number and stay quiet the boys. So since age is not mandatory, we can just say quite is false. And if I save it, we don't get another regarding age because required it's false on. Instead of instead of building component, we can have another property call his age. I'm inside a second. Cendant. Nobody. I'm sorry. So just to display that gauge here age I know age. So a Justin, it's so that is sending data from barren component of child component. But how did we send data from child component? Back toe Been component. So we will use something called us. Emmett. Okay. So really wanting. We will remove data component from our ab Broadview, and we'll import logging component. I will as logging inside the components property and can use it. Logan, I save it. I'm getting better. Card is old log in. All right. Components, right. Its components. So if I save it, have the log inform here. Inside the log in form, I can have a button can say submit. Given your type of submit, we can have any event listener submit and began Prevent the default behavior by saying prevent and we can see sub it form. So instead of script ID, we can have a property instead of minutes Property you can predicated on mentored submit form. But now we just a console log. Concerned about log. Tom has bean submitted. Right? So I saved 10% of I could. The console message form has been submitted. So know what I want to do is inside out. Broadview, I want you to back it up. What I want. But I did have ah, kidding. Bag saying message on inside this message. I remove this message and I basically want to know if the form has been submitted or not. So firstly form has north being submitted. Right? So we can even have an emoji here. So if I see form has not been submitted. So what we want is so when you go to log in form and it hit the submit button, I want the message up here in the Abdur view. No change elect So would begin to is instead of consul logging it. We can say this door dollar mate on submit a late. So basically what what's happening is we can like sending or to trigger to abduct view that the form has been submitted. Right? So here we can receive the trigger by going ed on submit home submitted. So upon receiving this Tigger from the logging component, we can to get our own method instead up component. So on submit. I'm triggering the meter forms submitted. So if I save it And if I goto methods 25 c forms submitted and inside this I tried to change the message toe distort message equal do forms submitted Right, Let's strike if I going to our website And if I hit submit that Mrs gets changed So just to go over what happened here is instead of logging component when the form is being submitted Were emitting an event on the Syrian name is on submit It's a customer Even that we design we are receiving is on summer demand instead of rap you were logging is defined on it on submit on this event occurring We're trying to execute this form submitted method and inside this form sub injured We have changed the message to form submitters so fresh we have form has not been submitted Click forms submitted. All right, so this is how to send data up from parent component of child component Using props on getting back data from child components appear incompetents by using events right. In the next lecture, we look into life second looks of a component. That should be interesting. I'll see in the next one 17. 17. V-for with Props: in this electrically looking to before so far looks intemperance, so it's really fun topic and really easy to understand. So what will lose? Will Decatur New dummy component You just named it dummy Don't View and said this dummy component will have a leader that says, Hey, family component all right, nothing really creative. So instead of script, I really important component, say, for dummy from slash on, we're going to register it under the components property. Say dummy. No, it's a numbing I am a component, right? Or else? A hematoma component. And the so, for example, I've wanted Demi component to be under 10 times. So what I can do is I can called the beast ID several times and save it and having dinner like this or one more matter. What I can do is I can create a for loop. I can see it before component and then. So if I see it, you didn't just end times. So basically what what's happening is we can have this number dynamic also, So what we lose? We created it. Data property that says number that's going to be empty for now and lickin good. That says peace order into the number on. We're going to be mortal. It the number. All right, So what we're gonna do is inside the before syntax component in number. So what's happening? Is it read centeredness atomic component as many times as the data property off number. So, for example, if you have been here between different types of components, so if I save it, we have our enter the number input variable. Now, if I say one will get one. But one thing you notice when I say zero negative coop. And if I see another zero, we're getting three. So basically, we're not getting 100 100 components, but we're getting three different components. Why, uh, the reason why this is happening is the values bring stored as a stink. Right? So the dummy component is being rendered as many times has their godless in the string. Right? So if I have multiple characters, I'll get multiple different components. But what if I don't want that? What if I wanted to be a number? What we can do is either we can convert it in doing, um but by using a watch property using a watch property begins in number on. We can't replace the start number using number on this store number. So if I say this I can see it. Then I'll get then 200. We'll get 100 on every off. Doing this is by I think that's one attribute to the B more than we can remove the watch on . We can go to the mortal and you can see dot number. So if I say door number, it will accept only numbers or if you convert the data property into a number, right? So if I see, then now I'm getting 10. And if I say 100 we get the 100. And if I 306,000 alike so you can see that we should study according showing me that there is another for this particular line. So the reason is, it's like putting index. So usually for a components off. Look, we needed index, so I kind of like identify where they're from. So you have an index, we can say components combo index. I'm not going to get a key past index. So I say this man, it is gone. I'm a compliance, uh, looking fight alike. So all right, as we learned in the previous six applicants and in props to different conference. Right? So, for example, let's see the competent except props. As a number I bought, Did you drop the diapers number on? Is it required? Yes, it's required. So if I save it, I know I replace that Hey MME Component. And I see on my indexes digit. All right, so if I see this on inside it, I can send in the value for dummy component using digit acquittal Index. So if I do this and if I save it, we can also tainted by hiding a plus plus for index. And if I say four, I got +1234 So that's it for this one I see in the next one. 18. 18. Lifecycle Hooks: in this lecture, we will look into life cycle hooks. So water lifecycle looks lifecycle looks at a very interesting concept with the help of life cycle hooks. We can understand when the compromise being created, when it is being destroyed, when it is being updated on when it is being mounted on Lockport. So let's pull in their life second hook flow chart on. We can look into that. So this is the life cycle look, flow chart. So if you can see the first thing, what we're doing is we're creating a new view. Instance all of on creating the new view instance, it sets up all the events and lifecycle methods. So initializing events and life cycles, then what happens is it fires off a life second hook mentor these before creating, created so and water, the hooks that we have outside of low chart. We can use these to ransom court or we can use this to perform an action between these life cycle events. So the 1st 1 is before create, so we can use before create before the view component has the activity and used into it. As you can see after before we have the in shaving off injections and reactivity, right? So after that, the conference is being created. So eso these life's like looks are very, very important. I mean, these lifecycle looks can be very useful. So, for example, before creating create either of these can be used toe perform a network request. So while the competent is being mounted and loaded, we can perform in a truck request on we can get the data and once the conference created, basically checks for an element option. So if you remember from the first lecture when being ticketed view into a existing website , we have an element option. So if it has an element, component will take for temperate option. But if it doesn't have an element component, will you go for mounting? So it will take for the template after checking for the template. So if it has, a template, will compile template into render function. But if it doesn't have a template, it'll compile the elements heart HTM as a template. So then we can go on to before Mountain Mountain, so these two are related to mounting the element going to the dorm or going in the component onto the dome on after mounted. We have a couple of investing lifecycle hooks before operating a Brigid. So these two life second looks can be used when the virtual dorm is being updated or before the dome is being updated or post. The dome has been operated so we can perform some sort of action or either of these lifecycle looks, so we can also more intervention. The competent is being destroyed. So before destroy and destroyed are the lifecycle hooks used for that. So in before destroyed, we could perform some sort of saving action so that we can perform some sort of navigation actions, etcetera on destroyed, post destroyed. You could send out an event or you condemn it out an event, anything you might want to do when your company gets destroyed. Like so. These are the lifecycle looks. So let's try it out in the actual components so we can understand how it actually works. So what really, is we'll start off with the APP component, so instead of have component, will have some data. This is that comfortable, right? So if I save it on, we can use the life second hooks concerned a Script AG similar to any other properties. So we'll start the life secrets from the beginning will create the before creating creative methods before create. So, for every life cycle, Huguely's creating alert message so we can understand when the lifecycle hook is being called after before create, we get the creator. Once created is done, we get the before mountain mounted. So before Mountain Mountain that used to mount the competent onto the dorm. So instead mantra, You can see a load mounted and hopefully after mountain. So at this point we can see the high churn tag. Whatever is here is that component. It won't be. It won't be visible to us until the mountain functions executed. So once the compound is mounted on to the dorm, then we can see the component or I'm sorry. We can see the element. So then we have two more life second hooks before destroying destroyed. I guess, for looking at before the story and the story, we might have to create another component. So for now, we'll just go with it. The two more lifecycle looks before I bring up later. All right? If I save it, I have it running in the local server And if I say local server, we get the first alert. So initially it is a stage of before create So once the before create is done So so that we escaped a new view instance on it has initialized the events in life Second hooks. So once the life cycle events have been initialized, we can have access to the lifecycle hooks. So hence the before create method on If I say ok, I'm sorry. So if I refresh it so if I see okay, I get the created on at this point of time, it takes for the element option and had to refresh again. So after created, if I say OK, I'm going to get the before month. So now it's going toe mount the component onto the dog. So if I say OK now mounted is done so often located, we should be able to see the hatred Dad. So Okay, and that's a trend. So that's what we don't right. So now, before we look into before the story and destroyed likes looking toe before operating operator, right? So for that to work, let's get out of that. We know and throw that in there. Yeah, for that to work, we need to create a data component commentator property inside the data property. Let's have ah, variable. Let's say his name. Just a common example. And it's having a field placeholder and the name and let's bind you do name using the mortal. So now, if I save it So what on the component has to refresh, right? So if I have to go through every single thing again on before Mountain before destroy, Yeah, So since the conference is being rebuilt again, we're getting there before the store and destroyed Lifecycle looks here, so mounted on this is the component And here's the name. So every single time I enter something onto this, so every single time into something on for this, the dorm Tiny's or the data property changes on the dorm has to a great right. So every single time the dome has to update, it'll fire off the to life second hooks before operating update. Let's say I entered. We never get the before updates. So before the break we could perform some sort of action before the dome is getting upgraded. We can perform any action if you want. Oh, I know. Once dubbed it is done, we'll get out of that life. Second hook that's his updated. So inside the subject admitted week another intimate the user that some data has been changed or anything has been done. If I say OK, that's you. So that will happen for every single instance, because I haven't alert for every before updating operated right. So now let's look into before destroying, destroyed. To understand this much better. Let's pull in the logging component and, said Rajan, will it? It's just through in the before destroy and destroyed. So let's also commend these out. Save them. So the reason why I have logging form here is let's also come in these out since will not be needing these all. It's also create a button that says Destroy logging component and inside the data property . Let's have a Boolean value, I know, but logging? Let's have a beef. Sure. Logan, for the bottle. It's haven't event click event, and we can just order the value of shore Logan, since it's a single line, weaken your started here, so if everything went right, if this component is destroyed, it should find off to events that says before, before the start industry. So let's try that. So if I pressed destroy logging component I get before destroyed, and if I say okay, I get the destroyed, then the logging component is no longer visible, So if I click again, it appears on, and I can destroy it again, a light. So that's good. So these are lifecycle looks, and in the next lecture we will look into routing what is viewed order and how Ryan or things required on that's it for this one. I'll see the next one. 19. 19. Mixins: all ending this lecture, we look into something called as mix ins, so mixes are very useful in terms of you, Jess. So they help us to avoid a lot off repeated cord. It makes elephant not more easier. So let's look into how to create a mixing and water this. So I changed things up. Internet Order folder. I put the company to home on inside the home. It's changing go required type falls so we don't get it, Get it? It isn't the console, for example. Let's see. Let's have a, uh which one? Onda we have. Let's have a computer property as well. That is good date. And inside this candidate property, let's return. String off. New did so we have created a new did object on. Let's added, Hell, I save it. I'm getting the dead. So what if I want only the substrate off it? Let's say I wanted from zero, 2 11 or 15. Let's say 15. So if I say 15 we get Friday watch during the 2nd 2019 right? So what if I have another component? Let's say I have a component such as headed. It's important ahead of component. Let's register it. There's issues it inside. Hider slash save it. We have a few details. Here we have Hello analyst Agnes actually move that here. We also have something called Estatal. It's also remove that on. If I take everything up, I save it. It's blank, right? So what if we're using other component? And we also want the day to be visible here, right? So portrait Lewis. So we'll have to create another computer property way. We have a cigarette date again. I know we have done string State object and then again, sub string. Does that door go from being all right? So this is the repetition of court Soviet using the same get that matter in multiple places in home as well as it headed right? So what we can do is in stuff like relating this company property in each and every component, we can create a mixing. So in the source, let's get a new folder Nixon's on, instead mixing. So we have a date mixing RGs, right? So inside this file, what being Lewis and say export. So no one to say export default. We can use the same syntax what we use inside the script back so we can copy the complete properties. From here on, you can base it. Hell, it would look the same. So know what you could do is inside. At home, we can remove the computer property. Instead, we can import the mixing. So now that you have important the date mixing, we want to use it and to use it or three, Lewis will create. We help property corners mix ins on begin a sign date Lixian on if I save it, and if I go back, it's not working. So today's date is from the home component, and it's not working The reason why it's not working. Is it saying good date is not defined? Right? So the reason is mixing usually except at a property. So for that, how to create, marry and have to include eight mixing, and if I save it, it's working fine. So it's the same thing with head as well. So we put a couple of property on really put the mix in, and you can see mix ins inside the date mixing. And if I save, it would be working fight so instead the mix and you can have the data property as well. If I save it. And if I go back to header on, if I see if I save it and go back hello from mixing appears all right. So now you might be wondering. What if there is a case where the completed property like Get Date is also available in the Header Property, for example, I have a computer property on it's also named Gideon, and instead it turns a small string that says Get Did Right. So what happens is when the property inside a competent is named similar to the property in Santa Mixon. Generally, the property inside the component is given high priority. So if I save it, I'm going to get get date for the header. Even though we're importing the mix in that has a good date completed, Roberti that you'd insisting, All right, so that's it for mixing. I'll see in the next one 20. 20. Vue-Router Introduction: in this exit we will look into viewed odor So what is viewed order and why do we need it? So viewed organise basically used for navigation inside of application So generally the reason why we need a specific library can affect for navigation itself in this kind of extinguish applications is navigation inside us SP is very different than navigation in seven on our website. So like we already saw a previous examples on how website is different from an SPD inside a single bit application we don't want we just want the competence to be swapped. We just want the components to be, you know, changed at will. So for that we don't for that we can use we if if they just want to do components But if there many, many components we cannot use VF. And also if you want to show a partner competent in particular, you are l. We cannot use we for that as well. So, as you go to, you don't really understand its importance and why. It's kind of like used in that way. So let's get started with that. So to install viewed outer, we can go to the terminal I have a project open here. So So one thing just to remind you guys, I hope your chicken target a very positive. So every lecture is being up to get with the new court. So this one also will be updated with the new court for the beautiful lecture. So you can follow along with Dad. But I strongly advise you to follow with me as I'm doing things. All right, so we can add the viewer order by using young. I'm using young, but if you want to use NPM, it's NPM Install view hyphen rotor, half in heaven. Safe yawn viewed odor. So that is installed. So once it is installed, we can go inside me and Georgie s and declare it inside it so we can let you know that. You know, we weren't at the view instance to be associated with your order. So we can do that by saying import. No doubt them, you know. So after this, what we need to do is wait to tell you that it needs toe associate with this library so we can save you Don't use and into that It's a comment index. When you're kind of like importing a new labor early into the few projects, so save it. So now we have indicated Vieux Port View daughter into this. So now we can create a new file that says Notre Togs. Inside this file, we can create a new order instance by exporting it and it automatically important of your order library for me. So so I instead of you, Doctor, we can have another over routes. I didn't say that Old City. There goes that here. And instead of the old City, we can have a new object for the chopped it we have the part we can have on before we are even create, create some parts. We need to import components onto this. For example. It's important to components logging and sign up or register import log in. So now that we have the conference imported, what we can do is we can create parts for these components. For example, the road part would be our app component on. We can use the logging component as slash log in, and each object needs to have kind of like I mean, doesn't use to help, but kind of like has a certain set of properties like name. You can give the conference names as well, or give the parts names as well, such as I can give a slogan we'll also look into why requesting the A minor part? Uh, so we'll also look into why it needs and the men apart as we go on because Norden can be done in two ways. Is in the part artisanal name as well. So one more thing. Next thing what it requires is this one is mandatory, so it needs a component which component to be associated associated with that. But so that is log in. I like we discussed in the previous lectures like Begin boss, Poor props the component right? So it also needs kind of like have a props so with this component would be dealing with props. So that's something we need, said Drew. Because if we are dealing with props in the component, no, we can follow the same guidelines to create a part for the register component. You can see part. I dont slash really just up you can say name is that I just don't. Our component here is register another Dax of Rob's, but this let's say false. Right? So now that has saved it. All right, so now we have our view. Router Instance. So we need to associate this view daughter Instance, with arm energy s in May Energy as we have this order library, which is linked to view instance. But it also needs to know the kind of routes that art requires. So for that, what we can do it, we can import this file. You can import as the doubts from right. So once we had that out from noted, what we can do is inside his view, instance we can just see notes. So now the view instance has it out embedded into it. So if I save it now, the view outer is linked with the project, so we can views viewed order throughout the project. Any baby born. So let's say, until a rab, we want to know how kind of like a navigation but right, And so, in terms of displaying their outer content there to specific parts to be remembered, the 1st 1 is that outer link that is link. This is for navigating the user from one from one company to another component. But we also need to have another type that says wrote of you This is used to display the components which were navigating toe You're innocently soon enough. So each totaling has the property Call s to on this indicates the part that we defined inside the router. So here we have slash log in right. So we can se log in here as well on let's have some text log in so initially up component we load up, let's have some indication that gets up component I know So no. What happens is if I just go into our website I can see nothing that easiness. We see nothing, but we have another that's escort read property matched of undefined. So the reason why we're getting said it is if you go down main door jazz instead of you instance be we're adding routes here, but you doesn't recognize it out. So this so this is so. This is one of the very common mistakes that developers do so instructs specifying routes Here. What you can do is if you consider the photo and outs so you only knows to accepted out of property. So when you give it out, it doesn't match it with that. So if I save it and go back, my Ariza sold. So if I click it, what happens is the logging component will be rendered onto this interview. So instead this sort of you you will see the logging component. Now the log. Now there are interviews empty, but if I click it, logging form appears and you can also see in the u. R L that slash logging has appeared. Now, if I go back, we can see just slash. But you might be wondering, wise, Is there a small hasher? Right? So that has to do with something called less more off the router so we can go to the outer door. Jazz and inside are reviewed. Order. Instance. We can see more history. So here in 10 more If I say hash, we get the hash. And if I say history, we no longer get Dub Hashem with survey. Just go here. And if I click on Logan, I got the slash Logan. All right, so let's do one thing. Let's create our that outer link. And for the 2nd 1 let's link it so that it is a component. Second said it just I just, um All right, so So let us make this links a little bit bigger, so I save it. We have do big components, and I can just say we are. Yeah. So this is just so this really sent out a link will be linked to the register, but instead of notes on this log in bill building to the logging. So as of now, I have the logging component. I can just go to the home page. I want to I can you say log in and get Logan? And if I said I just I really just a form. So what are the competent? I'm going. I want to display that gets into that gets it that gets in the road to the order of you. Tag. So that's it for this lecture. In this lecture, we learned about out a link on our interview. I know it sounds confusing in a very lengthy process for just navigation, but trust me, it's worth it. All right, I'll see in the next one 21. 21. Routing Programatically: So this is a continuation of you, daughter. So lets you can do what more of your daughter can do and how else we can use view. Daughter. So this is one way we can navigate toe different components. That application, right. So what can we do? So the first thing what we can do is we can also talk to other complaints in another way. For example, we have two, right, So we can also have this dynamic so that that is by using me bind and you can see it go. So but now it is Instance, if you want to go to a component, we need to use a separate syntax. We need to create an object. And inside this object, we need to say name on inside the name Benito Express for the name. So this name is given in the doubts fight by liquid in the components part. So that's why this name was important earlier by we kind of wanted to included. So this index will also be used in the script back. You understand? When we look into it on, if I save this on, say, Logan, it works the same. So you can go back home page logging. It works the same, right? So this is just another way off using it. Now let's look it up, a scenario where we warned to pass a prop to this component. So, for example, in the log in, we want to possible, Upton says. So we're going to create Rob's property. I wanted the props for birdie data, no object on the kind of problems which we want to receive his message on. One more thing I want to mention. In the previous lectures, when we talked about props, we discussed that this rotation generally right for the probe, saying required under their type is in generally good practice, right? So distant case you don't know today of all of this stuff, then problems wouldn't be an object. So for that, you need to decay. Props isn't buddy, and instead of that, you can mention drops under tradition marks so you can see a message. So this automatically declares the message property as a probe, which the log in comfort is expecting. So it's the same thing as creating our object. I'm doing all this stuff, but just if you want to have much more control in the probe. Like like if it's required. Or you can mention like this, right? So for us, let's go with the best practice inside them, essentially of, say, which type it is. It's a type of string on. Is it required? Not really, but so let's say false. So if I save it, I know our goal is to send a probe or a message to the logging component, right? So for that, let's create data property. Let's say is message Morgan. This is the message which, which you want to send the dough the logging component so the baby can send you to the logging component is using the outer link. We can see after the name again for Tacoma, and then we can We can have the property core less bottoms, so problems is generally used for it props. So instead, problems. What we can do is we can give the name off the drop that the conference, expecting on its value is message to log in. Right now, we're sending the probe. So instead of logging Northview, what we'll do is under the log, inform will create up small hedge four dag inside this Let's have the message. So from a broad view, this to recap. We have a date of LA pretty corners, Mrs Logan, and inside is we have a string. I'm to send a string. We need to have a new property. Corliss Bottoms instead of I am six and object. We have the name of the name of the problems the component is expecting on Devalue. Right? So if I save it and go back, I know if I navigate to log in, we can see the password is 12345 All right, so that is the message I'm getting from the APP component. No. What if we have a situation right now? It's just more these kind of crops. It's hard to send any I'm since the prop is not required. Let's say we have another competent right. This component is home. I'm inside his component. We have a big which one that says Welcome home. Have a smiley as well. Just throw it in there. So if I say David now, what I want is that so incident log incompetent. What I want is that anybody argues that process. That's a big part in I want them to be navigated to home. So how can we do that? So here at Argon component, we have us a bit mattered so far. This a bit. We have Lincoln action that it's a bit form so upon upon clicking, submit form what we can do this. We can use that outer property so that we can use by seeing this door dollar Notre, not bush slash home on. Before we can do that, we need to go back to a router on. We need to register the component. My saying import home from it slash components slash home. I created another, but giving it to me more home component off home Onda Since it might accept props in the future, let's just say droop. So instead of logging component And if I save it sorry if I save it and go back, what we can do is go to log in and we can say a Muslim Shia And my password is something something. And if I split, submit welcome home. So this is one way we can navigate using the order inside a script bag. So this is according programmatically on it. So one more way what we can do is instruct giving it a You are really here. You can create an object, and we can navigate using the name of name as well. So this is kind of like what we did with totaling right. So the name is home, and if I save it and go back, and if I hit Submit. Welcome home. All right. So now let's look into how to pass date up. Kind of like in the script so similar to have aided in that out of link. We can also help Adams on. We can pass a data. So what we Lewis intended Home beach? Well, I have a problem. Use the name and that is required on the diabetes string. Right. So welcome home. Is it him? So whatever they use the name that the user Anderson said Log in page here, here in the user name. We can pass that into the home page on weaken. Display that here. So incident home page. We need to also have our data property instead. That gets have ah, was the name and we couldn't be more, did it? What? We confine it to the our data property by using the mortal. All right, So the bottom it does that is expecting is use the name and the same with the same people that we're using. So using him and the value is this door was the name. All right, so, 11 thing to notice here is that this so that this keyboard might would have the right context since it's inside that outer function. So what I usually do is I have Ah, dummy. I have a good corn x variable, and I use it for that. So we introducing him and I save it and I go back on inside Logan Component. I can see she and I can just use my pastor. That's something else. And so I've made welcome home. She all right? So that's how you passed it a bit louder. And one more thing just to remember is while passenger dyinto the components is going out there. You need to specify the props. Property has troop, right? That's one thing you should not forget. So All right, that's it for this lecture. I'll see you the next one 22. 22. Routing With Example: hello and welcome again, So we will do something interesting. So in the last week we looked into rotting right? So let's look at it from an example standpoint. Since adding is a bigger concept, it's much more difficult to grasp. How could an example here? So we have this upset Cordless Jason generator adjacent hyphens into two dot com. Any generate some dummy data that we can use for a project in our case. How corporate is data on how created a new file coordinator, a Jason and inside, it's out based on everything. So it's basically are Jascha Body, consisting of Job does get objects. So each object consists of some bad images like I D. Index balance, age name, gender, etcetera. Right, So let's see how we can use this. So if I go to have outdoor view, we had this totaling side. It's him with them. We leave the outer view as it is it save it in a routed or Js file. Let's also some other routes. All right, so what we do is we create two more components. One is people your view and another one is listen or view. All right. So people collective in person, singular. So inside this you can see people on into the script. I can import the data Jason 100 C if you're able to get that. So what we'll do is instead ordered. A review will set about rude, but as the people component so we can remove these imports on Beacon same board people. It's also important person component on a route. But is the people component so component people I'm for the bulls and component exit, but slash person component person. All right, so incident people component. We have imported the data, so, uh, just have ah, small heading deck. I save it on. If I go back, Ruethling will get the people list. So that's the people component being rendered. So let's see if you're able to get the data so I can create my own life. Second, look on inside mounted. So let's see the content of the data right so far this weekend are created, but this we can see created. Remember, it's a lifecycle hook that we learned in the previous lectures, instead created we can think and sold or log, and I want up output data. So if I save it and I go to console, I'm getting an array. Andre consists of six objects. That's fine. All right, so now we have the people data coming up. All right, so now we have the people later coming in. Let's create a div that says person. So now we have the people later coming in. What we'll do is, uh, we'll create another component that says person profile. You understand in a minute why I'm creating these three components. So for now, what we Lewis internal person component, Let's say person on for person. Expect three or four feet. So what we lose? We picked dot name does. It wasn't having name. Yes, he has a name. It's also picked the age. Let's make the company on email. A number of friends. All right, so inside this. So let's say this person component is expecting a problem. Oh, listen, is a type of object. Is it require? Yes, it is required so that we had to prop as person know what we can do is we can see it's a heading person, not name his age, his company, an email. All right, so one wanting what we can do is we can create. We can get double since friends count. So for this what we can do is I consider friends on for the person I completed. I can create a computer property. That guy plays a friend's count for me on I can see Prince count. I could be done. This person not trained stotland. All right, so now we can use this computer property prince gone August. Never have the person component ready on instead of people component I can import. Listen, person, I can register the component by seeing components. Listen. All right, So know what we can do this. We can How the person component on we can We can replicate the person component by using before person and people wasn't indeed on. Yeah, on this birthing can also have index. It's also put the key towards it in next. So it warned Oscars wouldn't get us on. Let's also give it up. Give it the value of the prob. Listen, this person all right? So if I see it, this I should see. Okay, so we get an edit property or better data is not defined. So So what? Rigondeaux is We continued our own data property began to turn way can create an array that says people I know intellect created metal recon. See this door? People equal door data and should be fine on here. Begins it. Listen. And people, it makes much more sense now. And if I save it Oh, we get a lot more dinners. Eso the other is in the dark land property. All right, so we're getting another that says person drains Land is not a function on it. So that this sort of function so we can just say lend on we should be fine. Yeah, all right. If I didn't fresh, it looks good. So these are all the people we have. So what I want to do is I never really click a person. I want this data to go into the person profile component on. We can have the person profile component as its own page. Right? So it's clear the person profile component. It would be very much similar to person, so you can just copy base the A person component, but it will also have a few more extra feels. For example, it's are the about section Let's add the board section in top, so I just make some genius on and I'll be right back. So what? It was, I added a few more fields. I added about I also added the friends list. So that's a person profile. Nothing really fancy. So what do you want? Do is we knew the person is clicked, right? So we also have a button that says You profile. I know what will lose for the person named will have h one. It's also island to center so we can know which person is and always will have some margin on for the person competent and now view profile. Britain, we say I click. It's an event listener. I click you profile. So we have a method, and inside it's mattered. What we want to know is this door. But order. Don't Bush an object. Um, it's also had person provided without notifying. You know, it's easy to forget. Who are you confident to out? Um, so make sure you remember that what? We could do one thing instead of having a new note for the slash person you can just see posted to find right so we can also remove the person competent from here and you can save it on inside the person when we clicked of you. Profile. It's also have give it a name us in. I name this person and we want to pass and data is it. It's expecting a prop that's off type object. Its name is person, so Madame's person is awarded water. We go descendants again are getting in the context and for the person we're going to send bm door person if I save it. So, uh, district's been what's going on? So there's this people component inside which we are entering the list of people on each person inside the people object is eyes having its own component just for the rendering sake in this component displaying a short amount of data just kind of like instance, off all the list we have, like, you know, Facebook traditions. You know, these these could be your friends, like, so similar to that we have a few suggestions on important clicking this component. We're navigating it toe the person profile page, which has a lot more data. All right, so we have saved it. And if I go back, we have the list also, we can do one thing instead of people list. All right, so these are the people that we have just a little bit off our styling and weaken like the profile on we're not getting indeed. So let's see what's happening inside. Conserve your getting missing flop required person, Right? So what's the reason? So in 10 oppose and component we are sending in person. Okay, so the reason could be that we don't define props to be true. So there's also something which people forget usually just like I did on If you go back. And if I say this, yep, now it's fine. So here we have the person's name on about his age. I guess his name again. This company. I guess Andi will address the number of a list of friends on difference names as well. So there's a person profile so that a small example and outing. So one thing I want to touch on is that inside the people component, if you see instead of writing this court, the person component scored like the class person. Is that right? So I could have just corporate discord. I could have also return it in stuff like having two separate component. I could've also return here and I could have added the before for this one. But the reason why I didn't do it is you know, this person component is there, right? So this could be used in future. In more pages. I mean, not in our project, but just in case you're willing up. Ah, bigger website. Right. So if you're creating a social media website, there are several pages where you want to show kind of like a person's small minute to provide. So for that, if I have a component radio and if it expects a certain type of data, I can use it anywhere where it's required on a capacity it up and it will be the same, right? So that's the reason I created a separate component for person on if I save this and everything should be as great as it. So that's what's one example in daughter. So I know daughter is a complex subject, So that's why I also I thought they were much more practical examples. It would be much easier to learn. So now we have the people competent. A person competent, ready? So what if I want to send someone a link off just one person. So let's say I want to send someone dealing costumes and house on if I save you profile. Have the have the page for Simpson house, So I want to share share this to a friend. So if I copied this and if I open it incognito and based it, I get nothing. And if I go to the console, it's a is missing required brought person. So the reason is we're getting the data from the people component, which is being passed on to the person component on which in turn passes it to the person profile component. So how do I send someone a link off a popular person? So that's what we'll be looking into next lecture like That's medicine and seeing the next one. 23. 23. Dynamic Routing with Example: alright in this lecture to look into how to create space recurs for specific people. Right? So the main goal of this lecture is to create a You are that can be shared on when you're let's click, I'll get the Simpson house data. Let's go. So the first thing what we need to do for that is instead of certified for the part of person we can heart slash on and here we're expecting another perimeter, right? So the paramilitaries person i d. So this is what we're expecting. And when the personality is dynamic, that's when you put the colon before it. So if you're going to have any dynamic part in the u. R. L, you're going to have a colon in front of it, so slash person will go for the person. Profound component and Colin personality will go for the person's I d. All right, So if I could say this on and while instead of people or inside the person component, what we can do is for clicking on inside the person component on view profile. We no longer need the name and perimeters. We're not going to send them instead what we're going to do is we can also remove this context variable instead. We're goingto normally navigate It can save you profile. I'm sorry. Listen, we can see person slash And in addition to this work, you can also send us this door person, not I d. So if you go to the data Jason, for every single person object, we have something called his I d or its underscore 80 underscore idea. So this will be sent. Andi can save it on inside a person profile component. What we can do is it no longer requires a proper so we can remove the props section here in Serik inhabited the component data property. Uh, this would have a person I d Andi, this idea can be retrieved through this total allowed dot battles dot person i d. So perimeters is the perimeters that we're going to send. In our case, it's ah, personality in the router. So inside the person competently in sales person slash on whatever this country days, this automatically becomes the polis 90. So here we can say person 80. So for the biggest part, what we can do is began commenter doll out. So just so we don't get any others. We can also see comment on and we can say, mounted on game console log. It can go do, though kind of click something. I'm getting the person I need light. And if you can see on the Ural part, we're getting the specific you are and for that particular person. So if I'm going to share this your opinion with anyone, I'm going to get the same data, right? So it won't throw many editor. It won't say that. Perhaps acquired because there aren't using props. So now it's our duty to find out which which person that society belong. Toe entry surpluses, data. So what we can do is we can we need to find the index off the persons who has his i d. And then we can finish the person with that index, right? So we'll go to person profile. Actually, that's not too complex. So what we can do is inside mounted, uh, we can also have this index. I could also have the person because that's what's required. I know instead the completed properties. What we can do this you get simple is in hell. Done data. So here we also need to import the data identified index. All right, so now being to find the index so that way we can do is we can say for each further day, Daddy, and inside that we have each object has an element on DNA. We can write in the flu here that say its object or values, and instead we can pass element dork in index off this door person I d. Equally, according to Zito, then we can have the b m current explainable on William George Person I d equal door door values. So what's happening is day dies another right? So inside to say we have six objects. So for each object, we have particle key value. Beth. So what I'm doing is intended eatery for each object. I'm extracting the values of the object from the keys. So I'm going. I'm only going to get these values instead. The keys only this values. So for the values I'm searching 90 which was sent. So if the value consist of the personality, then that's the index off the person. So now what we can do is when we have the index, this should be next, right? So When we have the index, the completed Robert, they will automatically done this person Property will be operated by day dumped and the index. So if I uncommon all this and if I save, I invite run, everything should work Fine. Except that is editor it say's name off undefined Focus. The reason why this this one is coming is because of friends Count right way need to have our the computer property that say is is gone And it should have done this door. Listen, your friend startling Now we're going to fresh on. I'm going to get only vomited That says name of undefined. So why are we getting that? So the reason why they might be getting that is because the template is being loaded on then that it is being fetched, right? So instant moment that I can see created on hopefully should not get that ever. Yep. So what's happening? Sad. If you're using mounted, it will run after the template has been mounted. Right? So where the template has been mounted, it looks for ah property cornice person on person And until this point of time during the rendering is not so. None of none of name is going to do another. But if you say created Creator is usually done before the mountains. So by running created before the mountains were getting the data, we're sending it to person on displaying it, so leading to know others. So now we have this link on again. Hi! Appreciated. Do anybody they want. So usually I would host Toronto Free hosting website like fire bays or get up and we could shape the link on. We can go back. We can do that for 80%. Cool, right? So that's how you create dynamic routing in huge is so now you can have dynamic you Wells. So that's it for routing on. That's it for this lecture I'll see in the next one. 24. 24. Finding Jobs and Conclusion: All right. Now, in the final minutes of huge is now let's look for places where you can find jobs or work for a few days. But so the first place you might want look as Angel Lord Coe. So ancient Lord Coe is a website that focuses mostly on startups. So if you want to work and start up, Angel, Lord Coe might be your best bed. So before you go applying for jobs, I strongly suggest that you build that report for you off projects that your book don't or showcase your portfolio to the employer so that he or she can get the confidence that you have a sound knowledge on view. Js Right Then you can go to Angel Lord Coe. So these are all the companies at the moment that are looking for the beauty of Aleppo. So if you're looking for start ups to work in Angel or CO could be your best bet. But if you want to go for anything such as freelancing, then you can go for up work. You can create a professor up book as ah, freelancer. Then you can browse the jobs you can against you can bid for these jobs and if you get hired, so having a portfolio normally helps in terms of the job, but also helps in terms of freelancing, because if someone asks you, like what kind of experience do you have in future years? So you can definitely give them the link of your website so they can know The details are few and on the details of the project that you walked on stage and how much more conference towards you So up work is that is a fantastic place with Brooke for financing projects. You can also look for freelancing projects. Country glances dot com eso. The next place you can look for is on stack overflow. You can find the jobs and stack offer as well, so stack overflow dot com slash jobs, and you can find the You can find futures jobs where you can find any any sort of jobs that you might be looking for. So the thing with angel and stack overflow or all of these jobs is you can also find more jobs. So if if you find the more jobs, you can work in the comfort of your home, so one more place to look for Islington, Lincoln is almost the most obvious place to look for. So if you have a good profile on LinkedIn, so you can start by putting out content so you can build credibility. Or when recruiters go to your profile to understand that you have some sound knowledge on the subject on, they can easily go for you on one would. Last place you could look for is the view jobs dot com. So this kind of like the official jobs have you Js. So most of the jobs here listed would be from the all other platforms that we saw, like Angel List freelance up book Stack overflow. But it's good to have all of them in one place. There might be also like companies which focus specifically on view jobs or user dot com. So this would be, I guess you're go to place to find, you know, if you just jobs. So these are some of the places you can look for for getting some work on Beauty s. So hopefully this is helpful for you. So that's it for this one. Bye bye. All right. Congratulations on making it the length of the course. So now you know the fundamentals of you Jay is on your radio. They call any project the first budget I recommend. Building is your own website. You can build your own website using you Js You can let me know if you have any questions about the course you can write to me at CHS vacatur and even at gmail dot com, The email is not scream. You can always go to the official documentation of the website. If you didn't understand anything, I already feel free to contact me. If you have any questions regarding the course. If you have any questions regarding beauty s or if you're facing issues while getting any projects, I'm going to help on. That's it for this one. Thank you so much for watching Bye bye.