Master Vue.js Composition API: Build 10 Stunning Projects for Real-world Expertise!

against Su and wer YouTube channel so in this video I'm going to be making you a wjs monster so which also means that I'm going to be sharing almost all of my vgs knowledge in this single video plus you're going to be building 10 projects in this video as well so now the question is what in the world is this technology which we are currently learning and why you should care about that so VJs is a jscript framework used for building user interfaces particularly for single page application or you can also call it like SPS for short and it is designed to be incrementally adapted and can easily be integrated into other projects so yeah that's just a quick introduction of what a VJs is and I assume that you didn't get it why because there are a lot of Buzz words right here like what in the world is a framework what is a Spas what is a incrementally adopted to other uh projects and all of that kind of stuff so what I want you to keep in mind is that VJs is a JavaScript framework used for building the user interfaces that's it baby so I want you to just keep that in mind and we're going to take care of the rest of them in this course because there are a lot of things that you have to keep in mind and we're going to be going into all of them one by one so that's just a quick introduction of what a VJs is so now let's talk about why you should care about VJs so there are a lot of things I can explain right now but trust me if I start explaining each one of them it's going to waste a lot of your time and it's going to just make you confused so I want you to just only trust me that VJs is awesome and here are a few bullet points I prepare for you like if you care about this so pause the video and uh read it by yourself but if you don't care about that you don't have to okay so this was what a vuejs is and why you should care about that and now let's go to the VJs official website and what do they call themselves so what I want you to do is that I want you to come to this link which is vj. org so it's going to bring you to this um web page right here and they are calling thems as the progressive JavaScript framework and approachable performing and versatile framework for building the user interfaces yeah that's just a VJs is and you can click on that and watch the video but in my case I'm going to just click on this getting started button right here and in this course we are not going to be working with this options API which you can see right here and let me just zoom in a bit so you guys can see a bit better in this course we are not going to be working with the option API instead we are going to be working with the composition API which simply means that options API is old it is not deprecated but it is not that much use nowadays nowadays A lot of people use composition API and that's exactly what we're going to be learning in this course okay so this is the guide you can learn more about that if you wanted to and here we are going to be learning almost every single thing in this documentation right here okay and also we're going to be building a lot of projects so yeah that was just a quick introduction of VJs and now let's install VJs inward machine so that was it about what a VJs is but now I want to show you my amazing Channel I'm not showing you my channel but I'm just showing you this playlist like you're going to find this course which you are watching right now in this full stack web development complete course of 2024 and you're going to found there right here and I know I already know there's some people will ask me like who you already include the reactjs the nextjs so what's the point of a VJs well it depends like if you want to go to the reactjs route you totally go with that route but if you want to learn VJs and you want to go with that route so I mean like the VJs route so you totally go with the VJs you can also watch this course and then later if you decide to go full stack VJs developer so for that you're going to have to watch this nodejs course then Express J course then mongodb course and then that VJs course which you watching right now and that's going to be more than enough for you and now let me just also talk about this uh full stack JavaScript uh what do you call it this fullstack JavaScript monster class not a master class but a monster class because in this course I teach almost every single thing that I already know about JavaScript so now I'm going to be also putting this VJs course into this playlist right here and I know some of you will ask me like whoan you already discuss the typescript and also the reactjs and nextjs so what's the point of a view JS so if you're watching this course and you want to go with the VJs I mean like if you like VJs and you want to follow the VJs so you don't have to watch this reactjs and you don't even have to watch this nextjs you don't even have to watch this typescript with uh nextjs right here so you can just watch this JavaScript course then the typescript course and you can watch this VJs course and then you can take these courses right here and now finally let me just show you my Channel please do subscribe okay so I'm using another account so I already subscribed you should do the same so yeah that's it about for the setup but now let me just also show you the coding and you just have to go to my guub repository and here you can find all of the coding with projects as well so now let me just search for the projects as well okay so I'm going to just click on that and here you can see we're going to be building all of these projects throughout this course right here okay so yeah that was enough about the chat chat about this course and now let's get into the setup and then let's rock with VJs so that was it about what wjs is and why you care about that so the next thing which you have to do is that we have to install it inward machine so we can work with that so the first thing which I want you to do is that I want you to go to this nodejs.org website and here I want you to download and install nodejs in your machine the next thing which I want you to do is that I want you to go to this code. vs code.com and it's going to bring you to this website right here here you can learn more about vs code if you wanted to and you are totally free to choose whichever kind of cod you like but in this this course I'm going to be using vs code so here you can see it's going to automatically detect your operating system right here but if it didn't then I want you to just click on this drop down menu and you can download it for Mac for Windows and also for Linux as well so that was just two things that you'll need throughout this course and then what I want you to do is that I want you to just click on this install button and here you can learn more about these instruction right here and I happen to be using npm right here because I'm using node.js so I'm going to just click on that and then I'm going to right click on that and open my terminal right here and you can open your terminal anywhere you like but in my case I want to make my setup inside my desktop so that's why I open my setup or my terminal rather uh in my desktop right here so the next thing which I want you to do is that I want you to just place that uh command which we just copied from this website right here okay so here you can see I already copy and paste this Command right here the first thing which I want you to do is that I want you to just write like npm then create then View at latest so it's going to install the latest version of VJs in your machine okay so I'm going to just hit en here so it's going to take a bit of time because this is the first time I'm installing uh VJs in my machine then it's going to ask us that we have to give some sort of a name for our project so I'm going to just give a name of like I don't know view course or something like that I'm going to hit enter so then it's going to ask us like do you want to use typescript with VJs uh I guess I'm going to show you how to do that but we are not going to be using typescript not right now so I'm going to just set that to no then it's going to ask us like do you want to use jsx no in this course we are going to be using something called templates and we're not going to be using jsx so I'm going to just set that no then it's going to ask us do you want to use the view router we're not going to be using it not right now so I'm going to just set that to no and then it's going to ask us like for State Management like uh if you are coming from the reactjs word so you can think about Pia is like redex toolkit or Redux or something like that so I'm going to also set that to no then it's going to ask us like do you want to use the we test for testing no we are not going to be testing our app so I'm going to just set that to no it's going to ask us for the end to end uh testing solution like you can choose Cypress you can choose any other ones right so I'm not going to be using any of them so I'm going to set that to no right here then it's going to ask us like do you want to use the es L for the quality code yeah I mean like if you said that no nothing will happen but if you you set that to yes and so anytime you have some sort of error it's going to tell you there in your vs code so I'm going to set that to yes and then it's going to ask us like do you want to format your code I already installed prier extension in my us code but if you didn't so you can also set that to yes or you can set that no like this is totally optional so I'm going to set that to yes in this case okay so here you can see it's going to generate this folder right here but this folder will not have that much dependencies right now so first of all what they are suggesting is that we have to go into that directory then we have to install all of the packages and then we can run there okay so now let's just do that right here so the first thing which I want to do is that I'm already in my desktop right here so I'm going to go ahead and go to my view course right here okay so if I hit enter the next thing which I want to do is that let me just write LS so here you can see it's going to gives us all of these file like PS Cod public SRC but we don't have any no modules folder right here okay so to get that we just only have to write npmi or you can also write install if you want it to but in my case I'm going to just write npmi and hit enter so it's going to install all of the dependencies which VJs will need Okay so let's just wait for that and it's going to do its thing so now all of the dependencies are now successfully installed in our machine the next thing which I want to do is that I'm going to open that folder which you can see right here I already navigate to my folder right here I'm going to open that folder in my vs code so I'm going to use a code Dot and if I hit enter so it's going to open that folder in my vs code word here and and chances are your corod will not look the same like mine because I have changed a lot of things in my vs code but if you want to make your vs code totally the same like mine I already have a video on that so you can also check it out uh if you wanted to okay so I'm going to just close this teral right here we don't need that and that was the setup of V code I mean like that was the setup of UJS but now let me also show you which kind of extension I'm using for this course so I'm going to just type VJs right here or view rather and here you can see I already installed this one um this extension right here viler viler or whatever you want to call that so I want you to just install this extension in your machine so that you can work with vgs Okay so yeah I want you to just install this extension in your machine and there you go so I'm not going to be wasting a lot of your time by explaining all of these files and folders but now let me just give you a quick idea of what we just install in our machine okay so the first folder we have is a vs code folder and as the name suggest that that inside this folder we're going to be storing all of our vs code configuration and extension and all of that kind of stuff so we are not going to be touching this folder the next one we have is a node modules folder and this node modules folder is the biggest folder of our entire project because in this folder we are going to be storing all of our packages by which our VJs is depends on like later if you decide to add some other packages into our project like uh I don't know VI router or Pia or something like that so all of their packages will be also available inside this node modules folder and again we're not going to be touching this node modules folder as well the next one we have is a public folder and as the name suggest that inside this public folder we are going to be storing all of our assets file like I don't know um some sort of svgs and icons and images and all of that kind of stuff the next one we have is a SRC folder or you can say the source folder and we're going to be spending almost uh like 99% of our time inside this Source folder the next file we have is a es lint related file then the next one we have is a get ignore file which will allows us to ignore all of these files or and folders which are available inside this uh what do we call it this.g ignore file the next one we have is for preer we don't care about that and also we have the index.html let me just go back and show you what we have inside this uh index. HTML file so what I want you to do is that I want you to just keep this line of code in mind this div with a class I mean like this div with the ID of app so I want you to just keep that in mind and later I'm going to be telling you like what in the word is this D with a ID of app the next one we have is a JS config.js file and as the name suggest that here we're going to be storing all of our JavaScript configurations and then we have a package lock and this one is a huge file like yeah this one is a huge file so we are not going to be touching this file as well the next one we have is a package.json file and this file will keep track of all of the packages which we've installed in our machine okay so like here you can see we have script like we can run this script like by using npm run Dev or npm run build or preview lint and format so yeah I'm going to also show you that a bit later and here you can see we install these few uh dependencies in this project like we didn't install that VJs did but here you can see it's going to show you all of their dependencies which we've installed in our machine by by this project to be precise okay then we have a read me. MD like you can learn more about that if you wanted to like you can learn more about your project like what this project will do for you and so on and so forth I'm not going to be wasting your time by explaining that the next one we have is a V.C config.js file and here we're not going to be doing anything but uh we are going to be just providing our we configuration and all of that kind of stuff now let me just get into the main file or the main folder rather of this entire stuff so I'm going to just open this SRC and here you can see we have SS folder I'm going to just delete that because we don't need that so here you can see we have this best. CSS or you know first of all let me just run this code and then you'll get to know what this b. um cssn logo. SVG and main. cssn components and all of these things are doing so now let me just run this file so I'm going to open my terminal right here and I'm going to just use like npm run Dev so what I want you to do is that I also want you to open your terminal and run this Command right here first of all you have navigate to your directory in my case I'm going to be using this view course and here I want you to just type this npm run Dev so once you do I want you to just hit enter right here and once you hit enter and then here you can see it's going to gives us this link right here so I want you to just hold control and click on this link right here so it's going to open your file or your project inside your web browser right here so here you can see it's going to give us like you did it baby and everything is successfully installed and you can go to the documentation tooling equals system community and View support and here you can see this is just a boiler plate project right here which VJs already gives us and by the way if you want to stop this server you just have to hold control and then hit C and then hit C once again and it's going to just stop this server right here so if you want to restart it again so you just have to write like npm let me just write npm run Dev and if I hit enter so it's going to restart it once again okay so it's going to restart there and I'm going to just refresh my file and here you can see it's going to restart there so what I want to do is that I want to delete this SS folder because we don't need that right here so here you can see we have this p. CSS uh which will only style this web page right here so we don't need that so I'm going to just delete this SS folder I'm going to go ahead and go to my components and I'm going to delete all of these components right here and now at this point of the course I will not assume that you guys already know what a components is because later we are going to be jumping into components in a very great detail the next thing which I want to do is that I wanted to open my ab. view component right here let me just go back or you know what yeah I'm going to just open there and I'm going to delete every single thing that I have right here and type what I'm typing and I'm going to explain what I'm doing a bit later but I want you to just type what I'm typing so I'm going to just write like script and here I'm going to just write setup and then I'm going to just write template and template opening and closing tag then I'm going to just write like uh style and scope and then I'm going to also close it right here and inside this template I'm going to just write H1 of hello word or hello VI would be fine rather okay so I'm going to just save my file and I want you to just open your f. View and write all of this code which I just write right here okay and I'm going to explain what this code do a bit later so I'm going to just close there the next thing which I want to do is that I'm going to go ahead and go to my main.js right here and here you can see first of all we are importing this CSS we already delete this man. CSS s just remove that from here the next thing which we are doing is that we are now getting this create app like we are importing this create app this create app is something which we are importing from the VJs and we are also importing our app component which you can see right here this app component here you can see that and we just write this code right here inside this app component we are importing our app component from this app right here and then we are just passing that app component to this create app and then here you can see we're just using this Mount method and this Mount method will render or component to this app right here so where in the word is this app let me just show you that I already show you that but just in case if you forgot that let me just show you that once again I'm going to just collapse there and then I'm going to go ahead and go to my index.html file and I told you to keep in mind this app right here this div with the ID of app so what we are doing is that we are selecting that app and we we are just rendering this app component into that app so what I want you to do is that I want you to just keep that in mind and we will never come back to this man. JS or to this uh what do we call it to this index.html file so just say byby to both of them and that was the setup of ugs and here you can see we're now getting this hello view right here inside our browser so yeah that was it about all of the things and all of the setup and configuration of ugs and next we are going to be learning about what a components are and why you should care about them so now let's talk about one of the crucial part of ugs which is called components so what in the world are components and why you should care about that but spoiler alert this definition is the most advanced definition but trust me I'm going to break this down a lot so a component is a reusable and self-contain unit that encapsulate a specific piece of functionality or user interface and components are a fundamental building block of a View application and they allow you to organize and structure your code in a modular way get it no because there are a lot of things going on like what is a reusability self-contain unit and encapsulation uh what do we call it functionality user interface there are a lot of things going on so to put it in a simple word a component is like a building block of your website and I want you to imagine it as a small and reusable part of your web page that you can easily use in different places and you can also think of it is like a Lego blocks that you can use over and over again to build different things so yeah that's just the most simple definition of what a component is so now let me just give you an knowy of a component so I want you to imagine you are building a website about travel and you might have a sections like uh heror logo navigation main section in which we'll have a destination information we would also have a sidebar with the travel tips and Etc so in VJ each of these sections can be a component if you want too but you can also put that in one component I'm going to also tell you that bit later but yeah you can also make a separate component for them so a component in this context is like a building block of your website you have a header component main content component a sidebar component and so on so each component does its job well and you can combine them to create a complete and functional travel website so that was just a quick anology of what a component is so now let me just show you there so here you can see this is not travel website by the way but I want you to just imagine you are building some sort of a website like that if I ask you like how you would build that by using components so well you can create a small components you can create a big components if you wanted to but I'm going to just break this down into I don't know four components right here so here you can see the first component I'm going to be creating like for navigation or something like that then I'm going to create another component for uh search then I'm going to also create for the menu or another navigation component and I'm going to also create a component for this card right here okay so if I wanted to I can also even separate this component into something else like I'm going to just create a component for this uh image and this content right here and I can also extract the functionality of these stars as well I can also create a component right here I'm going to just give a name of like a small component for articles or something like that so this is how we are going to be creating a component for each of the things inside your website so I want you to just don't swear it and we are going to be creating countless components in this course so now let's talk about why we should create a component and like what's the point of creating a component so component allows us to do all of these things right here I'm not going to be reading through all of that because it's going to waste a lot of your time but here you can see the main title that component allows us to provide a modularity reusability maintainability scalability readability customization and all of that okay so yeah this is what a components is and now let me just create a component and then you'll get to know what I'm talking about so here back to my vs code once again baby and what I want to do is that I'm going to just close this file and here you can see we have this components folder right here and I'm going to just create a separate file I'm going to just give a name of like uh I don't know hello word or something like that because this is going to be my main component you can give your component any name you want but if you're using ES lint and if you just give a single name to your component like hello. View and if you hit enter right here and here you can see it's going to instantly gives us that error like if I hold my mouse over to that so here you can see component name hello should always be a multi-word like more than one word which they are suggesting like this is not actual error by the way this is just a warning like they're just suggesting like you have to provide like more than one word right here so if I just write like hello word and if I hit enter right here so here you can see that error is totally gone okay so now let's just just create our first component so our component is divided into three parts first HTML then CSS then JavaScript okay so now the question is how in the world we're going to be creating or working with HTML in our VJs component and trust me it's totally simple and easy you just have to write this template template opening tag and template closing tag right here and inside these templates we can write all of our HTML right here okay so first of all you have to write HTML open I mean like template opening tag and then template closing tag and here we can write all of our HTML code right here so like in my case I'm going to just write like H1 of hello world right here so if I just s my file and the next thing which we have to do is that we have to render this component somewhere like now we create our component right here we can even remove this CSS and we can also remove there and if we just write this template and inside this template we just only have this H1 with the content of hello world right here now we have to use that somewhere okay so now I'm going to go into my app uh. view right here and here I'm going to import that component so I'm going to just write enter and here I'm going to use like import let me just write import and here I'm going to just give a name of like hello word and here you can see it is auto suggesting us so I'm going to just hit enter right here and it's going to import that hello word component from a components folder here you can see this is available inside this components folder and then it's going to go ahead and go to this hello word comp component and it's going to grab it from there and what I want to do is that I'm going to just copy that and now let me just remove this H1 right here and I'm going to just place this hello word component right here and now if i s my file and here you can see we're now getting hello and word right here okay so yeah this is how we are going to be importing a component and this is how we are going to be creating a component so now inside this component we only have HTML right here so this area will be for HTML okay so now if you also want to write a CSS in JavaScript we can also write like let's suppose if you want to write some sort of a CSS so I'm going to just write a CSS right here and I'm going to just write first of all a style let me just write a style opening tag and style closing tag and there are a lot of things inside a styling which we're going to be also talking about but in now in this case or you know what let me just write a styling right here and I'm going to just select my H1 which you can see right here I'm going to just select my H1 and I'm going to just change some sort of a color of that like uh I don't know color of red or something like that let me just go back and now if I sell my file and now let me just refresh that and here you can see it's going to gives us that red color right here like this styling is now successfully applying for this H1 right here that's totally cool but let's suppose if you also wanted to write a JavaScript code as well so we can also write a JavaScript for this specific component so I'm going to just write first of all a script script opening tag and script closing tag but here I want you to also write setup okay so here if you write a setup so you can write all of your JavaScript code right here like hello uh hello word or something like this so if I sell my file and open my uh console. log so here you can see it's going to gives us that hello word uh right here inside a console so now the question is if we cut this JavaScript from here and we put it above and we also cut this CSS from here and we also put it right here will it affect our component if i s my file so what do you think is going to happen right now and if I refresh and here you can see everything is totally working a okay but the conven is like what a lot of UJS developer do I'm going to cut that from here I'm going to just place it right here they first of all write their JavaScript code up above then they write their content or their HTML code right here and then finally they write their CSS at the end so throughout the course you're are going to see me write my code like this okay so yeah this is how we are going to be creating a component this is how we are going to be importing a component and this is how we are going to be rendering a component in VJs and that was just actual definition of what a component is and and by the way I forgot to mention one thing which is called reusability so now I can reuse this component again and again and it's going to gives us the same result so I'm going to just uh duplicate this L of code that much time and now if I sell my file and let me just go back and here you can see it's going to gives us that hello word hello word again and again and it's going to also gives us that console log eight times right here okay and also that styling is now applied so here you can see we are now reusing our component let me just say that once again this is how we are going to be creating our component this is how we are going to be importing our component this is how we are going to be reusing a component or just using a component right here so now let me just sve my file and now let me just refresh that and here you can see we are now getting hello word and also that console log inside um what do you go inside this console right here there we go kind of lost my mind there anyway so now let's talk about the nested component like component inside another component how in the what we're going to be doing that so here you can see we have this application once again and let's suppose we have this comp you know yeah this one is fine so here you can see we have this application right here so we have this component and we also have this plus right here we can also put that inside this component or we can create a separate component for that and we can put that component right here so this component will be known as a nested component so a component inside another component is called a nested component so now let me just give you example of that and then you'll get to know what I'm talking about so now let me just remove that and let me just create yet another component so I'm going to just give a name of like uh another component or something like that the name doesn't matter but I'm going to just uh provide this do view extension at the end I also forgot to show you that anytime you're working with the VJs so finally at the end you're going to have to write this do View at the end so I'm going to just hit enter right here and now let's just create our component so I'm not going to be writing any JavaScript code in I'm also not going to be writing any CSS so I'm going to just create like uh T you know let me just use like te no it's not that so you know let me just write a template right here inside this template I'm going to just write H1 off another or you know nested component so I'm going to just save this file so now we successfully create our component now we are going to be nesting this component inside this hello word uh hello word component right here so I'm going to delete this word from here I'm going to also remove this CSS so that we don't have any coloror markup I'm going to also remove this uh comments from here now let me just sell there and now let's just import this another component into this hello word component so I'm going to just write like import first of all and I'm going to just write another component and if I hit enter it's going to also gives us that view let's just remove that view I'm going to copy that and here you can see uh I'm going to just give a name of like uh this is a parent component component so I'm going to just save this file and here you can see it's going to give us like this is a parent component and now I'm going to render this another component right here so now let me just write uh this component and now let me just close that and by the way I also forgot to show you this is some we're going to be calling our component so now let me just save that and here you can see it's going to give this like nested component and if I just write something inside there let me just write a few dashes like two dashes or something like that if I sve my file so here you can see it's going gives us this is the parent component and this is the nested component which means like this component is available inside this parent right here this is going to be the parent and this is going to be the children so this is a children component or you can also call it a nested component right here okay so you can write your logic here you can write your CSS you can write your JavaScript code you can write whatever you want to write and all of that will be reflected right here uh as well so you can write like uh I don't know paragraph let me just write a paragraph of lurm 20 or something like that and now if i s that and here you can see it's going to give us that lurm ifum right here and this content will be a parent content like both of these line of code is a parent component and now let me just write something inside this uh children component as well so I'm going to also write uh or you know uh let me just write H2 uh this is this is come on this is some uh extra content from the ch children components now let me just save that and here you can see it's going to also gives us that extra content a children component right here so now let me just ask you a question uh if I go ahead and go to my app component so what do you think this component is I'm just asking you a question like what do you think this component is this hello word component is the children of this app component this app component is the main like the father or the parent of all of the component and and now we are rendering this hello word component into this app component so this is a parent component this hello word is a children component of this app component and this another component is now the children of this hello word component right here so first of all we have uh this app component this is a parent then we have this hello word uh component this is a children of this app component I hope I'm not confusing you let me just say that once again this is a parent component this hello word view is the children of this app component and this another component is the children of this hello word component right here so yeah that was just a quick introduction of what a component is and how it works and we also learned about an nested components as well so that was all about a components in VJs and now let's talk about a text interpolation in VJs so what in the word is text interpolation and why you should care about that so text interpolation is referred to the process of dynamically binding data to the content of HTML element in your template and it allow you to display the value of transcript expression or a variable within your mockup so how in the world we are going to be doing there this is how we are going to be doing there first of all we are going to have to write these double uh what do we call it this double opening bracket or curly braces whatever you want to call that and then we're going to have to close there and inside there we are going to be writing our JavaScript right here this is a JavaScript word and here we are going to be writing all of our JavaScript like uh I don't know if you want to render like 2+ 2 it's going to give you the result of four or if you want to call a function right here you can also do that if you wanted to so yeah that was just a quick introduction of a text interpolation and now let me just give you example of that I'm going to go ahead and go to my components I'm going to delete this nested component from here and I'm going to just rename this component to my component I'm going to hit enter right here and now let me just copy the name of this component my component I'm going to go ahead and place that right here inside these three area so we are now importing my component and we are now calling that my component right here okay so now I'm going to just close that and here we are going to be writing almost all of our logic so I'm going to just remove this content I'm going to also remove this content from here and now let me just write my H1 right here and now let's learn about a text interpolation right here so we already learned like how in the word we are going to be writing or text right here like this is some text or something like that if i s my file and here you can see it's going to gives us like this is some text so how we are going to be writing our text inside a JavaScript and then we are going to be rendering that text or that logic inside your HTML template right here so the first thing which I want to do is that I'm going to just write like con my message I'm going to just declare a variable and I'm going to just store the value of like yellow uh word right here instead of a Hello word so I'm going to just write uh yellow word and now let's just oh you know I'm going to just remove this text from here and now if you want to render this my message I'm going to just write double opening bracket Right Here and Now inside there we're going to have to place this my message right here so if I place it right here so what do you think will be the result of this component so if I save my file and here you can see we are now getting yellow word baby so this is how we are going to be rendering our content from the JavaScript to our HTML right here dynamically or you can also call it a text interpolation so yeah now the next thing which I want to do is that let me just declare one more and uh variable I'm going to give a name of like my number come on not my name but my number it's going to be equal to like 100 or something like that and now I'm going to just write like H2 and now let me just interpolate that as well so I'm going to just use like my number and now let me just save my file so here you can see it's going to gives us 100 right here which is also totally working a okay and we can also write our JavaScript expression right here if you want it to so I'm going to just write like I don't know uh H3 of something like uh two 2 + 2 so what do you think will be the result of this expression right here like this is the most easiest expression right here but I want you to imagine once again this area is a JavaScript area so what do you think will be the result of that if I save my file and it's going to give us this four right here so if you want to provide a label for there like 2 + 2 equal to 4 so here outside from these craes we're going to be writing like 2 + 2 equals 2 so this is the actual text like it's not going to do anything but it's going to just render this text as it is and then here we have this actual expression so it's going to give us four and it's going to look something like this so now let me just undo that and now let me just sve my file and here you can see it's going to give us like 2+ 2 as actual content and then it's going to gives us this for right here which is inside uh this JavaScript expression so now let me just uh give yet another example like I don't know I'm going to just declare a variable or not a variable in this case I'm going to to just declare a function or something like that I'm going to give a name of like add and it's going to take the X and the Y parameters and I'm going to just return x + y so now that we have to use this uh add function right here so I'm going to just write like I don't know H1 yet again and here I'm going to just write like add two come on add two numbers or something like that let's just go back and here I'm going to just write my uh text interpolation syntax right here and here we have to just execute this function so I'm going to copy the name of that and now let me just place the right here and I'm going to just provide two comma two like uh two for the X and two for the Y so I'm going to just WR a space right here let's just save that and here you can see it's going to give us like 2 + 2 will gives us four so let's suppose if I just write like uh I don't know 2 + 10 so if I just save this so it's going to gives us 12 right here okay so this is how we are going to be providing our Dynamic data or this is how we are going to be doing a text interpolation in VJs but there is a bit of of catch let's suppose if you want to declare a variable manual inside this CRA so what do you think is going to happen so if I just comment this line out I'm going to go ahead and also comment this line out as well and I'm going to go ahead and just write a paragraph right here and you know I'm going to just write my curly braces again and I'm going to just give a name of like con uh my name and is equal to huzen so what do you think will be the result of that if I sell my file and here you can see it's going to gives us a beautiful error this is not allowed baby you got to do something about that you have to extract this logic to somewhere else and then you have to just provide the variable name here okay so let me just write a label right here like not come on uh not allowed baby so now let me just saell there and yeah it's going to give us that error so I'm going to just comment this line out and I'm going to uncomment this line out and I guess that was it about the text interpolation in vgs so enough about the text interpolation now let's talk about a v bind and the attribute bind so what in the word is that so attribute binding is a way to bind HTML attributes to a data in a view instance so that was just a quick introduction of that so how in the world we are going to be doing there we have two ways to do this so we have a older way of doing that by using the v-bind and then we have to write this colon and then our attribute name right here and then we have a a newer way and the shorter way we just have to write this colon and then the attribute name this is not deprecated like you can still use that and you're going to see a lot of projects using this V bind right here but throughout the course I'm going to be using there and I'm going to show you both ways so you can choose whichever you like so now let me just show you there here you can see I have this content right here but I'm going to remove that because I want to start every single thing from scratch so the first thing which I want to do is that I'm going to just go ahead and write my channel right come on my channel and it's going to be equals to the string and my channel link right here let's suppose if I want to attach this value right here as a attribute to some sort of anchor tag or some sort of thing like I don't know you know let me just give you example of that so I'm going to just write my anchor tag right here and I'm going to just write like hen Channel or hen webd Channel whatever you want to call that and in this case it's going to require some sort of HRI right here right so uh if I just write like my channel and if i s my file so what do you think will be the reason if I save my file let me just zoom in a bit right click on there and not this one come on what the hell am I doing right click on there and go to the inspect element so it's going to open that element right here and it's going to only gives us my channel like this is not working if I click on that it's going to only brings us to this my channel right here so this is not what we want we want this link when we click on that so it's going to brings us to my channel like my actual YouTube channel so to do that we already have a link of my channel so we have to bind there dynamically so how the what we're going to be doing there we just have to write this v-bind okay so if we just write this v-bind and then we just bind that so here you can see it's going to make it totally white so if I save my file and now here you can see that uh my channel is now changed to this link right here so now if I click on this link so it's going to brings us to my YouTube channel right here it's taking a lot of time but trust me this is the older way of writing this code but now if I duplicate this line of code and if I just remove this V bind from here and now let me just comment there if I just remove this V bind from there and if I just write this colon right here it's going to still work so if I save my file and refresh so here you can see it's going to still work if I expand that and here you can see we have this YouTube channel link right here okay so that was the first example now let me just give you a few more examples so I'm going to just uh go ahead and write con amazing image or something like that and I already copy this image from unsplash.com so I'm going to just place this image link right here and you can render any link if you wanted to so now let me just uh Delete the or you know let me just comment this out and I'm going to just go ahead and write IMG tag let me just write IMG tag and here I'm going to just bind that image link which we have right here as an amazing image right here so I'm going to just write a colon so if I just write a colon and here we have to write our variable name so in this case our variable name is amazing image so I'm going to copy that and now let me just place it right here and now if I sve my file and here you can see it's going to gives us this amazing image right here couples let's just remove these comments uh and also this one because I think that's a bit cluttered so here you can see it's going to giv us that image but if I right click on that and go to my inspect element it's going to also require us to provide the alternative text alternative text as well so uh I'm going to also make this alternative text dynamic as well so for that I'm going to just write another variable con all text and it's going to be equals to like just a random picture or something like that and now I'm going to also render this all text right here dynamically so if I want to make it Dynamic I'm going to have to write this colon right here and if I just save that and here you can see we are now getting this uh just a random picture right here okay so if I just remove this colon from here so now let me just save this so what do you think will be the result and it's going to only gives us this all text right here which is not something that we want now I have to write this uh what do you call it this colon right here so it's going to gives us this just random picture right here now let's suppose if you also want to provide a width and height to our image so how in the world we're going to be doing that we can also write like con let me just write con image uh width it's going to be equals to 400 right here and I'm going to also declare yet another variable name I'm going to just give a name of like image height or something like that and it's going to be also Al 400 right here so if you want to render or bind this image width and image height dynamically so you guessed it this is how we are going to be doing there so we are going to have to first of all write this column and then we have to write a width and if I just write a width here we have to dynamically render this image width right here so now let me just copy and place it right here and I'm going to also write this column and it's going to be now not like that and here we have to write a height and here we have to copy this image height and we just have to place that right here so now if I saell my file and here you can see it's going to gives us that image uh 400 by 400 right here okay so if I click on that come on what the hell am I doing and here you can see we have the width of 400 right here and we also have the height of 400 right here so this is how we are going to be binding data or attribute dynamically in VJs so that was it about attribute binding now let's talk about the dynamic binding uh in VJs so I didn't prepare a slide for that because this is a simple topic so there is no need to prepare a slides for that so I'm going to just comment out these line of code and what I'm going to do is that I'm going to just create an object I'm going to give a name of like cost or you know first of all let me just write a separator right here and I'm going to just write a d come on Dynamic binding and now let me just create an object and inside this object we're going to have to write all of our properties and its values so I'm going to just write like con image info it's going to be equals to this object and this object will first of all have the SRC you are not allowed to give any name to this uh SRC right here like if you just write something and something it's not going to fly here you're going to have to write the SRC and as SRC we are going to have to place this image right here so I'm going to just copy the image so let's just copy that and I'm going to go ahead and place this image link right here and finally I'm going to also have to write a comma so that we don't get any errors the next thing which you have to do is that we also have to write the alternative text so I'm going to just write con alt and just a random text right here and now let me just write a comma then I'm going to also write for the width so for the width I'm going to just give him like 400 and also for the height will be 400 for here so now we have to use this so like we don't have to create a separate variables for them and we don't have to like specify every single thing manually I'm going to just oh you know let me just comment this like oh you know I'm not going to do that because you already watched the video so now let me just remove that and here we just have to write this column equal to and here we just have to write our image info okay just this name right here so I'm going to copy that now let me just place that right here and now if I sve my file and let's just refresh so here you can see it's going to give us this image right here we can also do that by using a v bind if you wanted to so we can use like v-bind and now if you sell our file and now if I refresh so here you can see it's going to still gives us that image so if I just inspect this image we're going to have our image link we would have our alternative text we would have our width and also the height come on let me just come on you would also have the height as well so yeah everything is working totally a okay and this is how we are going to be working with a dynamic binding in wjs so you can suit for yourself like if you like this approach you can use that but if you like this approach you are more than welcome to use that so enough about the bindings now let's talk about a styling in VJs so I'm going to remove this component from here and let's just uh create a few component so I'm going to just write first of all a component of global style do not CSS but View and then I'm going to also write for the local style. view as well I'm going to also write for the combined style. View and also one for the module uh module style. view as well and let's just start from the first component so what I'm going to do is that I'm going to just write a template right here template opening tag and template closing tag and we're not not going to be writing any scripts so I'm going to just write H1 and I'm going to also give a class of text- red right here okay so if I just write text- Red and I'm going to just write a content of global styling or styling like that and I'm going to also provide a paragraph with the class of local right here okay trying local scope in this component okay component so now if I sell my file so now anytime you want to work with the styling so we are going to have to first of all write a style opening tag and style closing tag and this is something called a global style okay so anything we write inside the style component will be reflected to all of the component which we currently have like let's suppose if you have like text- red and now if I just write like color off red right here so if I sell my file but first of all we have to just register there right here so I'm going to just remove that I'm going to also remove there remove this one as well and I'm going to just uh import first of all the global uh style from let's just go ahead and go to my components and then I'm going to go ahead and go to my Global style now let me just copy that from here and let me just render that right here so if I sell my file and here you can see it's going to gives us that Global styling right here which means like this styling is now successfully applied to this component but if I go to my local component right here and I'm going to just create my component once again and I'm going to just write H2 maybe and I'm going to just write this is uh children component or something like that and what I'm going to do is that I'm going to just write or you know I'm not going to write anything but I'm going to just copy this class right here I'm going to copy that and now let me just Place The Styling right here sa my file then I'm going to have to register this component inside my view app so I'm going to just write import and then the local come on local style uh from the let's just go ahead and go to my components and then the uh local style right here and now let me just render there right here so local style and now let's just close this so if I saell my file and here you can see what is happening we wrote our style in this component and now it is also working inside this local component I mean like local style component as well so what is going on as I said that this is now a global style and like any style you introduce right here will be reflected to all of these components right here it doesn't matter if you have one component or if you have like 1,000 component that styling will be applied to all of the component but if you want to make this component I mean like if you want to make this styling locally just only specific for this specific component not for the local and not for the rest of them so for that we are going to have to write this scope right here so if we just write this scope and now if I sell my file and here you can see it's going to remove that stying from this component even though we still have that class of text red right here but it's going to remove it from this component right here why is there because now we made our styling as a local style right here so if we just provide this scope right here and any styling we provide inside the style tag will be only applied to this component this specific component not outside from there okay so here you can see we are getting the styling but let's suppose you know let me just copy that styling from here let me copy that and I'm going to just place it right here okay so now if I saell that and here you can see this color is also changed but if I just go ahead and we already have this styling right here so here you can see that will not be applied to this component so that was there about for the global and local styling and now let's just combine both of them at once so what I'm going to do is that I'm going to go ahead and go to my combine style and now let me just write my template opening tag and closing tag I'm going to just write my H2 and I'm going to also provide a class name of G1 right here and I'm going to just give name of like another Global style and I'm going to also write H2 once again and in this case I'm going to just give a class of like L1 for the local one and another local style right here okay so now underneath that I'm going to first of all write a global styling come on styling and then I'm going to also write a local styling as well okay so first of all let's just take care of the global styling so if I just write a style opening and closing tag and you already know that it's going to make our styling totally globally so I'm going to just write like g-1 and now inside there I'm going to just put background color of fuchsia or something come on not fuchsia F you s yeah this color whatever and then I'm going to also provide the color of toally white to it so what do you think is going to happen so if I save my file and refresh that oh come on we have to render this component into an app right here so I'm going to have to oh you know let's just comment these both component out and I'm going to also comment this out and now let me just render my combine come come on combine or you know let's just remove that what the hell am I doing today uh let me just grab my combined uh style from let's just go ahead and go to our components then go to our uh combined style right here and now let's just render there right here so I'm going to just write a combine style and now let's just close this so if I send my file and here you can see that styling is now applying to this component as well and as I said that these styling are now a global styling so now let's just try it on something else so I'm going to just copy this class and I'm going to go ahead and go to my local style right here and instead of providing this text Red I'm going to just provide this G1 class so what do you think is going to happen so if I sell my file and here you can see as I said that that's a global styling so here you can see it's kind of also applied for this component as well so now if you want to also work with the local as well like if you want to combine the global and local styling for this specific component so how in the word we're going to be doing that well this is how we are going to be doing that the syntax is like totally the same but we are now here combining both of them so we're are going to be just writing a scope and now inside that I'm going to just write this uh l-1 right here and now here I'm going to just uh s like background color of totally blank and color will be totally come on not column but color will be totally white right here so now if I save my file and here we already provide this L1 here so here you can see it's going to giv us like another local style word here but if I copy this class name from here and now if I go ahead and go to this local component and now if I just provide it right here and now if I sell that and here you can see it's not going to apply for this component why is there because we introduced that as a local styling right here so I want you to keep in mind we can work with a global styling we can also work with the local styling and we can also use both of them in one component as well like we can use a global styling and also the local styling in one component as well so yeah that was it about for the globals and locals now let's just go ahead and go to the module styling right here the first thing which I want to do is that I'm going to just write my template so that we have some sort of a content and I'm going to just say like using module CSS uh with dollar syntax first of all we are going to be taking care of the cab up case Okay so this is just a naming convention by the way which I'm explaining right here so I'm going to just write a style but now in this case we're not going to be providing any scope we're going to be just providing module Right Here and Now inside there uh first of all let's just take care of the Kabab K I don't even know how to spell a kbab but yeah it is already giving us this error right here so if I hold my mouse over to there kabo IAB uh Kaba no there isn't any good suggestion so I guess that's going to be it so this is just a naming convention by the way so what I'm going to do is that I'm going to just write M clause and now inside I'm going to provide a background color of fire Breck and I'm going to also provide a color of toally come on totally white right here let me just go back so you guys can see everything a bit better and now in this case uh let's suppose if you want to bind this class right here into this H1 so how in the world we're going to be doing that well we can either write the v- bind right here or we can just write our colon right here so first of all let me just show you that in the v bind so you know what we're not going to be writing it like this way so we have to write our class right here and then we have to write that and we have to use this dollar sign and then style and now in this case we are going to have to use a brackets right here why are we using a brackets because in this case we are providing this Dash right here this is known as a Kabab case syntax right here so that's why we have to write these brackets right here so now inside these brackets we are going to have to write our classes right so now in this case we only have one class which is m- class right here so now if I send my file and now if I refresh but first of all we have to register them man what the hell I'm going to just import that module style and now let me just import that module style right here knify sa that and here you can see that styling will be totally applied to this Kabab syntax as well but let's suppose if I just riew these brackets from here here let me just remove these brackets and if I just write a DOT and now if I semi file so it's going to gives us that error right here okay so we cannot do that so I'm going to just comment this line out and by the way let me just show you that we can also remove this V bind from here and we can also just use this column and now if you save that it's going to still work so let me just put this Kabab this we bind right here and now let me just show you that Camel Cas syntax right here but first of all we have to write some sort of a cont right here so that we can work with that so I'm going to just use like H1 and inside this H1 I'm going to be using like using module CSS with dollar syntax baby and using a camel Cas notation in this case so I'm going to just write a come on so I'm going to just write first of all this another CL right here and and inside there I'm going to put the background color of like C green or some come on C green and I'm going to also provide the color of totally white right here in this case so now if we just provide that another clust right here you know first of all we have to bind there because we are working with a module CSS so we are going to have to write a class and then we have to write a dollar syntax and then the style and now in this case we have two classes like we have m- class and we also have this another class right here so if I just write this another class and if i s my file and here you can see it's going to apply that styling to this class right I mean like that uh element right here okay so yeah that's the so we can also customize our module right here like we can provide a name to that so how in that we are going to be doing that this is how we are going to be doing there we just have to provide a call I mean like equal to and then double quotes and here we can give it any name we want so in my case I'm going to just write my classes or something like that okay so here you can see it's going to give us that error if I hold my mouse over to this so you can read through this uh error right here but I'm going to show you that anyway so what I'm going to do is that I'm going to just remove this dollar sign and then this style right here so let's just remove that and I'm going to just provide my name right here which is my classes so now if I saell my file and here you can see that styling will be still applied right here so yeah that was a lot about styling but you don't have to worry about that much styling not even not right now okay so I want you to just keep in mind what do you call it this uh Global style the local style and also the combined Style style as well but if you care about this module styling you like I already show you that but if you don't care about that you're not going to be finding yourself using this uh module styling that much okay so yeah that was it about styling in VJs all right so that was it about for The Styling and now let's learn about events in View and I'm pretty much sure that you guys already use events in the Dom but if you didn't why thought you're watching this course go ahead and watch my D course just kidding so now let me just create a component I'm going to give him a name of like my event or something like that Das View and now let me just zoom in a bit I'm going to remove these uh components from here and also these imports from here as well and now what I want to do is that I'm going to first of all write a script and let's just provide a setup to that and I'm going to also provide this template word here H1 of hello sell my file and now let me just import my event uh from here and I'm going to just render my event let's just close the semi file and here you can see we are now getting or hello right here so now let's talk about how in the word we are going to be attaching events and how we are going to be using that events right here so first of all let me just give you the example of counter but this component will not work so if I just write H1 and I'm oh you know let's just declare our variable right here and I'm going to just give a name of like count it's going to be equals to zero right here and in this case inside this H1 what I want to do is that I'm going to just write a count and here we just have to write this count right here so if I save my file so it's going to giv us this um count of zero right here because the initial value which we are storing right here is zero so that's why we are now getting the zero right here so now the next thing which I want to do is that I want to use my button and increment right here like anytime we click on this button we just want to increase our counter by one so for that if you want to attach the event listener so we can attach our event listener by using two ways the first way we have is by using the V on directive and the V on directive is used to attach event listener to the Dom elements now in this case this button is our Dom element and I'm going to be using like V on and if I hit tab so it's going to auto complete it for me but this is not something that we want I'm going to just remove that and I'm going to just use my column and then we have to use our event right here like we have different kind of events right here like abort animation come on animation oh my God I can't even pronounce this word and there are a lot of events right here but the one we're interested in is a click like anytime we click on this button so what do you want to do in that case we just want to fire some sort of a event function or something like that which I'm going to also show you in a few seconds but in this case we just want to increment or counter by one so if we just write like count Plus+ and if we sell our file and here you can see we have our button right here so what do you think is going to happen if I click on this button well nothing is happening why is there that's because this is not a JavaScript this is a v so we have to make our count as a reactive component then we would be able to increment or decrement there you might be thinking like that's because of the V on but that's not the case so now let's talk about the reactivity what in the word is reactivity and why should care about that so reactivity means that the framework can automatically update the UI the user interface when the information behind it changes and it's a cool concept that allow you to create a dyamic and responsive application without manually manipulating the Dom so this is just actual definition of what a reactivity is so how in the world we are going to be achieving reactivity in VJs we have two ways to achieve reactivities in VJs the first one we have is a reactive uh method and the next one we have is a ref method which we can use to work with a reactivity we're not going to be diving into reactive and ref not right now but that was just a quick introduction of what a reactivity is and I'm going to be using this reactive or this ref method right here but I'm am not going to explain that I'm going to explain that in a few seconds like what is a reactive what is a ref but you don't have to worry about that for now okay so now if you want to make this component I mean like this uh initial count reactive so the first thing which you have to do is that we have to grab something called the ref from the VJs so if I just import like if I just write like import and then we're going to be writing our curly braces because we want to destructure there and then here we have to just get the ref from where from the VJs okay so now we have to use this so I'm going to just copy there now let me just place that right here and let's just W or zero ref right here so now if you sell that and now if I click on this button this is totally working now we are totally able to change our user interface right here and why are we now able to do that that's because we are working with the reactive state right here now our St is totally reactive and now we are using this ref so our state is totally reactive that's why we are now able to update the UI of our application right here so we are going to be diving into this ref and also to the reactive method a bit later but you don't have to worry about that for now now what I want to show you are events I'm not showing you the reactivity and also the ref and reactive I'm just showing you the click event or something else event right here so we can attach our event by using the V on or we can just remove that from here and we can also use this add symbol right here so these are the two ways so if I just save my file and now if I just refresh that and if I click on that so here you can see it's going to gives us this one right here and yeah everything is totally working a okay so this is our first event right here and please let me just say that once again please do not worry about this ref and also the reactive uh not right now so this is how we are going to be attaching events to our elements okay so yeah this is now we are updating our state but we can also create a separate function for that and we can call that function inside this click event handler right here so how in the world we are going to be doing that well this is how we are going to be doing this so I'm going to just cut this uh functionality from here and I'm going to just duplicate that and I'm going to just write like decrement right here in this case and now we have to create two separate functions so I'm going to just create my function right here or you can say the event handler function to be precise so how that we are going to be doing that we are going to be just creating our function so I'm going to just write increment uh or you know not Handler increment counter would be fine rather you can write it by using a function resert keyword or you can use a arrow function so in my case I'm going to be using the arrow function right here so I'm going to just write like count in this case we are going to be getting the value and and then we are going to be using the Plus+ right here okay like count in this case we using this ref right here that's why we have to write this value right here and then we have to use this Plus+ right here so I'm going to just duplicate that and I'm going to also change this name to uh increment so decrement counter right here and I'm going to also remove that from here and let's just provide or Dash Dash or minus minus right here I'm going to copy this increment counter right here and I'm going to just place it right here let me just copy this uh de counter and place it right here let me just go back and now if I sell my file and here you can see we have a count and now if I click on that it is now incrementing our counter right here and now if I click on the decrement button it is now decrementing our counter okay so yeah this is the second way of attaching your event handler we use the separate function for those cases if you have a lot of logic but we don't have any logic right here but I'm just showing you like how you are going to be creating your event handler functions separately and then you're going to be just providing the reference of that Handler function to this uh click right here to this event handler Right Here and Now what I want to do is that I want to give you yet another example in some situation we would also want to provide some sort of a perimeter to our function so how in the world we are going to be doing there let's suppose we have um what kind of example should I give you just wondering but anyways I'm going to just create some sort of a function but you know first of all let me just create some sort of a form so I'm going to just write a form and we don't need any actions right here inside this form we are going to have our input and I'm going to just write a type of text for the first one and I'm going to just say placeholder of please enter your name let's just duplicate there and change that to email and I'm going to also change that to email as well and finally let me just create a button with the type of come on the type of submit right here okay and here I'm going to just say like sub M okay and now I'm going to attach some sort of event hander right here so I'm going to just say like I don't know cons or not I'm going to just say like uh submit right here and submit is going to be equals to this submit hand function which we're going to be creating in a few seconds I'm going to copy that and let's just remove this ref from here because we don't need any reactivity right here and I'm going to just create that function right here it's going to take this event object as a parameter and here we are going to be just using like e. prevent default we can do this event prevent default in VJs in another way as well but I'm going to explain that a bit later not right now so I'm going to just write like alert I don't know like uh valid uh credentials or something like that I don't even know how to spell credentials let's just click on the credentials there we go and now if I sell my file and here you can see we have our input field right here so if I just write my name of zanen gmail.com and now if I click on this submit so here you can see it's going to gives us this valid credentials right here so yeah this is how you're going to be attaching the submit Handler and this is how you're going to be providing your perameter and this is how you're going to be working with that you know what let me just give you the final example of providing a perimeter to your functions and then I guess that's going to be it I'm going to just remove this coding from here and in this case let me just give you the most simple example of providing or attaching events so I'm going to just create a button and anytime we click on that button so what you want to do we just want to call this function which is a show message function and now what I want to do is that I'm going to just write like show message right here and the first thing which I want to do is that I want to just create that function like show message come on oh my God message there we go and it's going to take one parameter of message and it's going to be equals to some sort of alert like I don't know uh just show that message which you are getting right here and now I'm going to just copy that and now let me just place that message right here okay so now if you sa that well you know we don't have to do that let's just remove that I'm going to just provide like this is my message or something like that now you sa that and here you can see we have a show message button if I click on that so here you can see it's going to show us this is my message right here so this is how you're going to be passing your perimeter this is how you're going to be passing the argument for this perimeter right here in v so yeah that was a lot about events and next we are going to be learning about one of my favorite Topic in VJs which is called reactivity reactive and R I know that I already explained reactivity in vs but please bear with me I'm going to explain it once again so what in the word is reactivity and why you should care about that so reactivity means that the framework can automatically update the user interface when the information behind it changes and it's a core concept that allow you to create a dynamic and responsive application without manually manipulating the Dom okay so how in the world we are going to be achieving a reactivity in VJs we can achieve reactivity by using these two functions or method whatever you want to call that the first one we have is a reactive function the second one we have is a ref function which we are going to be getting from the VJs and I already show you the example of that but now I'm going to show you a lot of examples so let's just talk about the reactive function so the reactive function is used to create a reactive objects and a reactive object is an object where changes to its properties are automatically detected triggering updates in the user interface it is a way to make an object reactive in VJs but there is a bit of catch which I want you to keep in mind if you're using a reactive function you cannot store a primitive data types like uh like numbers booleans strings and uh I don't know something like that which you already learned in JavaScript so you cannot store a primitive data types in the reactive functions so now let me just give you example of reactive function and then I'm going to explain the ref function so what I want to do is that I'm going to go ahead and rename this component to my reactive uh component or something like that let me just copy the name of that and I'm going to go ahead and change these to my reactive component let's just cut that from here and I'm going to also cut that from here as well so the first thing which I want to do is that I want to write my H1 right here and I'm going to go ahead and declar some sort of initial stat so let initial let me just zoom in a bit initial I don't even know how to spell initial initial state is going to be equals to uh the reactive so if I just write reactive first of all I'm going to have to import this so reactive uh from where from the VJs so first of all we have to import our reactive now we are calling that reactive and we are storing the value of that reactive inside this initial State variable okay so I'm going to just uh store zero right here and you guessed it that zero is a primitive data type which is not allowed so you know let me just show you that so I'm going to just write count so I'm going to just write this initial state right here so if I just s my file and we are not even seeing anything oh there we go so we are now getting the zero right here so which is totally working by the way but if I just provide a button right here and if I just write like click and inside this click I'm going to just say like initial stad uh Plus plus so I'm going to just write like a plus symbol right here and now if I click on that nothing is happening right here why is that like why is this UI not changing well I already told you that if you are working with a reactive function you are not allowed to work with the primitive data types like if you provide some sort of a number or a string or some sort of a Boolean like true or false or something like that they will not fly here here you're going to have to write an object or some reference type right here so now in this case if you want to create that counter uh by using this reactive function so for that you're going to have to write this object and now inside this object you're going to have to provide some sort of a property of count and then you have to provide some sort of a value for that count so now if I sell my file and now uh this is not how we going to be uh changing our state so I'm going to just get first of all my count first of all let me just get my account let me just show you there s my file and let me just refresh there so here you can see it's kind of gives us my count of zero right here now let me just uncomment that and here we have to use our initial state. count like in this case we are currently working with the object and we are just interested in this count right here and we will just say like plus plus right here so if I sa my file and now if I click on that so here you can see this is totally reactive and it is now changing our user interface right here so let me just create for the decrement as well let's just write a minus symbol and now here you can see we have a minus let me just click on that and everything is totally working a okay okay so yeah this is how we are going to be using the reactive function and this how we are going to be providing our initial State this is how we are going to be rendering that initial State this is how we are going to be updating our UI or you can say this is how we are going to be updating the content inside this reactive function now let me just give you a bit of um complex example but yeah I'm going to just give you a complex example so now let me just remove these bonds from here and what I want to do is that instead of providing a discount I'm going to just provide like some sort of a value right here and the value will be set to a nested object right here and I'm going to just provide a count of zero and I'm going to also provide a user and the user will be an array and what is array array is a reference type it is not a premier Vera type okay so I'm going to just write hosan and I'm going to also write a Jordan right here so now let me just go back and now what I want to do is the let's just remove the one from here let me just create yet another H1 and I'm going to just say like current count and here I'm going to just render my initial uh State word here then I'm going to be getting my content from the value and then we have count inside that value right here now underneath that we have or H2 right here we have a users and now let me just render my initial state do user right here so now if I sve my file so here you can see we have our current count which is set to zero and we have a users of Jordan and hoseen right here okay so now let me just change there so I'm going to be using like button and anytime we click on that oh you know first of all let me just write labels like add 10 in this case and I'm going to create yet another button and in this case I'm going to just say like change user and let me just add one more button right here and I'm going to just say like add one more user to the list so yeah first of all let's just take care of this initial value right here so I'm going to just attach the event listen click and I'm going to just say like initial uh state. value. count and I'm going to just attach 10 to it you can also write a plus plus if you wanted to but in this case we are going to be attaching 10 to it so I just want to give you another example so now let me just save there and now if I just uh click on the button so I want you to just focus on this area if I click on there so it's going to add 10 20 30 40 50 and so on and so forth right here okay so now let me just take care of the changing the user so how in that we're going to be changing the user this is how we are going to be changing the user so I'm going to just um has a function of change user I'm going to copy that and now let me just create a change user function right here so here I'm going to just write my initial State user we're going to be getting the first user from this list right here and it's going to be equals to uh I don't know some sort of like my color or something like that and I'm going to also let's just duplicate that and change the first index of that array which will be Philip or something like that okay so now if I sve my file and now if I click click on this button so here you can see it's going to change the first user to Michael and the second to the Phillip or whatever you want to call that so yeah and now I'm going to just push yet another user to this list right here okay so let's just provide or event listener right here so I'm going to just use like click event listener and initial stand. user. push come on push and here I'm going to just providing a John do right here in this state so now if I save my file so I want you to just uh look at this list right here if I click on that so here you can see it's going to also add this John door right here to this list so yeah that was it about for the reactive and this is how we are going to be updating the UI by using these event handlers and this is how we are going to be making our state as a reactive state so now let's talk about the ref so ref is used to create a reactive reference to a value unlike the reactive function which we just saw a few seconds ago which is used for creating a reactive objects only and riff is specially designed for creating a reactive single values so everything is allowed here you can provide a um what do you call you can provide a primitive data types you can provide a reference data types you can provide anything you want and that will be poorly reactive baby so now let me just give you example of that and then you'll get to know what I'm talking about I'm going to just uh rename this component to come on what the hell my ref uh component there we go and I'm going to also copy the name of that let me just go ahead and render that right here so my rep component I'm going to go ahead and remove these imports from here and I'm going to also remove these buttons from here as well and what I want to do is that first of all let me just give you that count example once again so first of all we have to declare or or you know first of all we have to import the rep from come on let me just zoom in over uh that's way zoomed from the VJs first of all we have to import that and then we have to use there so this is how we are going to be using that and here we have to just specify the value of zero right here and now let me just render my content of the ri right here and I'm going to be also using a button to increment and decr decrement increment and decrement my de increment what the hell and now I'm going to be using my count first of all plus plus and the second one will be for the minus minus now let me just save my file and here if I click on this button so it's going to increment there and it's and this one is going to be decrementing there that's example number one now let me just give you yet another example so I'm going to just uh declare my username it's going to be equals to nothing by default so initial value will be set to empty string because I want to show you like we are not just limited to provide a numbers we can also provide a strings as well if you wanted to so let's just remove that and I'm going to just write H one right here username will be now equals to my username right here and let's suppose if you want to change change the username so add user or something like come on add user or something like that we can totally do that by using a click uh event handler and I'm going to just set my username to um something else like Jord or something like that user let's just see username there we go okay so now if I sve my file and now if I click on this button so it's going to add this Jordan word here so initially the value will be set to empty string and here we are now adding this Jordan right here so that's why we are now getting this Jordan once we click on that so if I click on that once again here you can see we are now getting this Jordan right here okay so this was another example example number two now let me just give you yet another example by using arrays so now let me just remove that from here and I'm going to be using like let users uh list and it's going to be equals to the ref and here we have to pass or or array right here so I'm going to just pass a lot of users or friends right here or users rather so Michael then we have a Jord then we have hosan M come on what the hell hosan oh my God hosan myself and then uh J would be fine or something like that and now let me just render that list so I'm going to be using H1 and users list and here we have to just use like user list and there you have it and then if you want to update that list so for that we're going to be using this uh add new user or add user would be fine okay so I'm going to be using that click event handler once again and us a list. push and here we just have to push yet another person like do would be fine I guess so now let me just send my file and here you can see we have the list of Michael Jordan and then we have a hosan and John right here so if I click on this button right here so here you can see it's going to also gives us this door right here at the end so this how we are passing array as a reference or a reactive object and this is how we are muted in or updating or current state right here by using this ref righty so that was the third example now let me just give you the fourth example by using um by using object let's just remove that and I'm going to also remove these as come on what the hell I'm going to also remove that and let's just create our initial state of user info info it's going to be equals to the ref and here we have to pass an object in this case and I'm going to put the Alex and and he will be I don't know age of 20 just like me and location will be uh location will be New York City and I don't know I'm just passing this uh what do we call this this array right here and is married uh let me just go back is mer will be set to false by default now let me just save that and this is the initial value which we specified right here so now let me just render that value one by one so I'm going to just use like Ed first of all name and name will be coming from the user info. name let me just duplicate that a few times so the first the second one we have is The Edge the third one we have is a location and then the fourth one we have is married and now let me just change that from name to Edge then we have a location then we have uh is mered like that so now let me just save there and here you can see we are now getting the Alex the 20 years old and location and ismer is now set to false and now let me just change this initial value to something else so I'm going to be using a button and I'm going to just say like change name first of all so first of all we are going to be changing the name by using this event handler and I'm going to just say like user info. name is something else like uh I don't know hen or something like that so now if i s my file so here you can see the current the initial value is set to Alex but if I click on the change name so it's going to change it to hus right here so now let me just create here another button and I'm going to just pass like uh change Edge or something like that and I'm going to just provide the click Handler of user info. Ed and it's going to be equals to 40 right here I'm 40 years old baby now let me just sell that and here you can see this is 20 but if I click on that it's going to make it 40 years old right here I am supremely old man buty supremely old I'm like your grandfather and then change the location and here let's just change that location word here so user info dot location and it's going to be equals to first of all the array of Earth and also I don't know now let me just sell this so here you can see we have a New York City and then I don't know but if I click on that it's going to change the earth and it's going to also gives us that I don't know but if I just write like there and now if I click on this it's going to change it to Earth M me right here okay so that's that so now let me also change the is Merit status to Merit so is or you know change uh Merit or change status or marriage status whatever you want to call that so I'm going to just provide a click event hander of user info. is married come on is mared and it's going to be equals to True right here because I married and I have four kids now let me just say that there and now let me just click on this change status so it's going to make it true right here let's just do that one by one change name change the name change the Ed change the location and change the status yeah that was the fourth example but I want to give you yet another example of uh what do we call it the array of RS so how in the world we are going to be doing that I'm going to remove all of that content from here and by the way you can found all of the code in my gab repository if you want to grab it now the final example I want to give you is of friends and I'm going to be using the reactive start for this so I'm going to just write reactive and here inside this reactive let me just write a reactive inside this reactive we're going to be using the ref but I'm going to be using this array of refs right here so I'm going to just write ref of Jordan and then I'm going to provide a comma of ref Alex let me put a comma once again ref of huzen right here okay so that's the and yeah I guess that would be fine so now let me just render all of them one by one so I'm going to just write like uh one and friends and let me just get the first friend word here so now let me just save there so it's going to give us the Jordan so now let me just get all of them like one then two and we don't have any third one so just change this to two and this one to three and we are now getting all of that friends right here so now let me just change all of them one by one so I'm not going to do anything else but I'm going to just shake hands with so handshake right here and I'm going to just click on that and I'm going to just get my friends index of zero it's going to be equals to first of all we have to write a string and hand shaking will be fine okay so now let me just duplicate that three times because we have three friends so we have a friend one and friend two right here so now if I save my file and now if I click on that handshake handshake handshake okay so yeah this is how we are going to be working with the refi and the reactive to make our state reactive and that was the end of the reactive and the refs and next we're going to be learning about a computed properties in vs so now let's talk about one of the easiest Topic in vs which is called computed properties so what in the word are computed properties and why you should care about that so A computed property is a special kind of variable and here the keyword is a variable that automatically updates itself whenever the data it depends on changes and you can think of it as like a little worker that watches certain data and perform some work on it and always give you the most up to De result okay so yeah this is just actual definition of what a computed properties are and now let me just give you example of that or not one example but a lot of examples of that and then you'll get to know what I'm talking about so I'm going to just remove that and let's just also remove that from here and I'm going to just change that to computed property P's or something like that let me just copy that and God damn it yeah I guess I'm going to have to pass it like that yeah so now let me just work with this computer properties uh function or not a function but component right here and first of all if you want to work with a computer function first of all you're going to have to import it so I'm going to first of all import the ri because we are going to be working with the reactive State and then I'm going to be getting my computed right here okay so now first of all let me just write a number and it's going to be equals to to uh the ref of five right here let's suppose and then I'm going to be just using my computer properties so I'm going to just create another variable and once again this is a variable nothing else than that you know first of all let me just write H1 so that we don't see that squiggly lines again and again sum or something like that and here let me just create my computed variable so I'm going to just write like cons squared number right here it's going to be equals to my computed function and inside this computer function we are going to be passing a getter function okay so you can pass a function resert keyword and like that but in my case I'm going to be using the es6 aror functions right here so let me just write my arrow function and inside there we are going to be just returning like a number do value is times number do value right here okay so now let me just go back and now we can use this squared number right here so what I want to do is that first of all let me just remove that from here I'm going to just write like original number and it's going to be be equals to this number right here which we are passing as a reactive number and then the next thing which I want to do is that I'm going to duplicate there and change this one to the squared number right here okay and here I'm going to be passing my squared number so now if I semi file and let's just refresh this so here you can see it's going to give us the original number of five it's going to gives us the squar number of 25 right here so we are not using any event listeners or anything like that but here we are just creating worker function right here or you can set a computer function and this is how we are going to be working with that so the next example I wanted to give you is you know let me just give you yet another example then you'll get to know what a computed property is let's just write my H1 once again so that we don't get any squiggly lines and then I'm going to just write like first name and it's going to be equals to some sort of a first name like uh I don't know my name or you know it should be a Ri so I'm going to just write my first name con last name will be equals to the ref of last last name web dev there we go and now let me just create a full name by using the computer property so I'm going to just write like a full name and it's going to be equals to the computer and here we have to just P our Arrow function and I'm going to just get my first name. Value Plus and let me just provide a string conation right here for the space and then the last name do value okay so here first of all let me just render my uh oh you know I don't have to do that let me just render my full name right here full name and I'm going to just say like full name and let's just put a separator and now let me just save that and refresh and here you can see it's going to gives us that value which we are holding inside this uh full name variable right here but this is now computer so I'm going to just remove that from here and now let me just give you the final example and then that's going to be it for the computer property so let's just remove that and provide our H1 once again and I'm going to just write like cons counter and it's going to be equals to the ri of zero and then I'm going to be also creating my squared counter so cons squared counter and it's going to be equals to this computed which we are already grabbing and here we just have to pass all counter. value and let's just square that right here okay and I'm going to first of all render my uh counter right here let me just render my counter and then I'm going to provide my paragraph of qu uh s q r e d squ counter and here counter and here we just have to provide our squared counter right here and by the way I'm going to be also creating a button which will just increment our counter so let's just write our increment counter which we are going to be creating in a few seconds and increment counter let me just copy that go go to the top and here let's just create our increment counter function and let's just change there to const and inside this function we are going to be just using like counter. value ++ and now let me just save there and now if I click on that so it's going to gives us two and it's going to give us four because the value is now squared and three and then it's going to gives us nine because the Valu is now changed to squared and yeah this is how we are going to be working with the computer properties in VJs so now let's talk about a conditional rendering in VJs so conditional rendering is referred to the ability to conditionally display or hide element in the user interface face based on a certain condition or expression okay so how in the world we are going to be achieving that and trust me this is supremely easy let me just show you that okay so we are going to be achieving there by just using a conditional statement so here you can see we have a if statement else if statement and also the else right here and this one is a new one which is a v show directive but I'm going to also show you that in a few seconds so the first one we have is a VF totally the same like a conditional statement so here you can see we have a v- if and we are passing some sort of a condition so if this condition is true show some sort of a UI if this condition is false jump to this else if block right here and check this conditions if this condition is true show some sort of a UI but if this condition is also false then finally jump to this V else block right here okay so yeah this is how we are going to be working with that and then finally we have a v Das show right here so what in the word is this V show now let me just show you there so V show directive is used for a conditional rendering it talk was the visibility of the element based on the truthness of the provided expression unlike the VF like unlike this VF right here which completely adds or removes the element from the Dom we show on the other hand toos the CSS display property of the element to control its visibility while keeping it in the Dom okay so this is what a v show will do for us so this VF will either remove or add it to the Dom but this V show will just allows us to toggle the the visibility of a certain element right here okay so now let me just write some sort of a code then you'll get to know what I'm talking about so now let me just remove all of that kind of stuff from here and I'm going to also remove this coding from here as well and I'm going to also change this component name conditional render ring right here I'm going to copy that and now let me just go ahead and change it right here sa my file and I'm going to go ahead and go to the top and now I'm going to just declare a few variables so is true will be now equals to true and I'm going to also write like cons is false will be equals to false right here and I guess that's going to be it so now inside this template area I'm going to just write my div let me just go back and here I'm going to just write my paragraph tag and it's going to just say like this will show if is true is true okay so what I'm going to do is that if I sve my file and here you can see it's going to give us like this yeah it's going to give us that paragraph right here but if I just write the v- if right here and if I hit tab is going to allows us to provide some sort of a condition right here so in this case I'm going to just space my is true right here so if I sell my file and here you can see it is totally working a okay but if I change that from True to false in this case what do you think is going to happen if I save my file and here you can see nothing is showing right here if I right click on there and go to the inspect area and here you can see we don't have any let me just go ahead and go to the body we don't have any content inside uh this app right here I mean like we do have our div right here which you can see right here this is the div I'm talking about but we don't have any paragraph right here but if I set that to True let me just set that to true and if I save and refresh that so let me just click on that so here you can see we are now getting our paragraph right here okay which is totally awesome so this is the VF right here and this is how we are going to be passing some sort of a condition to or VF right here okay so then I'm going to just create yet another paragraph and I'm going to just select this will show if is false is true okay so in this case I'm going to just write like v- else- if right here and if I hit T so it's going to just Auto completed for me and I'm going to just say like is false and now if I save my file and refresh that and here you can see nothing is showing right here and why is that well because currently our condition is now set to false so that's why we are not able to see anything but if I also set that a true let me just write a true s my file and refresh there we still are not able to see anything right here why is that because currently this condition is true so it's going to only gives us uh this result right here it's not going to jump to this condition right here because the first one is already true but if I make this one false so it's going to jump to this Condition it's going to check if this condition is true then it's going to show us this result right here but if this condition is also false so it's not going to show us anything at all so let me just make the first one to false so now let me just write a false and now if I save my file and here you can see it's going to gives us the result of this one like this will show if is else is true which is this result right here okay so first of all it's going to check this condition right here if this condition is true then it's going to run this code right here and show this result but if this condition is false then it's going to jump to this condition and it's going to check this condition if this condition is true then it's going to show us this content right here but if this condition is also false then let me just make the false now let me just save that then nothing is going to happen right here finally we are going to have to write some sort of s block right here okay so now let me just write a paragraph tag and I'm going to just say like this will show if neither is true nor is false is true right here okay so now let me just write a v uh SSE right here finally and it does not require any conditional area so yeah that's it so now let me just save my file and here you can see we are now getting this result right here like this will show if neither is true nor is f is true okay so it's going to give us this result right here okay so yeah that was just a quick introduction to what a if and else if and conditional rendering is so now let me just give you yet another example and then you will get to know this conditional rendering a lot better baby so now let me just remove that from here and what I'm going to do is that first of all I'm going to just import let me just import that I'm going to import the ref from the vi JS and then I'm going to just declare variable human name of like is visible it's going to be equals to this ref and true now inside this template I want to give you the example of the V show directory right here okay so what I want to do is I'm going to just create some sort of a paragraph and I'm going to just say like this paragraph will be shown or hidden based on the value of is visibility or visible whatever you want to call that okay so now let me just create a button and I'm going to just say like toggle uh V come on v i s i b i l i t now let me just save that and here what I want to do is that I'm going to just write like v- show and here we just have to pass or is visible right here so now if I save my file and here you can see it's going to gives us that text right here and also that button so if I click on that nothing is going to happen right now but if I just make this one to false now let me just make this to false and if I Sam file and here you can see we still have that paragraph right here let me just zoom in a bit so you guys can see everything a bit better let me just zoom in a bit come on if I can get that what the hell and here you can see we can still get this paragraph and we are now attaching this display of non toare so it is just uh hiding the visibility of this paragraph but we can still see this paragraph on the Dome so yeah this is what this VF will do for us but on the other hand if I change this this one to uh VF right here and now if I save that and here you can see it's going to totally completely remove it from the do so yeah now I'm going to just write a v show once again and now let me just create a visibility Toggler so now let me just right a click and here I'm going to just pass my is visible is now equal to not is visible so so it's going to allows us to toggle and un toogle or paragraphs now let me just save that and here you can see by default it is now set to false so it's not going to show us anything so if I just set that to true and sell that so here you can see we are now getting this paragraph right here by default but if I click on that so it's going to just hide the visibility of that paragraph So if I click on that once again and here you can see this is what going on behind the scene anyway so yeah that was it about a v show and now let me just give you a lot of examples I'm going to just remove that and I'm going to give you the example of is user logged in or logged out or something like there so I'm going to just declare variable I'm going to just give a name of like is user loged in is now equals to ref and here by default the value will be set I mean like the initial value will be set to true and let username will be equals to hosan my own name baby and then let show details if I can write details will be now equals to the ref and here we just have to pass or is user logged in right here inside this ref right here okay so that's that now what I want to do is that I want to just declare uh not declare but first of all let me just uh write my div right here inside this div we are going to have our H1 which will just say like welcome and then username right here so if I sell my file so here you can see it's going to gives us welcome Huzan right here which is totally a okay but we want to render this conditionally so like if the user is valid then show this content but if the user is not valid like if the user did not specify the valid credentials then we're going to have to show some sort of other result right here so I'm going to just write like VF and here I'm going to just say like is user logged in okay so if user is already logged in so in this case the user is already logged in like the initial state is set to true so it's going to give us like welcome hose right here but if I set that to false and now save there so it's not going to show us anything at all so I'm going to just set that to True once again and now I'm going to just write some sort of a paragraph for the else clause and I'm going to just say like please log in to access this cont right here okay so I'm going to just write uh vsse right here and there you have it so if I save my file and here you can see it's going to give us like please log to access this content and this is true so what's going on oh I didn't just refresh there so now if I refresh there so here you can see it's going to give us like welcome hoseen right here but if I change that to false save my file and here you can see it's going to gives us please log to access this content right here which is the result of this uh paragraph right here so underneath that I'm going to be using my V show right here so I'm going to just declare a div not declare but I'm going to just write a div what the hell is a declare and then I'm going to just write a v show and inside there I'm going to just pass my show details right here which is this user logged in okay so now inside there I'm going to just write H4 and I'm going to say uh you are now able to modify your dashboard baby so now if I send my file and here you can see it's going to gives us like you are now able to modify your dashboard and now let me just refresh that and that's gone because currently the initial state is set to fall so that's why we are now getting this message right here but if I change that to True right here and if I sa my file and here you can see it's going to first of all give this like welcome Huzan and then it's going to gives us like you are now able to modify your dashboard right here okay so which is totally a okay and this how we going to be working with a VF V Els and V show right here at once so yeah that was EX example number four now let me just give you yet another example so I'm going to just delete that and by the way you can find all of the coding in my gab repository so now let me just declare variable give like is act oh my God is s t IV e there we go so I'm going to just pass a true right here and now I'm going to go ahead and just write my div and I'm going to also pass my VF and here I'm going to just pass my is active Okay so if the user is active so I'm going to just say like H1 let me just saell that and I'm going to just past my uh blog post right here and also this paragraph of some lsum right here so now if i s my file and here you can see it's going to give us like my blog and also this LM ipsum because the user is currently active right here so if the user is not active s my file and refresh that so it's not going to gives us nothing so I'm going to just change there to True once again and yeah I'm going to just uh create a button right here I'm I'm going to just write a button and I am going to just select tole post which I already Show You by but now let me just show you that once again so is active is equal to not is active right here okay so now let me just save my file and now if I refresh that and here you can see it's going to give us that post right here but if I want to click on this toggle so it's going to just remove it from the down R here because in this case we are not using the V show we are using the V I mean like we are using the VF directory right here okay so that was example number five I guess and now let me just give you one more example which is the Sixth and the final example okay so I'm going to just write a password variable and password will be now currently equals to some I don't know my personal password or something like that and you can write any password you like and then what I want to do is that I'm going to just write H1 right here and strong password okay so then I'm going to just duplicate there and weak password let me just duplicate that once again and I'm going to say that please enter uh your password password like like so okay so I'm going to go ahead and write a V and yeah you know what I'm not going to do first of all let me just write a VF right here and here we are going to be passing some sort of a condition like if password. L is greater than Ed then show us this result right here like password is strong like strong password but if that's not the case then check this condition like V else iford here and I'm going to just P the condition of password. length is less than add character so I'm going to just say like weak password and finally if both of the condition are false so I'm going to just say like V and finally else okay so if I just write V else so here you can see we're going to be just showing this to user like please enter your password so now if I sell my file and here you can see it's going to gives us a strong password right here why is that because we are providing a strong password right here but if I just provide like I don't know one two or something like that this is a weak password so now let me just save that and here you can see it's going to give us like a weak password and finally if I didn't specify anything at all and if I just write like zero right here let me just write a zero and sa my file and here you can see it's going to give us like please enter your password right here so yeah this is how we are going to be working with the conditional rendering in VJs all right ladies now let's talk about yet and another directive which is called the V4 I didn't mean to disrespect you bro I really love you all righty so the the V4 directive is used to iterate over an array or object and render a template for each item in that collection okay so just like in JavaScript we use a full loop to itate over through some sort of a collection of data and then we do some sort of a thing with that data so in VJs we have exactly the same concept of full loop okay but the syntax is a bit weird so now let me just show you the syntax this is how the syntax will look like so here you can see we have the reactive array right here and we have Alex Jordan and husan and now we are iterating over through all of that item by using first of all the V4 directory right here and here we are passing that person and we are also passing the index right here so this index will giv us a unique index for each of these item right here and it's going to be starting from 012 and then we are using the in resert keyword to it over through all of that people right here we can use the uh what do we call we can also use the off resert keyboard if you wanted to but in this specific example I use inro here and then we are itting over through this array of peoples right here which you can see right here then we are specifying this key right here and this key will be totally unique for all of the items which we will have inside this paragraph right here so now this is just a basic syntax but before I jump into the coding first of all I also want to show you like why on Earth we are using this keyword here and then we are providing some sort of a unique value to that okay so now let me just show you there so we use a key for the efficient Dom updates and we also use it for avoiding some common pitfalls so when we renders a list of elements it uses something called the virtual D to determine the most efficient way to update the actual Dom and the key help vies identify the elements have changed been added or been removed so without keys VJs may need to recreate the entire Dom structure for each update which can be less efficient and now avoiding a common Pitfall so using a key can help avoid common Pitfall such as duplicate key warning in the console or incorrect rendering when the items are rearranged in the list like later we are going to be building something called the to-do list application and I'm going to also show you that a bit later anyways there's other story so VJs relies on the keys to track the identity of the element and using a unique key for each item ensures that VI can accurately update the D based on the changes in the list that was just the best basic theory of how we are going to be using a full loop and how we are going to be passing a keys and why you should care about that so now let me just come to my conditional rendering I'm going to change the name of that to iteration or iteration component or something like that let me just copy the name of that I'm going to go ahead and place it right here sell my file and check it out and here you can see we're now getting this four right here so for this iteration and collection of data I'm going to give you a lot of examples so now let's just get ready yourself cells so the first thing which I want to do is I want to get my ref from my VJs and then I'm going to just create my Pew PS array and we're going to be setting that to the ri and here we just have to pass this Alex right here Alex and I'm going to also pass this Jordan and also my own self baby hosan and now let's just remove that from here and I'm going to be just using a paragraph you can use H1 you can use whatever you want to use right here and I'm going to just past like uh I don't know this p PS well you know what I'm not going to be passing these P right here I'm going to just pass my hello right here or H so here you can see it's going to gives us that result so now let me just remove that and now let me just iterate over through all of this pupils array and print each of these uh items or this uh friends to this uh to this list right here so what I want to do is that I'm going to be using the v-4 right here so if I just write a V4 and if I hit T so it's going to gives us this auto complete right here and the first which you have to do is that we have to provide a person or you can give it P you can give it any name you want right here okay so this is going to be the itable item right here so I'm going to just pass a person name and the next thing which you have to pass is a index and this is totally optional so you can just remove that if you wanted to but in my case I'm going to also paste this Index right here and also I'm going to be using the in operator right here or the in resert keyword to be precise you can use the off right here if you wanted to but in my case I'm going to be using this in right here in pup array okay so now this is how we are going to be iterating over through this people's array and here you can see this is going to gives us each of that item which is inside this array right here so now if you want to display each of that item so for that we are going to be using these uh curly braces right here so I'm going to just pass my person right here this person which you can see so now if I save my file and now here you can see we are now getting all of that friends right here so we have Alex Jordan and hose and now the next thing which I want to do is that here you can see there SC line if I hold my mouse over to this here you can see it's going to give us like element in the iteration expect to have the V bind of key so you can bind The Key by using either the V bind or you can just use a short hand which I already show you so to remove this error first of all we just have to add this colon and then we just have to specify this key and this key will always be unique so in this case this index is unique for this uh first item second item and third item so I'm going to just copy that and I'm going to just place it right here and here you can see that error is gone so now if I save that and here you can see nothing is going to happen but this is a better practice to work with a for Loop in VJs okay so what I want to do is that I want to just write an index right here so if I just write an index so here you can see it's going to giv us that unique indexes right here so we have a 0 one2 so that's why it's going to take a unique value and we are now providing that unique value right here so now let me just past my person once again and now let me just save there and here you can see we're now getting all of that items right here okay so yeah so now let me just give you yet another example of this same full loop right here so in this case what I want to do is that I wanted to create an array of objects but I'm going to provide a lot of objects you can find all of that objects or all of that code in my gab repository if you wanted to but now I'm going to just place it right here so I'm going to just write cons books and we will have a ref right here and inside this RI we are going to be passing this data right here so now let me just show you what I'm doing so here you can see we have a array opening and we also have array closing right here and inside this array we have a few objects right here so we have object one 2 3 4 five right here so inside each of this object we have IDE of one the title of the book we have a author we have a genre uh we also have a publication years as well okay so here you can see we have this data so you can specify whichever kind of object you like like you can provide a gaming object the gaming specific ID you can provide specific um game name you can provide a specific Game author the genre and the publication years and all of that kind of stuff you can provide the movies name you can provide a lot of things right here but what I want to do is that let me just collapse that I don't even know I okay there we go so yeah now we have a book of array and inside this array we have a lot of items right here like a lot of objects to be precise so now if you want to itate over through this array and we want to get all of that items so how in the world we're going to be doing there so for that once again we are going to be using a paragraph you can use whichever kind of element you like but in my case I'm going to just use a paragraph right and I'm going to be using the V4 once again not V bind but V4 so it's going to Auto compet it for me so in this case I'm going to just pass my content right here then I'm going to just pass my Index right here I just shorten that to I you can also write like index you can write anything you want and then I'm going to be ITW writing over through all of that books which we currently have right in here so now I'm successfully itting over through all of that books and now let me just provide a key right here okay so that key will be unique so I'm going to have to pass my Index right here now let me just render my content right here so if I sell my file and here you can see we are now getting all of that objects right here so we have a ID we have title we have author genre and also the publication year for all of that objects right here so now we are itting over through this array and we are getting all of the content which is inside this array right here so this is how we are going to be printing that content into the screen so that's cool but I also wanted to show you how we are going to be doing a destructuring so if you guys don't know what a d structuring means so you should definitely check out my JavaScript course but if you already know that so this is how we are going to be destructuring all of that content from this content variable or whatever you want to call that so now I'm going to just remove this content from here and I'm going to just pass my curly braces so I'm going to just uh destructure the ID oh my God just disappear so let me just do that manually so we are going to be destructuring the ID we're going to be also destructuring the title the author author and I'm going to also destructure the genre and also the publication here as well okay so this is how we going to be destructuring there and now let me just remove this content from here and I'm going to just hit enter inside this paragraph or you know instead of writing a paragraph I'm going to just change there to UL because we want them to be in anoral list and inside there I'm going to be using a lot of allies right here for all of that uh D structure values so I'm going to first of all write ID and now let me just render my ID right here let me just go back so you guys can see everything a bit better and I'm going to just duplicate there a few times so for the first one we have a title then we have uh author then we also have a genre and also we have a publication uh year right here okay so now let me just change this content which we have right here so I'm going to just render my title and I'm going to also render the author and also the genre as well and finally we have a publication here there we go so now if I sell my file and here you can see we are now getting all of that content in unorder list right here okay so this is how we are going to be destructuring all of that content and this is how we going to be using that so if this syntax looks a bit weird to use so don't worry about that because in this course I'm going to give you a lot of uh things to practice so you don't have to worry about about these destructuring and all of that for now so that's cool but now let me just give you yet another example so I'm going to just remove these books from here and now in this case I'm going to just talk about your favorite topic which is called movies and I know you love movies and here I'm going to be placing a lot of movies so in this case I'm not going to be providing array of objects but in this case I'm going to be providing arrays of arrays so now let me just place it right here let me just go back so you guys can see everything a bit better so here you can see we have array opening and we have array closing right here and then inside there we don't have any objects but we have arrays right here so we have like different kind of uh movies right here so we are going to be iterating over through all of these movies and we are going to be getting all of them so now let me just collapse there so yeah I'm going to just collapse there baby if I can get that today now let me just collap all of them and yeah that's looking cool but now let's just iterate over through all of that movies right here so for then I'm going to be using first of all my UL once again let me just zoom in a bit and I'm going to just provide my V4 right here and inside there first of all we're going to be providing the movie and also the index and we are going to be using the in movies movies is this collection right here like uh array of arrays and inside their arrays we have a movie so we have that movie name I mean like movies name right here and now inside there what I want to do is that I want to first of all show you that like you know first of all let me just write my key right here and I'm going to be also passing my index and here I want to first of all show you this movie and now if I save my file God damn it let me just cut that from here and now let me just write Li come on lii there we go and now let me just place this movie right here if I refresh this here you can see it's going to gives us this array and inside this array we have a lot of movies right here so now if you want to get all of that movies so for that we're going to have to to use the nested full loop right here so now let me just show you the nested full loop so I'm going to just cut that from here and what I want to do is that I'm going to just write my lii right here and I'm going to be using my nested full loop so a nested full loop is a full loop inside another full loop so that's why we call it as a nested for Loop right here so now let me just write a m for short of movies and I'm going to also past my index in this case and I'm going to be just iterating over through all of that movie right here not movies but movie okay so now we it over through all of that movies I mean like movie and here we just have to password key and for this key we are going to be passing our Index right here which we are getting from this one and now let me just uh render my M right here for movies so now let me just save my file and here you can see we are now getting all of that movies one by one one of my favorite movies is the Godfather yeah I kind of not kind of but I really Love The Godfather movie amazing movie all righty so yeah that was another example so if you're a gamer I have a good news for you because currently we are going to be working with a lot of games so const games is going to be equal to this ref and here we are going to be passing a lot of object inside objects so not arrays but objects inside objects so now let me just place it right here and you can find all of the coding in my GitHub repository so here you can see we have object opening and we have a object closing right here and this object has a lot of uh properties and its Valu so we have a ID the title The genre the platform release dat developer the developer name and uh location the team size the ratings object we have a feature object we have a system requirements we have a recommended we also have a story line character and achievements so yeah that's a lot of data which we are currently working with but now let me just itate through all of that data and we're going to make sense of that data right here so inside a template what I want to do is that I want to just write my uh UL first of all come on ul and inside this UL we're going to be using my V4 attribute or not attribute what the hell uh V4 directive and I'm going to just pass my value and I'm going to also pass the keys and I'm going to also pass the index right here in games okay so if I just past that then we have to make it totally Dynamic so for that we're going to have to WR this value right here so now inside there uh first of all I'm going to just render the index I'm going to just write a separate for myself and then I'm going to also render the keys and then I'm going to also write a um come on separator and I'm going to also render the value okay so if I do that and now let me just save my file so here you can see it's going to gives us the uh first of all the index then it's going to gives us that Keys which you can see right here so it's going to giv us that keys because currently we are working with the object so this object will have these keys right here and this object will also have these values right here so that's why if we just write that value so it's going to giv us all of that values from uh what do we call it from this game's uh object right here so this how we are going to be rendering the index this is how we are going to be rendering the keys and values just for the object not for the array but for the object okay so this is totally supremely easy to work with VJs is awesome okay and what I want to do is that I'm going to give you yet another example so now let me just remove this Ur from here and I'm going to remove this entire gaming object right here okay so now in this case now let me just give you example of comp come on complex games object and it's going to be equals to this ref and inside this ref we are going to be passing my data so here you can see this is going to be the object opening and this is going to be the object closing tag or what you want to call this so we have a few games right here so we have a game one which will have the title The genre and the platform releasing that and so on and so forth right here so I'm going to go ahead and go to the bottom and what I want to do is that I'm going to first of all write a UL right here UL I don't know why my V code is not giving me auto complete today but anyways I'm going to take care of that a bit later and here I'm going to just past my game and I'm going to also paste the index right here and now let's just iterate over through of that complex games object and here we just have to provide that key and that key will be totally unique so for that we have to pass this Index right here okay so first of all let's just learn about how in the world we are going to be getting all the objects right here so how we are going to be getting all of that object so for that we are going to be using this Li and you already know how we are going to be getting there so I'm going to just space my game right here so underneath that let's just provide a br right here so now let me just save that and here freen is going to gives us all of that games right here so we have a title we have genre we have a platform and we also have the releasing dat or release dat whatever you want to call that and now let me just show you uh what do we call it uh getting single value come on value from object so how in the world we're going to be getting a single value from that object so for that we are going to be using the nested for baby so now let me just write a view4 and here we just have to pass the property and also the index right here in game not in games here you can see not in this object but we are going to have to pass this game object right here okay because we are currently working with the nested object so for that we have to pass the game right here in this case and now let me just pass my uh what do we call it let me just pass my key and for this key we are going to be passing this Index right here this I for the index and here we just have to pass or property come on what the hell p r o p rty y there we go and now if I sve my file and here you can see it's going to gives us all of that items right here but that's looking a bit off anyways so here you can see it's going to gives us all of that entire object and then we are getting all of that specific value from the specific object right here so we are getting it for the first one we are also getting it for the second one for the third one and for all of them right here okay so if you want to work with a lot of data and we want to get the Valu so that we're going to have to use this nested for Loop inside this first for Loop right here and now let me just show you how you are going to be destructuring that so I'm going to just remove all of that stuff from here and I'm going to just destructure this camera right here so I'm going to just P the title the author the genre and also the publication here right here I already show you there but I want to show you once again because I know some people will get confused so let me just show you there once again doesn't matter because I'm not even wasting your time so now let me just write the publication year come on publication year right here so now let me just sell my file and here you can see it's going to gives us uh what do we call it so for some of the objects we don't have this author yep we don't have author and we don't have the genre and also the publication here let me just show you that so we have author right here what the hell is going okay so we have author for this one and here you can see for this object we don't have any authors that's why we're not getting there and we also have the publication here for this one so this is what we have our release dat and I'm going to also paste this release dat just in case and I'm going to be using it right here so it's going to make it a bit clutter but anyways now let me just save that and here you can see we now getting that publication year right here you get the idea so I'm not going to be wasting a lot more of your time but I'm going to just remove that and I guess let me just give you the final example okay so let me just remove that from here and I'm going to go ahead and I'm going to just write a UL right here and inside this Ur I'm going to be using the V4 but in this case we are not even iterating over through nothing but I'm going to just past a number right here number in five okay so I know this is a bit weird syntax because we are not even iterating over through anything but now let me just show you how that's going to look like so I'm going to just write my lii let me just save that and here we just have to pass number right here so what do you think will be the result of this code I'm just asking you a question just take a wild guest and tell me what do you think will be the result of this code so now if I save my file and here you can see it's going to give us that number from one through five right here so we have some sort of a variable and we are just iterating over through five times so that's why we are now getting all of that numbers starting from the one through five right here so if I just change that to 10 sem my file so here you can see it's going to gives us that 10 items right here with without iterating over through anything and without working with a lot of complex data we can also use this four I mean like this V4 directive in VJs so now we are moving our gears toward the forms and inputs so for that we have to learn about the V model so what in the is a v model and why you should care about that so A V model is a directive that provides something called the two-way data binding I'm going to explain what a two-way data binding is in a few seconds but first of all I guess I'm going to have to restart from the beginning so the V model is a directive that provides a two-way data binding on the input text area or select elements and it creates something called connection between the data in your component and the input field allowing changes in one to automatically update on the other and wise wordsa so now let's just talk about this uh weird thing which is called the two-way data binding because I know a lot of people will ask me like was then you just skip through a two-way data binding and I don't even know what the hell is that two-way data binding so so now let me just tell you that so what in the world is a two-way data binding or two-way binding whatever you want to call that so two-way binding means that changes in your code automatically updates what you see on the screen in vice versa it's like a live connection between your data and the user interface okay so making it easy to keep them in sync without writing a lot of extra code that's what a two-way binding is so now let me just uh give you a few examples then you'll get to know what I'm talking about so I'm going to go ahead and this Al from here and I'm going to just work with form okay so first of all let me just create some sort of a reactive state for myself baby uh I'm going to just write H1 right here and first of all let me just go ahead and go to the top and let's just create our form data is going to be equals to not this oh come on what the hell am I doing you know I'm going to cut that for a second and I'm going to first of all import the reactive right here from the VJ and let me just place it right here and and I'm going to just create a reactive state for myself in this case we're going to have to work with the object so now let me just pass the username and the username will be empty string I'm going to also past this empty email and also come on for the password we are going to be also passing this empty string right here and we can still use what do we call it we can still use the ri if you want it oh you know let me just use the refi right here what the hell because it's going to make you confused by using the reactive and the rims and all of that kind of stuff so so I'm going to just remove that H1 from here and I'm going to just create a form right here let's just remove this action from here and what I want to do is that I want to just write my input field right here input with a type of text first of all and I'm going to just WR my placeholder and please uh enter your name and let's just go back and inside there we are going to be using something called The V model which I just show you a few seconds ago and here in this case we're going to have to use the form data which which you can see right here so we have this reactive state of username we have a email and also we have a password right here and in this case this V model will allows us to work with a two-way data binding okay so I'm going to just write a DOT and then the username right here and I guess that's going to be it but first of all I'm going to go ahead and go underneath this H1 and I'm going to just write I mean like underneath this form and I'm going to just write H1 and I'm going to just uh write like form data do username right here okay so now me just show you what in the word is a two-way data binding so now let me just save my file and we have to refresh there uh yeah I'm going to go ahead and type something inside this so if I start typing something so here you can see it's going to also reflect back right here this is what we call a data binding right here so now we bind that data so anything we type inside this input field will gives us the result right here okay so here you can see that and this is how we are going to be achieving the two-way binding or tway data binding whatever you want to call that and I'm going to go ahead and just write input field once again for the email as well so now let me just write input field for the email and I'm going to also past the placeholder of like please enter uh enter your email and let me just past once again or V model right here and I'm going to just past my form data come on form data and let me just provide my email right here let me just duplicate that for the password as well and I'm going to change this one to password as well and also enter your password there we go okay so now I'm going to go back so you guys can see everything a bit better and I'm going to just duplicate there a few times so we have a username we also have a email and we also have our passw right here so now let me just cut that from here and now if I sell my file so here you can see we have our let me just refresh that we have our username uh I mean like we have our name field we also have our email field and we also have our password field right here so if I just write something like my name is hosan my email is hosan gmail.com and my password is um uh what what's my password my real password right here okay so yeah this is how we are going to be working with the forms and this is how we are going to be using the VB not a v bind this is how we are going to be using the V modal okay so yeah create a button right here and I'm going to be passing the type of submit right here come on with the hell I'm going to be passing the type of submit right here and I'm going to just say submit so if I sell that and if I just click on this button everything disappears and our page will be totally refreshed that's just a normal behavior of a form and now if you want to prevent that from happening so for that we can either create a separate function and we can provide our event object we can then just use our event prevent default or we can use a short hand right here so for that we can just use our sub submit which is our event handler right here and then we can just write do prevent which I already mentioned but I said like I'm going to be explain that later and now is later okay so now let me just write some sort of alert right here like form submit come on submited I guess this is how you spell it so now let me just save that and now let me just refresh there and I'm going to be passing my name once again and husen at gmail.com and my personal password word and now if I click on this submit button oh my God something happening or not anyways if we just for something is going to work but if you didn't specify anything at all it's going to still work so now let me just save there let's just refresh and if I just write like something something something right here and if I click on that so here God damn it at gmail.com and if I click on this it is no longer refreshing my page right here but if I just remove this submit from here I like uh this entire and now if I sell my file and click on this button so here you can see it's going to just refresh my browser and we don't want that so this is how we are going to be working with the V model in wjs so now let's talk about a props in VJs so Props short for properties are a way to pass data from a parent component to a children component so Props allow you to communicate between component by allowing the parent component to pass data down to its children component and this is useful for creating a reusable and modular components so that's just a theory of what a props is so now let me just write some code then you'll get to know what I'm talking about I'm going to just remove that from here I'm going to also remove all of this entire thing let me just write H1 of props let me zoom in a bit and I'm going to be creating a lot of components right here okay so I guess I'm going to have to change the name of this one too first of all a static props or yeah static props I guess static props component I'm going to just give a name of like static props component would be fine okay so now I'm going to just uh let me just grab the name of that let me just go ahead and change it right here first of all so we have a static props component and the first thing which I want to do is that I want to Define my proper here like we are going to be sending my data from this parent this is a parent component right here like this view is the parent component and we're going to be ing our data from this app to this static props component right here so how in the world we're going to be doing that so this is how we going to be doing that let's suppose if I want to P some sort of a string so I'm going to just uh WR a string of name and I'm going to just give a name of like Jordan and I'm going to just save this file then I'm going to go ahead and grab that prop from this component which we provide right here and we have to use it inside this children component right here so how we are going to be grabbing that we can just do that by using con PRS you can give it any name you want but in my case I'm going to give a name of like PRS and it's going to be equals to the Define come on d e f i n e defined promps right here so inside this defined prompts we're going to have to pass or array and in this case we are going to be just providing the name of our prop so the name of our prop is name so if you just specify like uh something else we're going to have to copy this something else and we're going to have to place it right here but in this case we are just the name of name so here we have to provide that name right here so first of all let me just log this promps to the console and then you'll get to know what I'm talking about I'm going to just remove this ref from here now let me just save my file and refresh that so here you can see it's going to gives us that proxy object and here you can see if I can show you there but I'm going to go ahead and go to the Target and we have yet again another Target object so I'm going to just click on there and inside then we have our name prom and which is set to this Jordan right here so PR is simp simply a properties which we are passing you can say property or data whatever you want to call that we are passing some sort of a data from a parent component down to its children component okay so now we successfully grab the data from this parent component and we are now successfully getting that data so now we have to use it right here so what I want to do is that I'm going to just remove that from here and I'm going to just use like prompts do name in this case so now if I save my file and here you can see we are now getting J right here okay so this is how we going to be providing a prop this is how we are going to be getting a prop this is how we are going to be using a prop right here let me just create yet another component and I'm going to give a name of like dyamic props content or you know component be find component view right here okay Dynamic props component and I'm going to just copy almost every single thing and I'm going to just place it right here and let me just remove that stuff from here as well so now let me just save my file I'm going to just close this one because we don't need there no more and what I want to do is that I want to declare a few Dynamic content right here so I'm going to just get my ref so con uh come on ref from my VJs right here and in this case I want to paste like first name and last name so I'm going to just write like first name will be set to hosan and con last name will be set to web dev right here okay so I'm going to first of all get my component which is called a dynamic prop component I'm going to copy that now let me just call my component right here and now let me just close that from here and now if you want to past this content dynamically so how in the world we are going to be doing that well that's totally easy first of all we have to write either the V bind or we can use this short hand which is called this colon and then we have to just write our first name first name and it's going to be equals to my first name right here this name doesn't matter you can give it banana you can give it orange you can give it any name you want but in my case I'm going to just give a name of like first name and this is the dynamic content which we are getting from uh this first name variable right here so in this case what we are currently doing is that we are cutting this hosan and we are passing it right here down to this uh children component and then we will be able to use that okay so this is what we are doing so this name doesn't matter you can give it any name you want but in my case I just give a name of like first name and now let me just also use for the last name and I'm I'm going to have to render my last name right in here okay so now if I sayi oh you know what it shouldn't be like that I'm going to have to use my refs right here so I'm going to just use my RI and now let me just close that data inside that ri right here okay let me just put empty space so that you guys can see everything a bit better and now I'm going to go ahead and grab all of that content right here so I'm going to just give a name of like PRS and it's going to be coming from Define props and inside we're going to be passing this array because because currently we are working with a lot of data right here so I'm going to just pass my first name and I'm going to also pass my last name right here okay so let me just render there right here so I'm going to be using props start first name now let me just duplicate there and prop. last name so now if I save that and here you can see it's going to gives us Jordan husan and webd and Jordan is coming from this first component we can also comment this out if you wanted to but you know what I'm going to just write HR for this horizontal line right here okay so now we are getting this hosan and also this web dev right here so this is how we are going to be working with a dynamic props component and now what I want to do is that I'm going to tell you something about props that props value cannot be changeable you can read the props data like this you can use the props data but you cannot change the props data like props are immutable they cannot be changed so what I want to do is that I want to create a separate component I'm going to give a name of like uh I don't know changing props value. V or something like that and I'm going to go ahead and open this Dynamic component copy that place it right here let me just remove every single thing that I currently have right here so now what I want to do is that I'm going to get my props right here so if I just get my props con props and it's going to be oh you know first of all we have to use this component somewhere so we are going to have to first of all import it right here so I'm going to just import that changing props values and we have to remove this View and now let me just copy there and I'm going to just place it right here s my file and yeah I know the spelling is incorrect but bear with me for a second so now if I just refresh that we don't have any content so now let me just write something right here so we can see that and here you can see we're now getting this something so everything is working totally a okay but now let me just P some sort of a content right here so I'm going to just declare some sort of a my favorite um number or something like that is going to be equals to 7 and I'm going to just copy that and you know I'm going to have to just write it inside a RI and now let's just pass my favorite number right here dynamically so I'm going to pass my favorite number and also my favorite number right here so now if I save that and now if I want to get that so I'm going to be using con props or you know what uh my favorite number uh number prop or something like that and we're going to be just using Define uh come on what the hell d e f i n e Define props and inside there we're going to have to provide my favorite number prop right here so if I just loog or you know I'm not going to log there to the console but now let me just show you that on the screen so if I just write like my favorite number prop and now if I saell that and here if I refresh that so here you can see we are now getting this uh string value but that's not what we want oh I forgot to just provide my favorite number there we go so now if I sell there is is going to gives us that seven right here which is totally a okay but now let me just show you that you are not able to change the value of their prop so I'm going to just write like my favorite number prop and I'm going to X is my favorite number right here and let's suppose if I want to change that to 10 so here you can see my ID will automatically give me an error if I hold my mouse over to the unexpected mutation of my favorite number props and it is coming from this es L right here so you know what let me just save this file anyways and let me just see the results if I refresh that and here you can see nothing is happening if I right click on that and open my console let's just see what console have to say it is going to gives us this error right here so set operation on the key my favorite number fail Target is read only like you can totally read the content of a promps but you cannot mutate that or change that okay so this is not acceptable you know let me just write a comment right here so here you can see props are immutable which means their value cannot be be change and they are just read only okay and this is a big no no you cannot do that okay so now let me just close this one and now let me just create yet another component right here I'm going to give a name of like prop validation. view let me just copy there and I'm going to just render it right here but first of all uh we have to write some sort of a Content so I'm going to have to steal that content from here and now let me just place that right here remove that and all so remove that okay so now let me just um come on let me just import this uh what do we call oh my god um oh my God now let me just grab uh this prop Val come on Prop validation right here now let me just use that right here so I'm going to copy that but before I do I'm going to have to write my HR and now let me just use that right here so if I sell my file and now refresh there come on I refresh there why it's not giving us anything because we don't have anything right here so that's why we are not getting anything so here you can see we're now getting this something right here so what I want to do is that I want to P some sort of a dynamic content right here and I'm going to be passing a lot oh you know what I'm not going to be passing a lot of content but I'm going to just provide like full name and my full name is uh my full name is hose webd but I'm going to just past my Jordan right here and I'm going to also dynamically add this uh 20 Edge right here so that's cool but I'm going to go ahead and grab all of that content right here so to do that first of all I'm going to just write a props and it's going to be coming from the Define props right here and inside that what I want to do is that I want to just get my full name and I'm going to also get my Edge right here okay so let me just render this so whether we can see that or not so we have a promps start full name and we also have the props do a so now if I just save and refresh there so it's going to gives us the full name of Jordan and it's going to also give us the age of 20 did we specify yeah we already specified 20 I guess I specified uh seven anyway so now let's talk about a props validation so I'm going to just remove that and we can also provide a rules to validate our props so to provide a rules first of all we have to provide our object and inside this object we can specify a lot of rules for our props so I'm going to just specify like full name is going to only be a string and this is going to be uppercase s right here okay and my Edge prob will only be a number nothing else than that okay so now if I save my file and here if I just refresh this so here you can see we are still getting that content right here but if I go ahead and go to my app right here and instead of providing some sort of a name of string let's suppose if I provide like I don't know maybe uh I don't know maybe 20 right here for the full name uh I'm going to just add it dynamically let's just remove that and make it as a double quotes and let's suppose if I provide string like let me just write something as a string for the edge and now if I save my file and now if I check it out and refresh that nothing is going to happen right here but if I right click on that and go to my inspect area and go to my console so here you can see we are now getting amazing errors right here invalid props type check fail for the prop full name expected string with a value of 20 and got number with 20 value right here so that's not going to fly here because we already provide these validations right here okay so the next one we have is a invalid prop type check fail for the pro of Ed expected a number with the value of none uh and got a string with a value of something right here okay so it's going to give you that error inside a console and I wish if it gives that error on the screen but anyways this is what it is so yeah this how we are going to be providing a Basics validation or a basic Bic basic validation and now let's just put a little bit of complex validation right here so now what I want to do is that I'm going to just write complex uh props validations or something like that and now let me just get my props once come on props once again by using Define props and here inside that we can just provide validation for the full name so I'm going to just write a full name and the full name will be in this case type will be set to string we're going to be providing a type like which type of data this prop should have and whether it should be required or not so I'm going to just WR a required and I'm going to make it as a true and we can also even specify a default value for our props so you know what first of all I'm going to just uh leave it the way is and then we're going to be working with a default value in a few seconds so now let me just write Edge and the edge should be a number right here okay so if I just write this required right here s my file and now let me just go ahead and remove uh this full name right here okay so I'm going to just remove this full name from here s my file and now if I just refresh that so here you can see it's going to gives us something and it is not going to gives us that uh full name right here but if I right click on that and go to inspect area and if I go to the console so here you can see it's going to giv us that error like missing required prob a full name is not defined and instead we got only the something I like instead we only got the edge with the value of something but we don't have access to this full name right here you have to do something about that so this is how that required will work but we can even also specify the default value if you want to okay so if I just write default and default will be like n no come on n o n y m o s and we can also specify the default value of anonymous so if I sell there and here you can see it's going to give us the value of 20 right here because that's not the correct value okay so I'm going to go ahead and rechange that right here so uh my full name is hen hen webd and I'm going to just specify the edge of 20 baby 20 there we go so now if I save that and now if I refresh so here you can see that a is gone and now let's suppose if I didn't specify the full name and here we are requiring that and we are also specifying the default value of anonymous to that let me just cut that from here and here you can see it's going to giv us like missing required Pro of full name but it's going to also gives us that Anonymous right here okay so by default we specify this Anonymous value to but here you can see we're going to be still getting this uh error right here so now let me just provide there once again sem my file and there you have it so that was just a quick introduction to a props and the props validation and all of that so now let me just give you example of a complex props okay so I'm going to just create a component given name of like complex prop. View and now I'm going to go ahead and not to this one but maybe I'm going to go ahead and go to this first component because this one is totally simple and easy and now let me just place every single thing right here and I'm going to just say something right here save my file and we have to render this component so I'm going to first of all have to import this complex props let's just remove that view from it copy that and now let me just write HR right here and I'm going to just place it right here sem my file and here you can see we are now getting this something right here so we just told a okay but here we are going to be passing a lot a lot of data right here so just get rid of yourself so I'm going to just uh first of all specify the friends uh F and DS friends array right here so let me just uh write a double quotes and here I'm going to be passing like Alex uh John and also the Jordan and also Huzan webd as well and now let me just pass some sort of objects right here so I'm going to also pass the user info and it's going to be equals to this object right here so we would have a name of something like uh I don't know Alex and we will also have the edge of 20 and we will also have the location of the nested array right here and I'm going to just P like the value of Earth and I don't know and now if I sve there and this is how it looks like right now so now the question is how in the world we are going to be getting this complex props right here inside our component so first thing first I'm going to just write Define props and inside there we're going to be passing our object and now let me just provide a little bit of validation right here so the first friends will be array and also the user info will be an object okay so if that's not the case so it gives us an error inside a console which we don't care but now let me just write H1 of RS right here and now let me just also write a user info and now if I sell that and here you can see it's going to gives us that user info and it's going to also gives us that friend list right here okay so we can do all of that stuff which you want to do with that so we can just iterate over through all of their friends and we can get all of them and we can also do a lot of stuff so you know what first of all let me just write a ul and inside this UL we're going to have or one Li right here but first of all I'm going to be using my V4 which we just saw few seconds ago and I'm going to just past my print first of all and then the index and here we are going to be iterating over through all of the friends and we are going to be also providing our key right here and for the key we are going to be passing our unique index and now let me just render my friend okay so I guess I'm going to have to duplicate that and I'm going to just write a comment for myself like itating uh or friends array and I'm going to also write a comment for myself uh iterate come on oh you know we don't have to write a com for that so now let me just write my info and also the index object not index object what the hell am I saying today just an index so now let me just write a user info and now let me just pass my Index right here and here we're going to be just passing my info right here okay so this one will be only for the object so now let me just save that and here you can see we are now getting all of their friends and we are also getting what the hell am I doing why is this HR not working okay that's working right here but I didn't realize that so here you can see we are also getting our friends and we are also getting that information of that specific user right here okay so this is how we are going to be working with a complex um complex props right here now I guess I'm going to give you one final example of a props and which will be a custom validator for our props so how in the world we're going to be creating our custom validator function inside our props validation so I'm going to just create a component given a name of like Uh custom validator do view okay so now let me just uh go ahead and steal some content right here let me just copy that let me just place this content and let me just write a some something right here so now let me just s my file and now let me just grab my component so we have a custom Pro a God damn it now let me just copy that and here we're going to be just using our HR and now let me just call this uh function I mean like let me just execute or call or render my component whatever you want to call this so now if I save that and here you can see it's going to gives us that something right here but that is not looking a okay I'm going to have to comment all of this stuff almost this H HR so now let me just save that and here you can see we're now getting this something right here and I'm going to go ahead and go to my custom validator component and here we're going to be doing a lot of magic but first of all I'm going to have to provide some sort of a props right here so then we will be able to work with that props so I'm going to past my name of Huzan I'm going to also past the edge and the edge in this case will be 20 and I'm going to also pass the password and the password will be impossible password or something like that God damn it I m p o s i b l e I guess this how you spell it so now let me just save that and here we have to get that right here I'm going to zoom in a bit so you guys can see everything a bit better and Define come on Define pro and inside this defined props we are going to be providing our validator so for that we have to provide our object so the name and we yeah we are specifying the name right here so first of all let's just provide a level of validation for the name and we can specify the type of string right here so our type will be set to string but we can also provide our validator function so validator weid at on so validator function and here it's going to take the prop come on the prop value and here we can just uh return like um hosan we can return the Jordan and we can also return the John as well okay so do includes includes right here and we're going to be just checking that prop values which that validator function will take okay so this is going to be our first validator function and now let me just you know let me just save that and I'm going to put my comma Here and Now underneath that we're going to also providing a validation for the edge so the type will be set to a number and I'm going to be also providing that validator function right here so we can do that by using these curly braces or we can do the in line if you want it to so in this case I'm going to be placing it as inline right here okay so prop value do length let me just check for God damn it l GTH and if the length is greater than or equal to add and true okay so then it's going to work so it's prop there we go now let me just put a comma here and I'm going to also specify one valat for the password as well so I'm going to just write a password and let's just provide a type of string to it and I'm going to also pass the Val dator function and it's going to take the prop value and their prop value. LIF is greater than or equal to add characters and true so then it's going to work otherwise not going to work okay so yeah I messed it up here I didn't mean to specify this stuff right here so I'm going to just remove that my bad and here we are going to have to check if the prop value is greater than or equal to 18 uh and the prop value is less than or equal to 30 come on what the hell uh 30 right here so let's just provide true right here so if that's not the case we just have to set that two false so there is something called the Turner or Turner whatever you want to call that Turner operator in um in JavaScript so now let me just save that let me just go back and I guess we are missing something oh we are not missing that but we are just providing the ENT true and it's not going to allow us so now let me just save that and here we just have to use the word here so I'm going to just put a name of name first of all now let me just duplicate that three times so we have a edge and this is going to be our Edge and then we have is our password and now let me just provide my password right here so now if I sell that and here you can see everything is working a okay but if I open my uh not terminal but my console right here so it's going to gives us nothing right here because uh everything is okay right here but in this case we're providing hosan Jordan and John but let's suppose if I didn't even specify hosan if I didn't specify the Jordan or John so it's going to gives us an error like if I just provide like random person or something like that now if I save that so here you can see it's going to gives us that error that's because of this prop validator right here this propil function and by the way we can also shorten that if you wanted to so let's just remove this uh curly braces and also this return statement and now if I save that and refresh so here you can see it's going of still gives us that same error right here so then we have Ed Ed is greater than or equal to 18 and the prop value is less than or equal to 30 then it's going to gives are true and false so in this case let's just provide uh the edge of like 200 right here let me just provide 200 right here now let me just sell that so it's going to give us like uh edges way too big and something like that and the final one we have is for the prop length is greater than or equal to Ed so then it's going to gives us that prop is valid right here so I'm going to just write you know that's greater than it but if I just write like uh I don't know 555 semi file and refresh that so it's going to gives us that error right here so yeah this is how we are going to be providing a props and this is how we are going to be changing the value of a props and so we just learned about the static props Dynamic props and also changing the value of of props and prop validation complex props and complex uh complex prop validation or you can also say the custom validator props or something like that so yeah that was the crash course about prop m in VJs so now let's talk about a component event in VJs so I'm not talking about a click event the submit event the input fi events and all of that kind of stuff this is something else so a few seconds ago we just learned about a props and props allows us to send our data from the parent to the children component but now in this case we are going to be learning about how we are going to be passing a data from the children component to the parent okay so word in the word is component events and how it works so component events are a way for a child component to communicate with their parent component they allow children component to emit events something called a custom events which I'm going to be showing you in a few second that can be listened to and handled by their parent component so how that's going to look like we would have two component the first component we would have a child component and we would also have the parent component so child component emits an event and parent component listen to that event so inside a child component you can use that dollar sign emit method something which I'm going to be showing you in a few second to trigger a custom event and this event can carry data that you want to send to your parent and then your parent component will listen to that event and so in the parent component template you can use the V on directive or you can also use the Shand which is called the the add symbol to listen to that custom event emitted by the children so yeah I know that's a lot of theory but now let me just show you some code and then you'll get to know what I'm talking about okay so let me just zoom in a bit so here you can see we just only have this uh app component right here and we don't have any other components so now let me just create one so I'm going to be just creating a component event. view right here what I'm going to do is I'm going to copy all of that content and now let me just place that right here and I'm going to just remove that from here and I'm going to just write something right here and now let me just go ahead and go to my view component I mean like my app component and now let me just import my component come on component event right here I'm going to just remove this view from the end now let me just copy that and let me just remove that from here and now let me just pass my component right here semi file and here you can see we now getting this something right here so now first of all I'm going to give you the example of that counter so before I do I'm going to have to import my uh ref right here so now let me just import my ref from the VJs and now I'm going to just write a let count and it's going to be equals to the refi and I'm going to be storing the value of zero right here okay and now the next thing which I want to do is that I wanted to show that count right here so I'm I'm going to just write a count and here let me just write a count right here with the separat so now I'm going to go back and now let me just save that and here you can see we have a account and we just have this something component right here I mean like the content from the component so now let me just go ahead and remove this something from here and inside this children component I'm going to be creating a button so now let me just create a button and I'm going to just write like I don't I'm going to just write a plus symbol right here now let me just zoom in a bit and here I'm going to just write a click event right here and I'm going to be using this dollar sign and then this emit method right here and inside that we are going to be writing the function name right here like which kind of function or which kind of data we want to pass to I mean like which kind of data we want to pass from this children component to this parent component right here okay so in this case I'm going to just give a name of like increment come on increment counter right here now I'm going to copy this name now let me just save this file and I'm going to go ahead and go to this component right here and I'm going to be using what I can either use the V on or I can use the short hand which is called the Ed symbol you already learned all of that stuff but I'm just showing you anyways and here I'm going to be just writing that add symbol because I want to use a Shand right here and then I'm going to be copying this name right here this function name and now let me just place that right here and then I'm going to be just writing this equal to sign and here we can write our logic right here so now in this case I want to write the logic of count Plus+ okay just count Plus+ we just only want to increment this counter right here so now if I sell my file and now if I refresh that so here you can see we have this count and we also have our button right here so this is a top level parent component the app component and this is the children component right here and inside this children component we have this button and we will now able to update our counter by using this children component right here so now if I click on that and here you can see it is now successfully updating right here okay so yeah this is how we going to be passing a data from the children component to or parent component right here so yeah that was the first example now let me just give you one more example and I guess that's going to be it so I'm going to just uh I guess I'm going to remove all of that stuff because we don't need that right here I'm going to also go ahead and remove this button from here and now let me just change the name of that to something else I don't know maybe I'm going to just give a name of like form um form component would be fine now let me just copy that and then I'm going to go ahead and import right here so I'm going to use import import form component from where from let's just go ahead and go to one upper directory and then I'm going to be importing that from here now let me just pass it right here semi file and we don't have nothing so that's why we cannot see anything so now let me just write something right here and here you can see we have that um something right here so now what I want to do is that I'm going to go ahead and go to the top and I'm going to just import my ref so now let me just import the ref from the VJs and I'm going to just write a username and initial state will be set to empty string and also for the email so I'm going to just write empty string and also for the pord as well it's going to be also set to empty string right here now let me just go back and I'm going to just create a form right here and we're not interested in the action so I'm not going to be providing any action right here and inside this form what I want to do is that I'm going to just write like input and for this input we're going to be also writing the V model and also we are going to be just attaching our username first of all now let me just duplicate that three times and also for the email and also for the password as well okay so that's that but I'm going to also have to change that from text to email and also to password right here and now let me just also create a button right here and it's going to just say submit and type will be submit as well so that's it for the UI but now you want to send some sort of a data from this child component to this parent component right here so how can we go about doing that this is how we are going to be doing that first first of all I'm going to just write this submit method right I mean like this submit event handler and then I'm going to just write a prevent so that we don't get our page reload and then we're going to be just writing this dollar sign and imit and here we are going to be just spacing first of all the function name so I'm going to just write like a user info or something like that this is going to be the function Name by the way and now we want to pass some sort of a argument to this function right here generally we create our function like this uh in JavaScript so here we pass some sort of arguments right here inside this area right here so first of all this name will be that function that entire function which we are going to be creating separately and then here we're going to be passing some sort of argument for that specific function uh perimeter right here okay so now let me just remove that from here and now let me just pass a few uh perimeter right here so I'm going to just put like a username uh the email and also the password as well so now if I save that now we are going to be creating this user info function and we are going to be passing this perimeter right here so now I'm going to just catch the data which this children component is passing to this parent component right here okay so now to catch that we're going to be using this add symbol and then the user info it's going to be equals to this form Handler like we can also write our logic in line if you want it to we can just create our function in line and we can work with that but I don't want I want to create it separately so I'm going to just create my function separately like form Handler would fine and now I'm going to copy that and now here now let me just create that function right here okay so I'm going to just create that function giv name of like form or you know we don't want to create it like that way so now let me just create an inline function right here and now in this case it's going to take the three perimeter which we passing right here so we are passing the username email and also the password now let me just pass that right here and now I'm not going to do a lot of things with that but I'm going to just console.log like username and here let me just pass my username perimeter which this function is taking right here so we are going to be passing this username perimeter right here inside this console so now let me just also write this email and here we are going to be also passing this email right here and also for the password as well okay so now if i s my file everything is working a okay and here you can also see that we are getting these uh input Fields right here but I forgot to include the what do we call it the placeholder I me like you don't have to do that but I'm just doing that for this course purposes so now let me just for like first of all um uh name there we go kind of lost my mind there then the email and then the password so now let me just save that and here you can see everything is looking a okay I'm going to just open my console and then let's just refresh there let me just zoom in a bit and first of all I'm going to be passing my own name which is hosen then let me just pass my real email right here and let me just pass and let me just pass my real password right here so like something else and now if I click on this button right here and here you can see we are now able to get all of that data right here inside this parent component right here okay so yeah this is how we are going to be passing our data from the children component to the parent component by using component events so now let's talk about a slot in VJs so I divide this topic into a few categories like first of all we are going to be learning about what a slot is then we are going to be learning about a fallbacks then we are going to be learning about a name slot and finally the default slot so trust me slots are not that much difficult topic to learn but it has a few flavors to it so yeah now let's talk about what in the word is a slot and what you should care about that so a slot is like a space in a component where you can put different things and it allow you to create a reusable component that can accept different content while maintaining a consistent structure okay so this is what a slot is so now let me just write some code then you'll get to know what I'm talking about so here what I'm going to do is that I'm going to just remove that from here and I'm going to also remove that from here I'm going to just write slot in this case so now let me just save there and I'm going to delete this component entirely and first of all let me just create a component given name of like slot component. View and I'm going to just copy this content and now let me just put that right here and finally let's just import that slot right here so I'm going to just import come on import slot component if I can get the auto comp slot component from The View not view just but we have to go ahead and go up a level one directory then we have to go to the slot component right here so yeah I'm not going to be calling this slot right now because the syntax is a bit different so I'm not going to be calling that right now first of all I wanted to create a slot so how in the world we are going to be creating a slot in VJs so um creating a slot so how in the world we are going to be creating a slot and this is the most difficult thing no it's not you're going to be just writing a slot opening tag and Slot closing tag so this will allows us to create a simple slot or you can say a empty space in our component where we can put different kind of content so yeah this is a empty space inside this slot component if I can get the inside this slot component we are now creating this empty space right here so now if you want to fill this space with something so how in the world we are going to be doing there well first of all we have have to call the slot component somewhere and to call the slot component we are not going to be doing anything but we are going to be just calling our component totally differently so previously if you want to call our components we would call they like this slot component we would just Auto close it right here but now by using a slots we are not going to be closing our component like this we are going to be closing our component like this okay so first of all we are going to be opening our component and then we are going to be closing our component like this and now in side there we can put any content we want so in this case I'm going to just write like H1 and content one right here so if I just write this uh content one right here and if I save my file and here you can see it's going to gives us that content one right here so what's going on first of all we are creating a space inside our component then we are just attaching or we are pushing this content inside the space right here okay so if you want to add like some more content so we are totally able to do this let's suppose if I just write like content two sem my file and here you can see we now getting our content two right here so yeah this is how we are going to be creating a slot and this is how we are going to be passing a data to our slot and this how we are going to be calling a slot component right here okay so that was the topic one of slot so now let's talk about what is a fallback or you can also say the default content for our slot so fallback content in a slot refer to the default content that is displayed when no content is provided for a particular slot and it's a way to ensure that a component still has meaningful content even if the parent component does not pass any content to a specific slot okay so how in all we are going to be doing there it's totally simple and easy so I'm going to go back and I'm going to just remove this component right here because we don't need that no more and now I'm going to just create a separate component and I'm going to just give a name of like fall back uh content would be fine so tent. View okay so I'm going to copy this content now let me just place it right here I'm going to just remove that and also I'm going to just remove that from here and I'm going to just write H1 come on let me just write H1 of defa or you know all back would be fine so if I sem my file now we have to import our component right here so I'm going to just import my fallback um fallback content from let's just go ahead and go to One Directory the component directory and we have to grab our all back content right here and now if you want to call there so we are going to be calling it like this way so we just have to call there like fallback content opening tag and fallback content closing tag so now what we have to do is that we have to go to our component we just have to add a default content right here so first of all I'm going to be creating a slot so now let me just create a slot right here let me just zoom in a bit and inside there we're going to be just writing H1 or you can write any kind of content that you like you can write like whatever you want to write so I'm going to just write like this is a fallback come on fallback SL default content right here so if I sve my file and now if I check it out so here you can see it's going to gives us that default content right here and here you can see we are not passing any content right here for our slot but we are now providing a default value or default content right here for the slot so that's why we are now getting this result right here okay but on the other hand if I call this component one more time and if I just write like I don't know maybe if I just put some sort of a paragraph right here and if I just write like fall back uh will not work because I am providing content inside the component right here okay component there we go so now if I save that let me just go back and here you can see that fallback content will not work right here because we are already providing that content right here you know let me just comment this line out then you will get to know what I'm talking about so now if I save there and here you can see this content not work because this is a default content and it's going to take this actual content right here but if you are not specifying any content right here at all so then it's going to take this default content right here okay so here you can see it's going to giv us like this is a fallback default content but if I just uncommon this line out and if I sve my file so here you can see it's going to tag that default content right here okay so this is how the fallback Works in slots so that was a fallback content now let's talk about a name slots so as an name suggest that name name slots will be with the names so a name slot is a way to assign a specific name to our slot in a component and unlike the default slot which is unnamed and use when no explicit name is provided name slot will allow you to have multiple slot in a component and specify where the content should be inserted based on the slot's name okay so now let me just give you example of that and then you'll get to know what I'm talking about so I'm going to just say bye-bye to this component and now let me just create yet another component which will be a named slot uhp there we go and I'm going to just copy I guess I'm going to copy this content right here and I'm going to just place that right here and I'm going to just remove that slot for a second and you know what first of all let me just zoom in a bit and I'm going to just create a name slot right here so I'm going to just write a slot opening and Slot closing tag and I'm going to just specify a name for that so I'm going to just write a name of one I guess and then I'm going to just duplicate that and I'm going to also provide two right here so now that we create two two slots and we just give a name of one and also two right here so now if you want to specify a specific value for this specific name slot so how in the world we are going to be doing that well we just have to go ahead and first of all import that slot right Ian like that component right here so I'm going to just write like a name slot from let's just go ahead and go one upper directory go to our components and then our name slots right here and I'm going to copy that name and now let me just call that slot component right here okay so I'm going to just write HR and here let me just call that slot component opening and closing tag so now inside there you can either use the v slot directive to provide some sort of a content for a specific component or you can use the hash symbol to provide a specific content for a specific slot right here so now let me just show you both of them right here so first of all if you want to provide a content for this first slot so how in the world we are going to be doing that first of all I'm going to just write a template right here template opening tag and template closing tag inside this slot word here and then we can either use this v slot or we can use this hair symbol right here okay so I'm going to just first of all write a v slot and here we have to specifically specify for Which slot we want to send our data to so either we want to send our data to this empty space or to this empty space or slots whatever you want to call that so in this case I'm going to be just selecting my one right here like for my one slot and now inside there we can put any content we want like this content come on this come on this content will go to slot one now I'm going to just save my file and here you can see it's going to just gives us that content right here and if I just copy this line of code and if I just put it right here underneath this comment so here you can see it's going to gives us an ER like you are already providing some sort of a content for this one right here you want to push your content to the two yeah if I saell my file and now I'm going to also have to change this one to two as well so now if I save that and here you can see we are getting our content right here but we can also use this Shand right here so if I just copy that and now we don't have to write a v slot no more okay so if I save there and now if I refresh that so it's going to gives us uh that same result right here okay so this is how we going to be creating a name slot and this how we are going to be providing a content for our name slot right here okay so finally now let me just talk to you about the final topic which is called the default slot and that's going to be it for the slots I don't want to create a separate component for that but let me just create a separ component for that uh I'm going to just give a name of like default start. view right here and I'm going to just go ahead and copy some sort of a content from this component and I'm going to just paste this component I me like that content right here and we are going to be just creating an empty slot right here so I'm going to just save this file now let me just grab that component right here so I'm going to just write import default slot from where from my components and we have a default slot right here so now let me just copy that and I'm going to go ahead and call it right here so if you want to make your slot default so here you can see we going to be just writing a template right here and we just have to write a pound symbol then we have to just write a default right here and inside there we're going to be just writing H1 and this is some random default content right here so if I save there and here you can see this is totally working okay so yeah that was it about slots in VJs and we learn enough about slot so D God damn it you know I'm going to just fix that bit later so yeah that was there about a defaults I me like that was there about slots in VJs so now let's talk about one of my favorite Topic in VJs which is called the provide and inject so what in the world is providing inject and why you should care about that so I want you to just get rid yourself for a lot of buzzword right here so the provide and inject options are used for providing and injecting Properties or data down to the component hierarchy and they enable a form of dependency injection allowing a parent component to provide data or method that a child component can then inject and use and yeah I know that's a lot of Buzz words right here but now let me just break this down each one of them for you so here is the component hierarchy right here and we have some sort of a data right here inside this app component right here and we want that data down inside this data component right here so how in the world we're going to be doing there well the first solution we have is that we can pass this component down to first of all the card component because we can pass this component down to this data component like manually we cannot do that okay so first of all we going to have to call this I mean like first of all we going to have to pass this component down to this card component by using these props and then we would have to pass this same data down to the user component and then finally we will be able to pass this component down to this uh data component right here so that's a lot of work and I want you to just imagine like if you have I don't know maybe 100 component uh and you want this m data inside that I don't know maybe 90th component or 100th component so how in the world you're going to be doing that that's going to be a lot of work and you're going to have to pass this data again and again in different kinds of component so well that was the first solution and now the next solution we have is the provide and inject so first of all we are going to be using our provide method word here to make this data accessible for all of our component trees and then we are going to be using the inject method to get that data totally easily so I'm going to be just getting that data right here we don't have no more pass it right here for the card component then for the user component and then finally for this data we're going to be just getting that data down to that component if you want it right here we can pass it right here but if you want it right here we can pass it right here if you want it right here in this component we can pass it right here and then we go so that's what a provide and inject method allows us to do now let me just dig a bit further and tell you what in the word is this provide and why you should care about that so the provide is an option in the parent component that allows it to share data or method with its children component and it makes Properties or method available for injecting into the children component so what is the inject method or what is the inject option to be precise so inject is an option in a child component that specify which properties or method it wants to receive from the parent component and it allow component to inject and use Pro data or method so that's what's up so now let me just give you a coding example and then you'll get to know what I'm talking about so I'm going to delete almost or you know I'm going to delete all of that content right here let's just delete that and I'm going to be just writing like something right here and now let me just delete all of these components from here and first of all I wanted to give you the example without using the provide and inject method and then we are going to be refactoring that example to use that um provide an inject method so first of all let me just create create a component I'm going to just give a name of like School component Right here. View and then I'm going to be just creating yet another component which will be a student Com or you know what yeah student component. VI would be fine okay so I'm going to just copy all of that content right here and I'm going to be also passing it right here so this is going to be my uh School CH n school component and now I'm going to be also calling it right here like a student component right here so now let me just save that and first of all I'm going to go ahead and write some sort of a data so then we are going to be passing that data down okay so I'm going to first of all write like uh I don't know con student name let's suppose let me just zoom in a bit and he is going to be an Alex and then I'm going to just write student age and he is going to be like 20 years old and then I'm going to just write student location or something like that and I'm going to just pass like he's from Earth he's not from Mars by the way and the the next location we don't know so now if you want to get that data down inside the student component so how in the word we're going to be getting there now we successfully passed the data right here but I forgot to show you that this student component will be the Ned component for the school component so I'm going to just grab that right here I'm going to just grab my let's just import come on let me just import my student component right here I'm going to copy that and I'm going to just place it right in here okay so now if i s my file so now the student component is the nest children for the school component right here okay so now if you want that data that student name that student age location inside the student uh component right here so how in the world we are going to be doing that well the first thing which we can do is by importing the school component right here so now let me just import my school component like School component right here and I have to remove this View at the end and now let me just call that right here and and now I can pass all of that data manually by using props so I can just write like a student name and he is going to be a student uh name there we go and then I'm going to also past like um student come on student studnt student Edge and I'm going to just pass my student Edge right here and finally the student come on student location and here we just have to pass or student location right here so now if I save that and now we are passing that data down to this school component right here and now we will be able to successfully access that data right here so if you want to get that data first of all we're going to have to write defined prompts and here we're going to be just passing first of all the student name St D and your name then I'm going to be passing like a student uh Edge right here and then I'm going to be also passing the student location right here okay so now we are now successfully getting that data and now we would be finally able to pass that data down to the student component right here okay so what I'm going to do is that I'm going to just write like a student uh name or you know I have to just copy this entire thing I don't want to waste your time now let me just copy that and now let me just place it right here s my file and now we can access that data right here but we would also have to copy and paste all of that same content right here so now let me just copy that and now let me just place it right here and now we can use it so what I'm going to do is that I'm going to just write like uh student name and now if I sell that and here you can see we're now getting Alex and now if you just write like a student Edge and then finally the student location and now if I sell my file and here you can see we are now getting all of the data down from this student let me just write student component which is a children component right here okay so here you can see we're now getting all of that data right here okay so everything is a okay but let's suppose if you have have like I don't know maybe 100 components or maybe 1,000 component or maybe if you're working with uh Google or maybe Facebook and they're using a VJs and they have I don't know maybe 100 or some component like that so how in the world you're going to be passing that data down to all of that nested children again and again and then you will be able to access that data down inside that children component so that's a lot of work and that's a lot of pain and we don't want that now how in the world we going to be ref string this code to use the provide and inject method time to refactor our code so the first thing which I want to do is that I'm going to go ahead and go to my app component right here and I'm going to import something called the provide provide from where let me just get the provide from the VJs right here now we successfully get that provide uh function right here or whatever you want to call them method or whatever now the next thing which you have to do is that we have to comment out this line of code right here or you know let me just put this uh import statement at the top and and now here what we are going to be doing is that we are going to be providing their data so that it can be accessible to all of the components so I'm going to just write like a provide and first of all I'm going to just write a student name and he is going to be Alex right here we can also just write uh student Edge come on student Edge and I'm going to just paste like 20 right here and I can also provide the student uh location right here and he is going to be from the earth and I don't know so now let me just remove that stuff from here and now we are successfully providing that data and we no longer have to access that uh School component right here so we can totally remove that from here okay oh you know what we don't have to remove that we can only remove this props right here because we want to render that component right here so I'm going to just remove that props from here and now let me just save that and we are now successfully providing that data right here and I'm going to go ahead and go to the school component and I can totally remove this uh defined props from here and I can also remove these props from here as well so now if I just remove that save my file and now here I can also remove it from here as well so now let me just remove that and now if you wanted to access all of that data like this student name Edge and location from this app component down to this student component so this is how we are going to be doing that we are going to be just first of all getting the inject method from the VJs and then we are going to be just writing like inject and here we are going to be just passing that name which we are providing forward data like in this case I'm going to be getting my student name right here so now let me just write a student name and I'm going to just store there some sort of a variable right here you can give it any name you want by the way but in my case I just but in my case I just give a name of like a student name and I can now write a student Edge right here and now I'm going to be injecting the data which is a student Edge right here and finally the student uh location right here is going to be coming from the uh top level component the student stud NT location there we go and now we would be successfully able to get all of that data and now if you sa our file and here you can see we are now still getting all of that content right here so if I just remove that and there you have it okay so that's amazing like this provide and this inject method are one of the most useful and one of my favorite Topic in VJs so yeah that was the first example now let me just give you one more example and I guess you mastered the provide and inject method in VJs I'm going to delete both of these component from here and I'm going to also remove all of that stuff from here as well let me just also remove this component from here as well and I'm going to just write like uh I don't know maybe practice or something like that now let me just save that and I'm going to go ahead and create a practice component right here so practice component. view right here so now inside this component I'm going to copy that content and now let me just place that right here and I'm going to be also getting my component first of all so now let me just get my uh practice component component so import practice component now let me just copy that and now let me just place it right here s my file and now here you can see we're now getting our practice component so the first thing which I want to do is that I wanted to pass a lot of data I mean like I want to provide a lot of data so how the what we are going to be doing there well we just have to first of all import the provide method so then we will be able to provide your data to any component that we want so first of all I'm going to be providing the uh you know Pro array right here so first of all we are going to be providing an array so that we can see we can pass our data down to our components of friends and I'm going to be passing a lot of friends like I have a lot of friends like Alex Jordan and also I mean like trust me I don't even know these people except hosan and also John right here and then I'm going to be passing the provide objects right here we can also pass the objects if you wanted to so I'm going to just give a name of like games or yeah game would be fine and here we are going to be just passing one object right here with the ID of one and the title of I don't know maybe epic adventure game or something like that or games oh yeah game would be fine and then I'm going to just provide a genre and the game will be the action and also adventure and also R uh GP you know RPG rgp what the hell and also so I'm going to just provide a PL come on platform and here you know what let me just write all of that content and then I'm going to come back in a few seconds okay so here you can see we're now providing the platform array we are also providing the releasing dat we are also providing the developer and we are also providing the name location and team and now let me just provide arrays of object right here or arrays of objects whatever you want to call there so provide uh array or array of objects would be be fine okay so here I'm going to be using like provide method p r o v e and here we just have to pass like more games because the name should be unique and now I'm going to pass all of these games right here okay so we have different kinds of games here you can see we have a title the genre the platform and the releasing de and now we are successfully passing all of that content to all of our components so first of all you have providing the array then we are providing a huge object and then we are providing a huge array of object right here and you can pass any kind of data that you like so I'm going to go ahead and go to my component right here and first of all I'm going to be getting my inject method so I'm going to just write like import and inject from where from the VJs and then I'm going to be getting first of all my friends list and it's going to be coming from the inject and I'm going to just write a friends was that friends right I kind of forgot yeah it was friends so now the next thing which we have to do is that we have to pass the games we have to inject the right here and now I'm going to just pass my games right here and then cost more games and here we're going to be also injecting the more games right here okay so yeah now we are passing I mean like we are getting all of our data so now we have to do something with that data so I'm going to just first of all write like injecting array or yeah array would be fine and I'm going to be using the UL and let's just use a V4 I'm going to iterate over through all of our friend and I'm going to also pass the index and let's just it over through all of the friend list right here and I'm going to also past the key and for the key we are going to be passing our Index right here and inside there we are going to be also using our UL I mean like Li right here and here we're going to be just writing our friend right here on friend and now if I save that uh copy that and place it right here sem my file and it's going to give us all of our friend list right here and now underneath that what you want to do first of all let me just write HR right here and then I'm going to just write like H4 of injecting objects right here and then I'm going to going to be using the UL come on you know what let me just copy that we don't have to like uh type that again and again and I'm going to be just iterating over through first of all the game and I'm going to be passing that Index right here and I have uh their gamees list right here I mean like their games object right here we're going to be also passing our Index right here and also our games so now if I save that and here you can see we are now getting all of our games right here and now the next thing which I want to do is that I want to duplicate this line of code and instead of passing this objects I'm going to just pass like array of objects right here okay so we're going to be using I guess you know what that's cool that's cool so I'm going to just write a more games and index would be fine and I'm going to also pass my more games right here and here we are going to be just passing over mg for the more games so now if I save that and here you can see we have all of that games right here but if you want to destructure that we can totally destructure that if you want it to too so I'm going to just duplicate that and now let me just write like uh object destructuring so let's just remove there I can just write like object destructuring I guess this how you spell it so now I'm going to just D structure all of that content like title the genre the come on the platform and also the release or you know let's just copy that from here release that and now let me just place the right here and yeah in more games and we are now passing every single thing but now we have to use all that D structur data so I'm going to just duplicate that let me just pass my genre the platform and also the release dat for here but L form is not looking cool I don't know why uh L form yeah I was just proving a wrong sping I guess so now let me just save that and here you can see it's going to gives us all of their platform and all of that kind of destructured data right here okay so yeah that was huge but this is one of my favorite topic so that's why I spent a lot of time right here so yeah now you successfully mastered the provide and inject method in VJs now let's talk about life cycle hooks but before we get into the life cycle hooks first of all I want you to grab a cup of coffee because I'm going to be showing you a lot of slides right here okay so trust me it's not that much difficult topic but it has a lot of missing pieces and everything is just floating around so what in the word is a life cycle Hooks and why you should care about that so life cycle hooks are a special methods provided by wujs that allow you to execute code at a different stages of a compounded life cycle these hooks provide developer with the ability to perform action or respond to events at a specific point during the creation updating destruction of a view component so before we jump into what actually are a life cycle hooks first of all we we have to learn about these two concept which is called the mounting and unmounting or Mount or unmount so what is a mounting or Mount and why should care about that so mounting means when a component is being created and inserted into the Dom and unmounting means when a component is being removed from the Dom okay so I want you to just keep that in mind and now let's begin our journey with a lot of slides so yeah first of all we are going to be talking about the on before life cycle hooks so it just a hook to be called right before the component is being mounted so what is a mounted when a component is created and inserted to the Dom so when this component is called the component has finished setting up its reactive state but no Dom nodes have been created yet and it is about to execute the Dom render effect for the first time so that was the first one now the next one we have is the on mounted I want you to keep in mind this teed because we have another concept you know what I'm just getting a sid track so so now I want you to just keep in mind that the next one we have is a on mounted with teed so on mounted is used for executing logic or action after the component has been mounted to the Dom this Hook is particularly useful for test that should occur when the component is ready to interact with the user such as fetching the data setting up a listener or performing initial calculations okay the next one we have is a on before update and it registered the hook to be called right before the component is about to update his D Tree due to the reactive State changes and this hook can be used to access the Dome State before the view updates the Dome and it is also safe to modify a component State inside this hook okay so yeah you can even take a screenshot of that because I know that will not stick to your brain sometime if I'm working with a view app and I want to do something so I do search a lot about these uh life cycle hooks so yeah that's totally normal if you are not getting it at first time so the next one we have is on updated this one well come on this one is on before update and this one is on updated right here so on updated register call back to be called after the component has updated the Dom tree due to the reactive State changes and this Hook is called after any Dom updates of the component which can be caused by different state changes because multiple State changes can be bed into a single render cycle for performance reasons the next one we have is a on before unmounted okay so now we are talking about the deleting stuff so Reg ex ra hook to be called right before a component instance is to be unmounted like removed so when this Hook is called the component instance is still fully functional okay the next one we have is unmounted right here and register a call back to be called after the component has been unmounted use this hook to clean up manually created side effect such as the timers Dom event listeners or Server Connection okay so yeah that was a huge list of life cycle Hooks and now let's just write some sort of a code then you'll get get to know what I'm talking about so for this example I already created this component which is a life cycle component and I already imported that and I just render that right here and I don't have anything special inside there but I just only have this H1 right here so now let's just start working with our life cycle hooks right here okay so what I'm going to do is that I'm going to be importing a lot of stuff from my VJs so what are the things I would need right here so the first thing which I would do is that I'm going to be getting the Riff then the on before Mount then the on Mount t then we would also need the on before update not mounted but update right here and we will also need the on updated right here and also the on before unmounted and finally we're going to be importing this un like on unmounted right here so if I sve my file so it's going to Auto format there right here and now what I'm going to do is that I'm going to just create one message right here is going to be equals to empty string or you know not empty string but hello uh we would be fine right here okay so what I'm going to do is that I'm going to just remove this H1 from here and I'm going to just write a paragraph tag right here and I'm going to just render my message and now if I save my file so here you can see we are now getting where hello View and also I'm going to be just creating a button and which will just say like update the message right here so if I save my file and here you can see we have this update message button and everything is working a okay so I'm going to just right click on that and go to my console and now let's just start using all of these HS right here and trust me we have like a lot more hooks than that but in this specific section we're going to be just learning about these okay so yeah now let's just start working with that so the first thing which I want to do is that I want to start from the life cycle hooks Right Here and Now what I'm going to do is that I'm going to be starting from the first one which will be on before Mount R here and it's going to take the Callback function I mean like all of that life cycle will take a callback function so now in this case I'm going to be just logging to the console like comp component is about and here is the keyword about right here about to be mounted right here so now if i s my file and here you can see if I just refreshed it so it's going to gives us that component is about to be mounted right here okay so it is not already mounted but it is about to be mounted so it's going to gives us that uh message right here so now the next life cycle hook which we are going to be using is this on mounted and here we are going to be also passing this Arrow function and we are going to be just writing where console. log it's going to say like component component has been mounted right here so here the keyword is has been mounted so if I sell my file and I don't know okay that's because of that errors so now if I sell my file and now if I refresh that so here you can see it's going to first of all gives us this message right here like component is about to be mounted and then it's going to gives us that component has been mounted so what if I change the order of that so if I cut that from here and if I put right here at the top and I put this second one at the bottom so what do you think will be the result of that so if I save my file and it refreshed that so here you can see the result will be totally the same so it's going to give us like component is about to be mounted which is this second one right here because it's not going to wait for a component to be mounted it's going to gives us that result first and then when the component successfully mounted then it's going to gives us the result of this unmounted right here so I'm going to just cut that from here and now let me just put that right here back so now if I save that and that was supremely easy like this one is not going to wait for a component to be mounted it's going to giv us every single thing which you write right here before even the component mounted and then when the component successfully mounted so I mean like when the component successfully render to the Dom so then it's going to gives a St result Right Here and Now underneath that we're going to be working with the on before um what do we call it on before mounted word or not mounted on before updated right here so I'm going to just loog to the Al that component is about to update about to update right here okay so it is not already updated but it is about to be updated so for this hook to work first of all we're going to have to provide some sort of updation or yeah we have to update something then this H is going to be working so what I'm going to do is there I'm going to just uh attach the event handler right here so I'm going to just say when somebody clicks on there so we're going to be calling this function which is update message function now let me just copy there and now let me just create that right here here so C update message and this is going to be the arrow function and we're not going to be doing anything crazy but we are going to be getting that message which we've created right here above which is just saying like hello view we are now getting the value of that and we are just uh changing that to something else like updated miss m a s a g e yeah or no not M A but m e s a g e okay so now if i s my file and here you can see we have the button right here so first of all it's going to gives us this result right here like component is about to be mounted then component has been mounted but now if I click on this button so here you can see that content will be updated successfully right here and it's going to also gives us that component is about to be mounted or about to mount right here so it's not going to wait for a component to be mounted so it's going to give us all of their result when the component is about to be mounted and now the next one we have is when the component successfully update so we are going to be using that on update and here we are going to be passing call function right here so if I just write like cons log and component has been um yeah has been updated there we go so now if I sell my file and now if I refresh it right here so Watch What Happens so if I click on this button right here so it's going to gives us that two results right here the first one will say that component is about to update I did I just say mounted I meant update I don't know what I said but anyways you get the idea so component is about to update and here we are going to be getting that component has successfully updated right here in this case so this one is not going to wait for a component to be update so it's going to give us all of the logic which we're going to be putting right here okay so I'm going to cut that from here let me just put that at the bottom so that you can see all of the life cycle hooks so this one is not going to wait for a component to be updated and this one is wa for a component to be successfully updated and then it's going to give us the result which we put right here inside this unupdated life cycle hook right here so the final two we have is the on before unmount and we have the on unmounted right here so to give you the example of that we're going to have to destroy something inside our component so we cannot destroy something right here but we're going to have to put some conditional statement for that so the first thing which I want to do is that I'm going to just write like on before unmount right here and inside that I'm going to be just logging to the console that component is about to be unmounted right here okay so now I'm going to save my file and now if I refresh then nothing is going to happen so for that I'm going to have to go to my fjs right here and I'm going to have to write some sort of a logic right here so I'm going to first of all get my refi and I'm going to just get there from The View and now let me just try like show hide or something like that and here inside this RI I'm going to be passing the true and now and now I'm going to be passing this component conditionally so I'm going to just say like we if and here I'm going to be passing this show hide right here okay so show hide and now we are going to be just generating some button and it's going to say that uh I don't know come on show/hide and here we're going to be passing when somebody clicks on this button so what do you want to do we just want to show hide and now it's going to be equals to not show hide right here so now if I save my file and now if I refresh that so here you can see we have this show hide button right here so anytime I click on this button so it's going to hide the UI I mean like it's going to totally remove that component from here and it's going to gives us that component is a about to be unmounted and you already guessed it that we use unmounted when the component is destroyed okay so now let me just show you there let me just go ahead and refresh there I'm going to go to my elements Tab and here you can see we have this hello VI right here and in this case we're using the V if right here if you were using the V show this will not work right here so you know let me just show you there so here you can see we have this hello view right here but if I click on this button and here you can see that hello view is totally gone from this UI on the other hand if I were using the V show right here so if I save there and refresh and now you know what let me just God damn it let me just click on that and here you can see we have this VI I like we have this hello view right here but now if I click on that nothing is happening right here but if I go to my console we are now getting just the component has been updated but we are not getting the result of uh component has been unmounted right here okay so also keep that in mind so I'm going to just change that to VF right here save my file and now let me just talk to you about the final life cycle hook right here which will be the on unmounted right here so when the component is successfully removed from the Dom so for that we're going to be just showing to the user like component uh component has been unmounted right here so if I save my file and now if I refresh that and here you can see first of all it's going to give us these two results and now if I click on that so first of all it's going to gives us that component is about to be unmounted and then it's going to gives us that component has been mounted right here okay so yeah that was all of the life cycle hooks which I wanted to show you right here and trust me there are a lot more and you're not going to be using them that often so that's why I did not include them in this list so yeah that was it about a life cycle hooks in VJs so now let's talk about a Watchers in VJs so what in the world are Watchers and why you should care about that so Watcher or Watchers allow us to reactively watch for a changes in the specific property or expression and perform some custom logic when the property or expression changes so Watchers are a part of a ugs reactivity system which enables the framework to automatically update the Dom when the underline data changes okay so that was just a actual definition of what a Watchers is and now how the syntax of a watcher is going to be looking like this is how the syntax of a watcher looks like so first of all we would have word Watchers method uh which we are going to be importing manually from the VJs and then we are going to be providing The Source then the Callback function and this one is optional but yeah if you care about this so you can read the documentation about that because I'm not going to be showing you this one so how that's going to look like like what in the word is a source so you can provide the ref you can provide the reactive object you can also specify the array or you can even specify the getter function I'm not going to go into that much craziness but I'm going to just show you how you're going to be working with a few of them then the next one we have is a cak function and so the C function is called when whenever some data changes right here so it's going to give us access to the new value it's going to also gives us access to the previous value or you can say the older value right here which I'm going to show you in action in a few seconds and then the final one this is totally optional but if you care about that you can go to your documentation and you can learn more about that because I'm not going to be showing you this one right here so it also supports the immediate deep flush and on track and on trigger right here something which you will not use that much but yeah these are some like awful topics which I'm not going to be explaining in this course okay so now I'm going to go ahead and write some code then you'll get to know what I'm talking about and now I'm going to just delete that stuff from this component and I'm going to be also deleting these stuff from this component as well and now let me just rename this component but before I do I'm going to have to remove this uh stuff from this fjs app component as well so first of all I'm going to just give this component a name of like a basic component would be fine or basic Watcher I guess I'm going to just stick with the basic component and now let me just import it right here inside uh this app right here this app component so now let me just import there I'm going to be importing this component from let's just go ahead and go to my components and go to the basic component yeah basic component and now let me just render that right here so now I'm going to save that and here I'm going to have to write something so that I can see something right here so something now let me just save my file and refresh that so it's going to gives us there something right here so I'm going to just close this one out and now let's just work with the basic component of Watchers so like how in the word we are going to be watching for the changes and all of that kind of stuff so the first thing which I want to do is that I want to provide some sort of a reactivity so that we can watch for some changes okay so let me just zoom in a bit and I'm going to be importing two things the first thing I'm going to be importing is a riff and the second one we are going to be importing is the Watcher or watch whatever you want to call that and we're going to be importing that from the VJs and now let me just write a cons Miss message it's going to be equals to the rep and I'm going to just say like hello comma View and now let's just also write an input text right here it's going to be equals to the ref of totally empty string right here okay so now I'm going to go ahead and remove this H1 and you know what I'm going to just write a div in this case and now let me just write H1 and now let me just render my message right here and I'm going to be also providing the input field we don't need that types and stuff but I'm going to also provide the view model right here and I'm going to just say that take um this input text right here so anything we write inside there will be also shown inside this message right here which I'm going to show you in a few seconds and now here I'm going to just say like placeholder and type something dot dot dot now let me just go back and here now if you sell our file and here you can see we have our hello view right here and now let me just right click on then go to my inspect element and go to my console we don't have nothing inside there and now let's just watch for a changes right here now let me just write a comment like watch for changes uh in input text and update message accordingly so how we are going to be using that we are going to be using this watch method which we are already importing right here and the first thing which we have to do is that we have to provide the source and as I said that you can provide the source as a ref you can provide the array you can provide the reactive object you can also P the gor function but in this case I'm going to be passing the source as this input text right here so now let me just P that and the next thing which I'm going to pass is this Arrow function you can create this function like separately you can create it right here and then you can pass it here if you want it to but in my case I'm going to be using the es6 and I'm going to just provide a new value first of all come on new value H new value there we go and then the old value right here so you guys can see everything a bit better and now inside there uh I'm going to just write a comment like you can perform some logic here when input input text uh changes there we go so which kind of logic we can perform I'm going to just write a message. value right here and I'm going to just say like you typed uh this content right here which is a new value right here so now let me just write that I like now let me just save my file and now let's just check it out and here you can see I have this input field if I start typing something like hell you know something right here so here you can see it's going to give us that you type something right here which is totally a okay but I'm also going to loog to the console my new value and also I'm going to loog to the console my old value as well okay so now if I save my file and now if I refresh that and I'm going to just write a okay so if I just write a so it is not giving us the older value I don't know why oh that's because we have empty string right here but if I just write something like uh I don't know if I just write apple right here send my file and refresh that so it's going to give us that Apple but if I just remove that so here you can can see the older value was Apple and I just removed that from this input field so that's why we are now getting this empty input field right here but if I type something like I don't know maybe D so here you can see this is the new value and the older value is now totally removed right here so this is how we going to be using the Watcher for watch for all of our changes and it's going to giv us the new value and also the older value as well so that was just a basic example now I'm going to just remove that and now let me just give you one more example which will be the reactive object. view right here in this case we're going to be passing the reactive object so I'm going to just go ahead and comment this line out and I'm going to also comment this line out as well so you know what I'm going to copy all of that content and now let me just place it right here and I'm going to just remove that and I just say like hello and now let me just remove that from here and first of all we're going to have to import that component so import the reactive object and now let me just copy that and render that right here inside or app so now if I save that and refresh that so here you can see we're now getting this hello right here which is totally expected right here so the first thing which I want to do is that I wanted to get a few things so I'm going to first of all get the reactive because in this case we're going to be working with the reactive object okay so the next thing which I want to do is that I also wanted to get the watch so that we can watch forward changes and we are going to be getting there from the VJs and now I'm going to just create my initial State word here so I'm going to just give a name of like St and here we going to be creating our reactive uh I mean like we are going to be providing a value for our reactive which will be a username and currently I'm going to be passing my Alex uh brother I'm going to faing this Alex person right here okay so now I'm going to just remove that oh you know let me just create that and I'm going to be just getting St down username right here and now let me just create a button and it's going to just say like change name right here so if I save that and here you can see we have this Alex right here and we also have this button so everything thing is totally working a okay but what I want to do is that I want to just change this name right here so so I'm going to just write a click event handler right here and it is going to just say state. change or you know not change name but username and it's going to be equals to Jordan right here so if I save that and refresh and now if I click on that so here you can see it's going to change that name to Jordan right here which is totally expected right here so now let's just use or watch method right here so what I want to do is that I'm going to just write a watch but here I'm going to just write a few comments right here I'm going to just go back and now let me just place this comment right here so here we can't provide a specific property of object we have to provide the entire object otherwise going to give us some error inside a console okay so yeah that was just the error which I want you to keep in mind when we are working with the reactive and also the Watchers okay so here if I just write like I don't know St uh do username right here and now here in this case I'm going to be just writing like a new value and also the old value and here inside there I'm going to just loog to the console like uh new value and here let me just pass my come on what the hell new value and also let me just duplicate there and provide my old value right here and here I'm going to also say like all value right here so if I save my file and now if I refresh that and here you can see we are going to be getting this error inside a console which is going to just say like uh invalid watch source andex a uh watch Source can only be a get effect function a ref a reactive object or array right here so you cannot provide the actual value of this usern name right here you're going to have to pass this entire State object so I'm going to just remove that from here and now if I save that and refresh that and here you can see everything will work totally the same and there is one more catch which you have to keep in mind the first catch was that you cannot provide dot something right right here like you have to provide the entire object the second catch is if you're using an object both the new and the old value will be the same okay so now if I sell my file and now if I click on this change name right here so here you can see the name is successfully changed but now let me just show you the console so here you can see we have the username which is set to Jordan and we also have the username which is also set to Jordan right here we have the order value which is set to Jordan and we also have the new value which which is also said to Jordan right here okay so yeah that's a bit of bug and to solve this bug we're going to be using something called the getter function okay so yeah I'm going to just remove that from here and to solve this issue let me just provide that comment for you so now to solve this issue if you want to get the old value and the new value separately so for that we'll have to pass the getter function and here we have to specify the actual object or State Property Okay so so not the object but the state property okay so how that's going to look like I'm going to just remove there and we are going to be only passing the getter function right here when we want the older value and also the newer value right here at once so for that we're going to be passing the gter function so how that's going to look like this is how it's going to look like so you can create your function like separately and you can past the reference off there but in my case I'm going to be just writing my arrow function right here because this is supremely easy and yeah I'm going to be just getting the state. username right here in this case so now if I save that and here you can see we are now passing this getter function right here and yeah it will totally give us the older value and it's going to also gives us the newer value right here so now if I refresh that and now if I click on the change names new value which you can see right here is Jordan but the older value was Alex right here so that's cool but now in some situation we would want to pass multiple sources so how in the what we are going to be doing there so now I'm going to just close there and now for that I'm going to be creating a separate component I'm going to give a name of like multi come on m t l e multiple multiple sources there we go view okay and I'm going to just copy there and now let me just go ahead and comment this line out and now let me just import that component right here from where from my components folder and now let me just pass that right here and I'm going to be just passing it right here so now let me just save that and we will not see anything because we don't have anything okay let me just copy some cont oh God damn it there's a lot of content so I'm going to have to write script setup and then we have to WR a template part come on template and now let's just close oh my God what the hell are you doing hosan so now let's just save there we will still see nothing uhuh what's up bro what's up to resolve the component multiple sources don't we have nothing inside there what's going on I'm not Hello this let's just save that refresh it you know I'm going to have to do that manually so let's just remove that and con multiple source and here you got now let's just save there and here you can see we are now getting our hello right here which is totally amazing so yeah that's cool but now let's just pass multiple sources right here so the first thing which I want to do is that I wanted to get my ref and also the watch as well from my VJs not W but VJs yes now let me just create an initial state of a username which will be set to rep and I'm going to be just passing a Jordan right here Jordan and then I'm going to be also creating for a counter as well so the counter will be set to zero okay so now let me just render all of that content right here so we can see something so now let me just pass this H1 right here and username now let's just duplicate there and past the counter and now underneath that we're going to be just providing the event listeners right here so we have a change name and we also have uh what do we call it increment counter okay so God damn it what the hell am I doing today what's wrong with my hands let me just write this click Handler right here and first of all I'm going to be passing the username it's going to be equals to not like that it's going to be equals to hosan we are just changing the username and now let's just increment or counter by one so now if I save that and now here we're going to be using the Watcher so now let me just past the Watcher or watch and now if you want to pass multiple data like multiple sources like if you want to pass the username and also the counter so for that you're going to have to first of all write array and then you have to pass your sources right here so now let me just write a username and also the count and also the counter as well let me just provide a comma and new value and also the old value as well and here we are going to be just logging to the console first of all the new value and then uh we are going to be passing uh you know let me just write a new value let's just duplicate that an old value and here we have to just P the old value right here so now let me just sa my file and now here you can see we have a Jordan right here and we also have the zero initial state of the counter and here I can also write counter or count other okay so yeah everything is working a okay let me just go back and now if I click on the change name so it's going to gives us the new value and also the old value right here so the new value we have is hosan as for the username and we have a zero how that's because we're not changing that you know let me just zoom in a bit uh let's just zoom in a bit like that and here you can see we have a new value of hen we are just only changing hus I mean like we are only changing the username and we are not changing this counter right here so the new value for the username is going to be hus and the new value for the counter or count will be set to zero so now for this one the older value was Jordan and also the count value was zero right here okay so let's suppose if I just click on the counter instead let me just click on the increment counter okay what's up ah we are providing a account I'm going to have to copy that and put a counter and now let's just refresh that and now let me just click on there and here you can see we are now successfully incrementing our counter right here which is totally a okay and that was it about Watchers in wjs so now let's talk about our template ref injs so this is not the ref which we've been using so far in our course for the reactivity this is something else so what in the world is a template refi and why you should care about that so a template refi is a way to create a reference to a child component element or a Dom element within a template and this allow you to access and manipulate the reference object directly in your component's logic and refs are commonly used to interact with child components trigger imperative action or excess property propes and methods of the Dom element okay so yeah that was just the actual definition of what a ref is so now let me just write some code and then you'll get to know what I'm talking about so I already have that component and now I'm going to delete almost every single thing from it okay so I'm going to just say like hello or something like that now let me just go ahead and remove almost all of that Imports and all of that kind of stuff and now I'm going to just REM oh you know I'm going to just remove both of these components and I'm going to rename this component to the basic ref. view right here okay so now let me just copy that and now let me just import it inside my app so I'm going to be importing it by using my basic rev and let me just go ahead and go to my components folder and now let me just execute that right in come on right in here so now let me just save that and here you can see we are now getting that hellow right here inside our browser right here okay so everything is working poly a okay but now I'm going to first of all go ahead and import a few things the first thing I'm going to be importing is the on mounted right here and the second thing I'm going to be importing this ref okay so I'm going to just write like cons my ref and it's going to be equals to the ref and we are going to be passing just empty string right here okay and the next thing which I want to do is that I'm going to just remove that H1 from here and I'm going to be creating a div and inside this div I'm going to be creating my input field right here and let me just pass my placeholder right here like place holder enter your name or lowercase name right here and the next thing which I'm going to do is that I'm going to be passing that ref and here we are going to be passing some sort of a value so this ref is known as a compound ref which is used for the reactivity and this ref is used for the reference right here okay and this is known as a template ref okay so now inside that what I'm going to do is that I'm going to be passing my refer here which we've already created right here okay so yeah that's that but but what I want to do is that I'm going to log to the console like conso log my riff and here we're going to be logging to the console this value right here so what do you think will be the result of that so if I save my file and now if I refresh that and here you can see we are not getting anything but if I just type something inside there like I don't know my own name or something like that and now if I save that and here you can see it's going to gives us the value right here it's not going to giv us the reference it's going to gives us the value right here on the other hand if I use this console log inside this unmounted right here so if I just write like unmounted and inside there if I just use like console oh you know let me just copy that from here and now let me just place that right here and now if I save that and refresh that so it's going to give us reference to that object right here here you can see that we are now providing that my ref and we are passing that ref as the template ref right here or you can say the initial reactivity stand to the template refi right here okay so here you can see if you are not using this on M counted right here so it's going to gives us that my reference. value is going to gives us that value which we currently store inside this reactivity state right here but if you use that inside the on mounted so it's going to gives us reference to this uh input field right here so now we can do anything we want to do with that so how can you go about doing that I'm going to just comment this line out and I'm going to be also removing this Huzan from here as well and I don't want to do nothing else but I'm going to just write like my ref which we have this ref right here okay I just want to select that I mean like that's already been selected right here but I want to do something with that input field right here so I'm not going to do anything crazy but I'm going to just get the value of there and we are going to be just using the focus method on there so focus and now if i s there and now if I just refresh and here you can see I did not click on this input field right here but it is already focused so now let me just click somewhere else and now if I refresh there so here you can see it's going to gives us that Focus automatically and why is there that's because of this line of code right here so we already have access for this input field right here by using this template refi right here and now we can do whatever we want to do with that so that's just the first logic I just did and now I can just change the value of the I can do whatever I want to do with that like my ref do value and we are going to be also using yet again value right here okay so this one will gives us that value which we have right here as this reference right here but now if you want to get the value inside this input field so for that we're going to have to write this dot value once again and now it's going to be equals to like something else or something like that and now if I sve my file and refresh that and here you can see by default it's going to be a focus and it's going to also gives us that something else right here so if I just refresh there come on so if I so if I just refresh there and here you can see it's going to gives us the focus there and it's going to also gives us that something else right here okay so yeah this is how we are going to be referencing to the HTML element this is how we are going to be what do we call it this is how we are going to be uh doing something which you want to do with that okay so that was the first example now I'm going to just close it right here now the next example I want to give you is that how in theorder we're going to be working with a ref by using a functions so what I want to do is that I want to create a separate uh component right here I'm going to give a name of like function ref. View and I'm going to go ahead and go to this component let me just copy then let me just place that right here I'm going to almost every single thing from this component right here and I'm going to just proide this H1 of something right here s my file and now I'm going to comment or you know what I'm going to just comment this line out and I'm going to import my function ref right here let's just copy it let me just comment this line out and place it right here Sam file and refresh that so here you can see it's going to giv us there something from this function like function ref component right here okay so yeah now the next thing which I want to do is that I want to remove that from here and I'm I'm going to just select this is uh initial value right here okay so what I want to do is I want to create a separate function and I want to reference that function for this H1 right here so how in the we're going to be doing that well you know let me just attach that function right away so to attach that function we're going to be either using this we uh bind right here or we can use the shorthand right here which is this column and we are going to be using the ref and here we have to pass some sort of a function so in my case I'm going to give a name of like my ref FK right here I guess that's going to be fine now let me just copy that and here we can do whatever we want to do with that so I'm going to just create that my ref function and here it's going to take some sort of element and now inside there we're going to be just log into the console like element. text content right here come on text content so now let me just save that and here you can see let me just refresh that right here and here you can see it's going to gives us that initial value right here why is that that's because we are using a template ri right here and we are ping that element right here and that element will gives us that text content right here so if I just remove that and save my f and refresh that so it's going to gives us access to this H1 right here okay so yeah now we can access that uh text content we can do whatever you want to do with that so you know what let me just write a comment right here like uh reading text content right here and next we are going to be just doing like uh element. text content and now let's just change that content to something else like text change come on text change or something like that now if I save my file and here you can see if I just refreshed there it's going to change this initial text to uh text change right here and it's going to also give us like this is a initial value inside a console and now I'm going to also just style there so I'm going to just use like element. style. color and it's going to be just equals to some sort of a red color or Crimson would be fine so now if I save there and now if I refresh there so here you can see it's going to also attach this crimson color right here so yeah this is how we are going to be passing a function as a reference element to our um what do we call it is a reference oh God damn it I kind of forgot the name of that uh as a template Rift there we go it's a template Rift to our element there we go kind of lost my mind today but anyways I'm just have I'm going to have to just record this video as soon as possible next we're going to be learning about how we are going to be using a ref with component so I'm going to be just writing like ref component. right here and inside that um you know what before I do that I'm going to also create yet another component which will be uh my component right here so my component. view so that we can use this my component inside this ref component right here so I'm going to go ahead and go to my component right here and I'm going to what the hell I have to do that manually and let's just write oh what was that let me just write a template once again and yeah now let's just start working with that but I'm going to have to write H1 of something I guess and then we are going to be just getting into this uh setup script right here and first of all we're going to have to get the ref right here from the VJs so now let me just save that and underneath there we are going to be creating our initial St so cost count is going to be equals to this R and we're going to be passing 10 value right here so then we're going to be creating two functions so cons increment it's going to be equals to this Arrow function and this going to allows us to just change the value of that counter to + one and then we have a decrement function so now let me just change the name of that to decrement and there you have it okay so I forgot to include these arrows now let me just do that and finally we just have to use these functions somewhere so first of all I'm going to be using that count so now let me just P my count and I'm going to be also creating a of plus and also for minus and now let me just attach my click event handlers and increment function and also the decrement function so like we only have this counter component right here but yeah now if you want to use a rep with this component so first of all I'm going to go back and here I'm going to just place these comments right here so when using a script setup which we are using right here so that component is private by default right here so a parent referencing to a child won't be able to access anything from that component so first we have to expose all of the properties and methods then we would be able to use them in our parent component so to expose them for that we're going to be using this defined expose right here to expose our data for our parent component uh to use so I'm going to just remove that from here and now let me just uh expose that data right here so I'm going to just zoom in a bit and here we are going to be exposing our data to be used inside our parent component so for that we're going to be using like Define come on Define uh not a but find expose right here and we are going to be passing the count we're going to be also passing the increment right here and also the decr so now if you s our file now we can successfully use all of these stuff inside our ref word here so to use that word here first of all we're going to have to write uh our script and setup and then we have to write come on what the hell then we have to write template and opening and closing tag and now what I want to do is that I'm going to be importing my component so now let me just import my component right here I'm going to copy that and now let me just place that component right here sell my file but I'm going to also create a reference right here inside this component as well and I'm going to be also getting the unmounted right here so not unmounted but unmounted so now let me just get on mounted and I'm going to be also getting the refi from there and now let me just create my reference and it's going to be equals to the ref object and here we're going to be passing the null value and when this component mounts so then we wanted to get access to our component right here so now let me just use like my ref and then do value which I just show you a few seconds ago so now let me just copy that and here we are going to be passing that as a template refi right here so now let me just use my ref I mean like ref and here we're going to be passing my ref right here so now if I save this file and I'm pretty much sure that I did not import this component right here yep I didn't so now let me just comment this line out and run and import come on let me just import uh ref component right here I'm going to copy that and now let me just comment this line out and place that right here so now let me just refresh that and here you can see it's going to give us that count and increment and decrement buttons right here but I'm going to right click on that and go to my inspect area I don't know why I just closed and now let me just refresh that right here and then I'm going to just expand there then I'm going to go to the Target then I'm going to go to the Target one more time so here you can can see we have this count method I mean like that count right here and we also have the increment I mean like I don't what the hell am I saying we have a decrement uh what do we call decrement method right here and we also have a increment method right here so yeah this is how we are going to be accessing our component right here but now if I click on that we can successfully increment that and decrement that right here so everything is working okay and this is how we are going to be using the template R in VJs so now let's talk about ASN component in VJs so Asing component is a feature that allow you to load a component asynchronously so meaning the component is loaded in render only when it's needed this is particularly useful for optimizing the initial loading time of your application especially when dealing with large and complex component that might not be necessary on the first page load okay so this is just actual definition of asynchronous component and now let's just talk about how we are going to be making our component asynchronous so we are going to be making a component asynchronous by using the Define asyn component function so Define async component is used to create asynchronous component and Asing component are loaded and resolve asynchronously which can be helpful for improving the initial loading performance of your application by deferring the loading of a certain component until they are actually needed okay so how the snx going to look like this is how the synx going to look like so first of all we're going to be just uh calling this function it's going to take a call back function so we are going to be passing a callback function and here we're going to be importing our actual component so yeah I know that sounds a bit scary and confusing but trust me it's not uh let me just go ahead and write some code then you'll get to know what I'm talking about so I'm going to go ahead and remove all of these components from here and I'm going to also go ahead and remove almost every single thing from here and what I'm going to do is that I'm going to just create two components the first one I'm going to be creating for render friends which allows us to rer a lot of friends not a lot but just a few friends right here and then I'm going to just create another uh component which will be a toggle uh friends yeah f r i n ds. VI okay so the first thing which I want to do is that I want to work with this render friends and then we are going to be jumping into this toggle friends so now let me just use my script and setup and all of that kind of boiler PL and now what I want to do is that I'm going to go ahead and import my ref from the VJs and now let me just create a friends and it's going to be equals to the ref and here we're going to be passing a lot of friends like hosan Jordan and also Alex come on Alex and also Maroon Five as well okay so now let me just save that and here we are going to be just uh iterating over to all of their friends so I'm going to be using H3 in this case and V4 and now let's just it right over to all of that friend so friend and index and we're going to be itating over through there by using that friends and we're going to be passing the key of index and now here we just have to print that print right here now let's just go back and save that and now we successfully uh created our friends and now we are just iterating over through that friends and we are just rendering that friends to the browser now inside this component you know I'm going to copy them and place it right here and now inside this component I'm going to do a bit of magic I'm not going to do a magic but yeah I'm going to do something right here but first of all I'm going to have to import uh my render friend right here not a view but just a render friends and now let me just execute there right here sa my file I'm going to go ahead and uh grab this toggle print right here from that component and now let me just import that right here so toggle friend and we don't need the view so let's just toggle the friends okay so let's just write the semi file and here you can see we are now getting all of that Friends word here which is totally awesome so now inside this toggle friends component what do you want to do the first thing which I want to do is that I want to create some initial state right here so import the ri and from the VJs and now let's just save there and I'm going to be just creating a show friend come on let's show Friends uh and it's going to be equals to ref and false right here initially and the next thing which I want to do is that I want to create a toggle function right here so that we can see our friends and unse our friends so I'm going to cut that and I'm going to just write a div right here and we're going to be using the VF and if the show friend is true then show us these prints right here otherwise don't show us nothing okay so now let me just save there and underneath that we are going to be just creating con tole uh friends right here e GLE e f r n DS f r i e n DS yep the spelling is correct and we are going to be just creating this function I'm going to just say like show friends. value is equal to not show friends. value right here so now if I sell my file and now we have to use this function right here so I'm going to be just creating a button right here and I'm going to just say like uh toggle friend list and here let's just click on this button and toggle friend yeah toggle friends will be fine now let me just go back and this is the entire code now let me just save that and now I'm going to right click on that go to the inspect element and in this case I'm going to go to the network area right here okay so now if I just refresh that and here let me just go back and here you can see we are still getting this render friends right here this is only one component but in some situation we would not want that okay like this component will have a lot of content like in this case we just only have these few friends right here but in some situation we will have like a complex and large amount of data inside this component and we don't want the component in the initial render but in some situation if the user does want that they can click on the button and then their data will be show to the user right here and then we will be able to see that render friends right here but here you can see that's a problem like initially we are not seeing anything but we are still getting this render friends component right here and we don't want that okay so to prevent that from happening so we are going to be using the asynchronous function not asynchronous function but asynchronous component so how in that what we're going to be doing there I'm going to go ahead and go to my toggle print component and we are going to be using the defined sing component right here okay so I'm going to have to first of all grab it right here I'm going to be using comma and Define SN component now let me just copy that and let me just zoom in a bit right here and here what I want to do is that I'm going to comment this line out and I'm going to just write like cost and render PRS right here and it's going to be equals to this Define Asing component and here we're going to be passing a callback function right here and I'm going to just select import and here we are going to be just going to um yeah here you can see we have our render friends right here and now if I save that and we just comment this line out but now we are reusing that right here and we are assigning the value of that as synchronous component right here and then we are just rendering that asynchronous component in this case not actual component but the asynchronous component right here so now if I save that and now if I refresh that and here you can see Von have any render component right here ins I mean like yeah any render friends component inside this list right here okay so you cannot see that but if I click on this button right here so what are we getting we are now getting this render friends view right here on the other hand if I click on this button so it's going to hide it from the UI but we already sent this request right here and that request will be totally a okay and yeah we can only just make there once not all the time so now if I just refreshed that once again so here you can see we no longer have that friends or render friend component right here but if you want that so we can just click on this button and here you can see we have the render friends right here okay so yeah this is how we going to be working with the Define ASN component and this is how we are going to be importing our as synchronous component and this is how we are going to be using the injs so now let's talk about a composable in VJs so a composable is a function or a set of function that in culate piece of logic and can be composed together to build a functionality of a view component so composable are designed to be reusable and sharable making it easier to manage complex logic and behavior in The View application so that was just a quick introduction of what a composable is so now how in the world we're going to be creating a composable well this is a convention right here so we are going to be just creating a regular function but for the name first of all we are going to be writing this use and then the function name right here so then we can say like this function is a composable function okay so now let me just write some code and then you'll get to know what I'm talking about so here you can see I have this counter component right here and I'm just rendering that inside my app component right here so nothing special going on here I'm going to just zoom in a bit and now let's just create our counter component so I'm going to just grab my rep from my VJs and I'm going to just say like let God damn it what the is that let count oh my God uh let counter or count will be now equals to the ref of zero and here we're going to be just uh rendering our counter so I'm going to just say count and here let me just pass my count right here let me create two buttons the increment button or you know what plus and minus right here and let me just create the two buttons right here let me just attach event listener on them so I'm going to just pass the increment and also the decrement as well now let me just go back and here what I want to do is that I'm going to just s that uh what do we call it what the hell I'm going to just create the increment and it's going to be equal to this function right here so we have a count. value Plus+ and we have a minus Min -4 the decrement right here decrement there we go so now if I save my file and here you can see everything is working totally as expected so if I click on that and here you can see that's working totally okay but here is the question but you know what first of all let me just create yet another component and I'm going to just say like uh yet another component c m oh my God c n. view okay so now let me just copy that name and here what I want to do is that I'm going to uh you know I'm going to also copy all of that logic let me just uh remove that from here and also remove that I'm going to also remove this one as well and here I'm going to just say like H1 of hello word right here so if I sell that I'm going to also grab that component right here inside my app so let me just grab my yet another component let me just copy that and here let me just paste that component right here and I know the spelling is incorrect but bear with me for a second so if I refresh this here you can see we are now getting this hello word right here which is totally expected by the way so now here is a question right here and now let me just remove also that and I'm going to make this comment a bit better but bear with me for a second right here so yeah here is the question so what if I want to reuse this logic in another component like I have this increment uh function word here I also have this decrement function word here and we are also providing our initial count word here and it is working totally a okay so what if I want to reuse the same logic in another component so your answer will be well just call the component in another place yeah so now let me just call that component right here so I'm going to just zoom in a bit right here and I'm going to go ahead and just write a script and setup let me just import my component of counter component so counter component right here I'm going to copy that and now I'm going to just oh you know uh I'm going to provide a level of yet another component and here let me just call that component right here and now if I sell that and here you can see it's going to gives us that entire component with also this UI right here but we don't want that we only want this component to have the logic right here like this logic which we currently have right here uh we only want this increment and also this decrement we don't want this U right here we don't want these buttons we don't want this counter I mean like this initial count right here and we don't want that we only want this functionality this logic right here so your first answer will be to just call your component in another place and to call the component in another place is going to gives us all the UI and the template in that another component as well which you can see right here and we don't want that okay so what's the solution for that now let me just give you the solution but before I give you I'm going to have to remove that from here and and here is the solution so in this case I'm going to be placing my uh what do you call it my comment right here so here is the solution so the solution is to extract all the logic from this component and create a separate composable for that so creating a separate composable will allows us to reuse that logic in overall application so we can reuse that again and again and make our code totally clean and organized so I'm going to just remove that from here and now let me just create my first uh what do you call it my first composable word here so the convention is if you want to work with a composable so first of all you're going to have to create the outside from this components folder so I'm going to be just going into this SRC and I'm going to just create yet another folder right here and you can give it any name you want but in my case I'm going to just give a name of like shared you can also give a name of like uh composes if you wanted to but I'm going to just give a name of shared because I have seen a lot of projects um using a composable in the shared folder and now let me just provide my first comp composable word here so we are working with a counter so we are going to be just writing like counter. view but first of all we're going to have to write the use word here this use is a convention not important but convention so it's going to tell other Engineers that this is a composable function word here and not view we are not talking about a view this is going to be the Javascript file K not view so if I hit enter so now we can totally create our first composable right here so the first thing which I want to do is that I'm going to be importing my r from my VJs so now let me just import that right here and now let's just create our counter composable see m s abl e and now let's just do that so we are not going to be doing anything special but we are going to be just creating a regular function and I'm going to give a name of like use counter right here and this is our first composable right here so I'm going to also provide the initial value so initial uh value for that is going to be equals to zero okay so for this one we are providing the initial value of zero right here and we can also put the initial value right here as well okay so now let me just pass the initial value to my counter or the ref whatever you want to call that so here I'm going to be creating my count and here we going to be passing that initial value which we are getting right here inside this perimeter right here okay so now I'm going to just create an increment function as well oh you know what I don't have to even create there I can totally copy and place it right here so I'm going to copy there now let me just paste it right here here and it will totally work a okay and finally we have to return all of the things which we want other components to be used so I'm going to just return first of all the count and then the increment function and also the decrement function as well so now if I save that and here you can see we are now getting this warning like um your composable is already created or declared but you are not reusing that somewhere okay so first of all we're going to be exporting that so that we can have access to this function in another files okay so that's why we are now exporting there right here okay so yeah that was our first composable now let me just close that right here and I'm going to go ahead and go to my component and now we no longer have ride all of that logic right here so I'm going to just delete that entirely and now we are going to be just grabbing our use counter okay so use count come on use counter from where from the shared folder let me just go back I don't know what's going on so let's just remove that from here and for my use counter uh from where from my shared folder let's just go back two times and here you can see we have a shared folder and we have this use counter right here okay so the next thing which we have to do is that we have to create an instance of that counter component I mean like that counter uh composable right here so to create an instance of that we are going to be just writing like cons counter and then use counter right here and execute that okay so this will allows us to use that counter inside our application right here so what I want to do is that instead of writing this count I'm going to just remove that and I'm going to just use counter. count right here so first of all we are going to be grabbing this instance right here and inside this instance we have this count because we are now exporting this count right here so then we would be successfully able to get there right here so now let me just comment there and now let me just save there and here you can see we are now getting the initial value of zero right here which is totally working okay so now the next thing which I want to do is that I'm going to remove this increment function and also this decrement function and we are going to be first of all referencing or counter which is this counter right here and inside this counter we are now exporting this increment and also this decrement so here we can totally access that so I'm going to be using Dot and then increment and here we can also use counter. decrement right here okay so there you have it so now let me just Sam file and refresh that and here you can see it's going to gives us uh that plus and it's going to also gives us that minus right here okay so which is totally a okay and I'm going to go ahead and remove this another component from here because that was only for the example so what I want to do is that I'm going to remove it from here and from here as well and here you can see we have our countered so I can increment there and I can decrement there and everything is working totally okay and now here you can see our code is now poorly organized so yeah we can create composable for different kind of things like uh I don't know for the API request and all of that kind of stuff which I'm going to be also showing you throughout this course but yeah that was just a basic example of composable so now let's talk about a custom directives in VJs so now we are going to be building our own VF V4 and all of that so we provides a set of built-in directives such as VF V4 V model and we also saw the V on and a lot of them so custom directive allow you to Define your own behavior that can be applied to the element in the template so that's just the actual definition of what custom directives is but how to create one so a custom directive is defined as the object containing life cycle hooks similar to the component hooks like mounted and unmounted which we already saw so how the syntax going to look like this is how the syntax is going to be looking like first of all we're going to be creating an object right here and it is convenient to provide V at the beginning because we are going to be using the V and something so here you can see I'm now creating my own custom direcory right here and I'm providing we the beginning and then my directive name right here and inside there I'm providing my life cycle hook right here like mounted like mounted and we can also work with the unmounted and uh unupdated and all of that kind of stuff so it's going to take two perimeter the element and also the binding something which I'm going to be showing you in a few seconds so that element will giv this which I'm going to show you in a few seconds but you know what first of all let me just write some code and then you will get to know what I'm talking about so now let me just remove this coding from here and also from here as well well now let me just save that and I'm going to change the name of that to my my component. VI would be fine I'm going to copy that and now let me just remove the shared folder we don't need that I'm going to go to my app and here let me just place it right here and I'm going to be just writing uh H1 off um yeah my comp will be fine so here you can see we are now getting my component so yeah that's cool but now first of all let's just talk about how in the world we are going to be creating our first custom directives so to create that we can just create our own regular uh JavaScript object right here so I'm going to just write like V and then format div and it's going to be equals to this object right here and inside this object we're going to be using all of our life cycle hooks so I'm going to just write like in this case mounted and here it's going to take two parameters like element and also the binding and here we're going to be just writing like conall log first of all so let me just write this element but I'm going to have to go back so now we successfully create our custom directive but now we have to use this custom directive somewhere inside our uh template area right here so now to use that first of all I'm going to just remove this H1 from here and I'm going to just create a div word here and now I'm going to just provide my custom directive so to use that first of all we're going to be just writing the V then Dash and here we are going to be providing our custom directive right here so if I click on that so it's going to give us that custom directive so first of all we have a v then we have a format then we have a div word here so in this case we are not working with a binding so I'm going to have to remove that from here so now if I just write like I don't know using simple custom uh C directive or something like that now let me just go back and now if I sve my file and here you can see it's going to gives us nothing but if I right click on there and go to the inspect area so it's going to gives us that element reference right here so if I just refresh that and here you can see it's going to gives us the reference to that element right here so what's going on so here you can see it is taking that element like that perimeter of element which will gives us xess or reference to the element where this directive is used so we are now using this directive on this Dev so that's why we are now getting the element or the reference to that element right here so this element or this e will gives us reference to that element where that custom directive was used right here okay so we are using it right here so that's why we are now getting the um come on so that's why we are now getting this div word here Al righty so that was the first one so now what I can do is that I can do a lot of things like I can just write like element. style. font size uh I can increase the font size to four RM and I can also use like e. style. font I don't know font style to italic or something like that I can also use like e. style. color and it's going to be equals to T or something like that and now if I saell that and here you can see it's going to gives us all of that styling right here and here you can also notice that we are now changing the font size the font style and also the color of this element right here and we are providing The Styling in line because we are currently using our own custom directory right here okay so here you can see we are now getting all of that styling right here so which is totally cool so that's cool but in some situation we already saw that we can also pass argument right here so how that we're going to be doing that well to do that we're going to be just using these binding right here so now let me just console log this binding and what it will gives us so now let me just log to the console this binding right here and I'm going to also write this equal to sign and here we're going to be placing that arguments right here so I'm going to just say like I don't know maybe four would be fine now if I save that and now if I refresh that so here you can see it's going to gives us that binder so here you can see we have a dir we have a lot of values but here you can also see we have that value which we are passing to this div right here but I can also write like I don't know maybe 100 if if I wanted to see if I save there and refresh that and check it out so here you can see the value is now 100 right here so this is how we are going to be attaching uh arguments to our custom directory right here so what I can do with that binder you know let me just pass this forward here and I'm going to just loog to the console that binding. value and save my file and refresh that so it's going to give us that value of for right here which is totally uh acceptable or expectable whatever so yeah now I'm going just remove this element and also that binder from here as well and what I want to do is that I don't want to do all of that stuff right here that was just to give you the example and now I'm going to just say like uh element. style. font come on font size and it's going to be now equals to the binding. value and here we can attach new value like pixels right here so it's going to increase that value by whichever value we are providing right here so now let me just refresh that and here you can see it's kind of gives us that text right right here that much small because we are currently providing a four pixels right here but now here if I just write like 100 right here and sell that and let me just go back and now if I refresh that and here you can see it's going to gives us 100 pixel styling right here which you can see so yeah this is how we can play around with that we can do a lot of stuff with that but I'm going to just give you a few examples right here so I can also say like element. style or font uh font size and we can also just increase the with rims but we can also achieve them by using these template literal so I'm going to just write like binding. value and rim right here so now let me just comment this line out and here I'm going to just P five right here not that much so and refresh there so we are not even seeing okay there we go so here you can see we have or five rim of content right here so yeah which is totally okay but now I guess I'm going to just provide some sort of a border so you know I'm going to just provide some sort of a border as well like uh styling and border and it's going to be now equals to this template leral and we're going to be passing binding. value and here we're going to be passing solid and that much I mean like that color and this amount of border right here so now if I save that and here you can see it's going to add that border right here that much so I'm going to go back to 100 and I'm going to just increase that to I don't know maybe 10 would be fine so if I save there and refresh there so here you can see it's going to gives us that content but it is not increasing the size of the Border I don't know why me just click on that and Border 10 pixel oh are we for yeah we are forwarding pixels right here but if you are foring rims semi file and here you can see it's going to give us that massive border right here okay so yeah this is how we can do crazier with these custom directores right here so yeah that's a lot of things but what I want to do is that I want to give you one more example and I guess that would be it okay I don't want to spend a lot of time on the custom directives in some situation we also pass arguments right here like uh let me just remove the word here and we also provide some sort of a argument like I don't know something right here so if I just write something and if I just remove that from here uh you know let me just remove all of that stuff from here and I'm going to just log to the console like binding. AR so if I save this so here you can see where now providing the arguments right here now let me just refresh that I'm going to right click on that and go to my inspect area go to my console and here you can see it's going to gives us that something right here but if I just write hosan and if I save my file and refresh there and it's going to gives us that hen right here which is totally a okay but now I want to do something with that so here I'm going to be providing a logic which will be just changing the color so I'm going to just use like a switch in cases and you are more than welcome to use FNL statement if you wanted to so I'm going to just write a switch and here we are going to be passing like binding. AR okay so for the binding. AR we are going to be putting the first case of orange so if the case is orange so then just change the color of the element to that orange color right here so orange and then break it out so you know I'm going to just duplicate that a few times let's just remove there and we have a case of orange we have a pink purple teal so now I'm going to just change there to and also change this color to Pink as well and I'm going to just change both of them to purple and also for the final one uh which will be the color of teal right here and finally we're going to be just writing a default St and the default St will be element. style do come on style. color and it's going to be equals to Black so now let me just save my file and here you can see let me just go back we are now proide here you can see we are now providing a few cases right here like if somebody provide the argument of orange then change the color of that specific element to Orange if somebody provide the pink color so then change there to pink color purple and teal and if the user did not specify anything so then just provide a default color of black so in this case we are going to be just first of all providing the orange color so I'm going to just say like orange and now if I save my file and refresh that and here you can see the color is now orange I'm going to duplicate that a few times for the pink uh and also what was that purple and teal okay so we have a purple and also we have a teal right here so if I sve that and refresh and here you can see we have all of that colors right here and you can go ahead and provide more colors if you wanted to and I guess that's it about the custom directives but finally let me just show you the short hand providing this custom director so I'm going to just comment this line out and here I'm going to be using that short hand right here so I'm going to just use like cons V forment div right here div and it's going to be now equals to the element and we can just totally pass the regular function right here so we can just use like element. style. font size and here we we going to be just increasing there to four r or you know five R would be fine and now we can just use like uh I don't know let's just remove all of that stuff from here let me just create my d one more time and I'm going to be using my V format div totally exactly the same and I I don't have to write anything else but I'm going to just write my own name Huzan web dev sa my file and here you can see it's going to give us that font family of five Rim I me like font size of five R so yeah that was there about a custom directives in VJs so now let's talk about a dynamic components in VJs so what in the word are Dynamic components and why you should care about that so a dynamic component refer to the ability to dynamically switch between different components based on a certain condition or a user interaction so this can be achieved using a component element and the is attributes so yeah that was just a theory of what a dynamic components is and now let me just write some code and then you'll get to know what I'm talking about out so what I'm going to do is that I'm going to remove that and I'm going to also even delete this component from here let me just zoom in a bit so that I can show you every single thing a bit clear and I'm going to be creating a lot of component right here so we have a component one uh one. view we have a component to do View and we have our component 3 view and we also have our component uh I guess you know the three would be fine but finally we're going to be creating a main component so we can render all of that component so vew Vu e there we go so yeah that's cool but I'm going to go ahead and remove all of them and now let me just go ahead and I'm going to just write something like script first of all with the setup and then I'm going to go ahead and write my template right here and close that and inside there I'm going to just write like main component component baby so now let me just save that there and I'm going to go ahead and go to my app and let's just rename that to my main compon come on come on main component there we go so now if I sell that and here you can see we're now getting main component right here so I'm going to go ahead and copy this entire thing from here I'm going to open my component one let me just place it right here and I'm going to just give a name of like component one sale there I'm going to copy that and then I'm going to go ahead and go to the component two and now let me just place it right here and change that to two then I'm going to go ahead and go to the component three and I'm going to just change that to component three right here now I'm going to close all of them and reopen my component one and I'm going to just write like uh let's just go back I'm going to just write like what is HTML question mark uh HTML and now I'm going to just write a paragraph and here let me just go ahead and ask from a Google like what is h oh my God what is HTML and now let me just go ahead and copy this text from here and now let's just place it right here and it's going to give us a definition of what a not a component but what HTML is now I'm going to go to the component two and I'm going to just write like what is CSS question mark let's just provide that here let me just go ahead and just write like uh what is CSS I'm going to copy this text right here copy that and now let me just place it right here and this is what a CSS is and then I'm going to finally go ahead and go to the component three and what is what is Javascript come on JavaScript question mark and then I'm going to go ahead and write a paragraph and not lure him but what is what is JS would be fine now I'm going to copy that and now let me just place it right here save my file and there we go so we just just only needed there and now we are going to be dynamically rendering our component inside our main component right here so how in the we are going to be doing that we're going to be doing that by using the component element with the is attribute so I'm going to just grab my ref from the vij and then I'm going to be grabbing my component one and then let's just duplicate that a few times so we have a component uh two right here and then we have a component ah God now component uh three right here and now we are successfully grabbing all of the components so now here let me just create my current tab so current tab it's going to be equals to the ref and here we're going to be providing the initial value of component one right here because initially we just only want to render the component one and not the other ones okay so yeah now let me just create a tabs object so I'm going to just write like a tabs object and it's going to be holding all of that components so the property will be component one and we can also provide the value of component one as well but we are going to be using the es6 so we don't have to do that and then I'm going to be using the component come on component three right here so now let me just save that and here inside a main component now let me just remove that from here oh you know what let me just even remove this entire thing and I'm going to be creating three buttons so what is HTML I guess I don't yeah I'm going to just duplicate that a few times and what is a CSS and what is a JS okay and here what we can do is that we can just write or click event handler right here so I'm going to just write a click event handler and so I'm going to just write a current Tab and it's going to be equals to uh this component one and then I'm going to copy that logic from here then we have a component two and then I'm going to just also place this component three right here okay so that's cool but but here we are going to be using our dyamic component component like we are going to be adding our component dynamically so for there we're going to be using this component element so I'm going to just close the word here and here we're going to be using the is attribute and here we just have to pass our tabs and then we have to pass not equal to and then we have to pass our index so current tab right here so now let me just save there so if I just refresh then and here you can see it's going to gives us that what is HTML initially but now if I click on what is a CSS so then it's going to give us the CSS uh title and also the CSS content as well and now if I click on the JavaScript so it's going to give us the title of JavaScript and also the content of JavaScript right here so yeah this is how we are going to be rendering Dynamic components so I don't want to waste your time but now I want to show you that how in the world you're going to be fetching the data in VJs and this is totally the same like JavaScript so if you already know how to fetch a data in JavaScript so you already know how to do that there in VJs so if you want to skip this section and jump straight into the JavaScript you totally can or if you want to watch it you totally can watch this section baby so first of all we're going to be getting data come on data with fetch. view right here okay so you know I'm going to have to copy this name now let me just go ahead and uh place it right here sa my file and let's just check it out so do we have any errors or what not something sem my file and there you have it all righty so first of all we're going to be fetching our data by using the fetch okay so I'm going to grab my uh let me just grab my refi the hell import the refi from the VES and then I'm going to be creating my data St so data is not going to be null initially and then we're going to be fetching that data so I'm going to be just creating a page data and it's going to be now equals to uh first of all you know what you're going to be making or you know make uh get request uh using fetch okay so first of all we're going to be making a get request using a fetch builtin API and we are going to be making a request to this Json placeholder or come on Json placeholder or something like that and now here you can see we have this Json placeholder typei code.com I'm going to go to the bottom and now here I'm going to just send my request to this uh URL right here I'm going to copy that and place it right here and now it's going to give us a promise so we have to just use it then and here we're going to be getting the uh response from there and now in this case we're going to be check if the response status is okay which means like if the response is between 200 uh through 299 so if the response is on that range uh then it is going to be the okay response response come on r n there we go so what I want to do is that what if you don't have any response dot uh okay right here if our response is not okay so what do you want to do in that case we are going to be just throwing a new error and we are going to be just saying like HTTP error and yeah I guess that before you know I'm going to just write a status code of um this error message right here I don't know I can't type today what the hell is wrong with my keyboard so now let me just write response do status word here and here r p o NS e r p o NS e yeah now it's cool yeah and now underneath that if everything is a okay so pass the Json response okay so now let's just return and response don't J come on response uh don't Json right here and here we are passing uh you know let me just copy there let me just place it right here here and also place it right here and now this is looking a okay so now it's going to gives us that data in the Json format so we also have to change that to the actual data so I'm going to just write like response data and here we're going to be passing our Arrow function once again and data. value which we are already de clearing right here so we have a data which is currently set to know and we're going to be just changing this data. value to response data this response data now let me just copy and place there and yep that's what we have to do and find we also have to catch for some errors if we already have some so now let me just P this error right here and inside there I'm going to be just logging to the console or you know I'm going to be using con or error in this case if you got some sort of error so I'm going to just say like error fetching uh fch fishing data and here we just have to pass or error right here so error there we go so yeah now let me just save that and this is how we are going to be fishing our data and now we have to call this function somewhere so I'm going to go to the UI or the template whatever you want to call that I'm going to creating a div and then I'm going to just create my H1 right here and I'm going to just say like uh in this case we are just using like a using fetch this is just a label this is not a v syntax by the way this is just a label right here I'm writing so now underneath that we're going to be creating a button and I'm going to be just attaching The Click event handler on there and when somebody clicks on this button so we are going to be calling this fetch data function right here now let me just call and then we're going to be just putting the level of fetch data right here and underneath that we're going to be creating yet another div and here we're going to be just passing that data so data from API will come up here so I'm going to just use the HTML pre- tag and here we're going to be just passing that data right here so now if I save that now let me just go ahead and refresh that and now if I click on the fetch data and it's going to take a bit of time if you don't have any errors already yep I I guess we already have some sort of error so let's just refresh that and here I found the bug I was using the uppercase R and I'm going to have to change that to lower case r right here so now if I save there now if I refresh there and now if I click on the PCH data and here you can see it's going to gives us that data right here okay so let me just go ahead and go to you know let me just copy that and place it right here and I'm going to go ahead and go to my you know what I'm just wasting your time I'm sorry about that uh post so it's going to giv us 100 post so I'm going to copy that and now let me just place that right in here so if I sa there and now let me just go to my app and now let me click on that so it's going to gives us 100 post right here which is totally amazing so yeah this is how we going to be fetching a data in VJs by using the what do we call it by using the fetch method or the fetch API so now let me just create yet another component and in this case we're going to be using something called the xos so if you guys don't already know what xos is you don't have to worry about that so getting a data uh with xs. view right here so to use xus first of all we have to stop our server and we have to install xus inside our project so I'm going to be using like npmi and xuse and now if I hit enter so it's going to install this xuse in my machine or in this specific project rather and now let me just restart my server once again so it's going to restart my server and yeah I'm going to be just going and writing the script and also the setup and also the template and there you have it so I'm going to just write like H1 and here in this case I'm going to be just providing a label for myself like using xus Library okay so it is giving me that highlight because I'm using uh the extension which is a uh quote spell checker extension I'm using so now let me just import first of all my ref from my VJs and then I'm going to be importing xuse from this xuse which we just installed and then I'm going to be creating my initial State for the data and it's going to be set to n by default and here we're going to be now fetching a data right here so I'm going to just use like fetch data it's going to be now equals to the asynchronous function and inside there we are going to be just using our try and catch block for getting some sort of error if we already have one so now let me just loog to the console. cons. error and I'm going to just say like error pitching come on PCH uh data and here you know I can also use a template lals whatever you want to call that I can't even pronounce that word template lals yeah that was the first time I pronounce it right I guess and now we have to make a get request to or not two but using X yes okay so I'm going to just use that con response and it's going to be now equals to A and XCS dog XCS doget and here we're going to just sending a request to this API which I already show you so I'm going to just copy there and now let me just place that right here inside a quotes and here what I want to do underneath that what I want to do is that I want to handle the sucessful uh response right here R NSE and then I'm going to be using data. value and it's going to be now equals to the response not not value but data right here okay so now I'm going to save this file and this how we are going to be fetching our data by using xuse and now we have to call this function somewhere right here inside of UI so we can get our data right here so I'm going to be creating a button one more time and I'm going to give a name of like fetch data and here I'm going to just pass a click event handler right here and we are going to be calling our fetch uh data function right here underneath that we're going to be creating a div and let's just WR H2 of data from API right here okay so I'm I'm going to just write my pre- tag one more time and now let me just render my data save my file and refresh that and now if I click on this button so using a fetch oh I forgot to call this component right here so I'm going to just comment this line out and now I'm going to import my getting data with xus I'm going to copy that and now let's just comment this line out and place that right here semi file and refresh there and now we are using xuse in this case so now if I click on this fetching data so it's going to also gives us all of that data right here which is totally amazing so yeah that was it about how we are going to be fetching a data in wjs by using exos and get uh API all right guys so welcome to the exciting part of this course so now we are going to be jumping into the projects but before we get into the project first of all I want to say that I'm not going to be writing any CSS I'm going to be just copying and pting the CSS for all of these projects because I don't want to waste your time and also mine and you you can find all of the coding in my gab repository so first of all we going to be creating a to do list project right here so I'm going to copy that then I'm going to go ahead and go to my app and now let me just use it right here s my file and refresh that and here you can see everything is working the way we exp to work so first of all we are going to be creating a to-do list project so now let me just zoom in a bit so the first thing we would do is that we would need some sort of a ref for the reactivity and then we're going to be creating our two initial set for the new tag and it's going to be equals to the ref and here we are going to be passing the empty string and then we are going to be also creating a task right here and it's going to be equals to the ref and here we're going to be just passing this empty array right here okay so yeah that's cool but now let's create our first method or function whatever you want to call that so it's going to be now equals to the add task so we'll be able to add some sort of a task so now we are going to be first of all checking if you already have a task or if the task is empty so don't gives us nothing but if the task is not empty so if you have like task. value. RM and if it's not equal to empty string so what you want to do we just want to push a task to our list so I'm going to just use like uh task. value. push and we are going to be pushing this new test. value right here and underneath that we're going to be also just uh making or what do we call it our task value and it's going to be now equal to empty string because we want our input field to be totally empty so this is how we are going to be adding a task so now let's talk about how we are going to be removing a task so I'm going to just write like a rem remove task right here is going to be equals to this Arrow function so now let me just pass this Arrow function right here if I can pass it to so now let me just write my Index right here it's going to take a index and here we are going to be getting our task. value and we are going to be using the splice method on there and here we're going to be first of all providing the index N1 okay so this we are going to be creating our task and this is how we are going to be removing our task and what I want to do is that I'm going to just remove this H1 from here and I'm going to be just creating a div but I want you to give it exactly the same classes like mine because I'm going to be copying and pasting the CSS so you have to give these classes right here so we have a to-do app and then inside this to-do app we also have a test- input right here and inside there we are going to be creating our input field like the actual input field in which we are going to be writing every sing thing and then I'm going to just remove this type right here we don't need that let me just add the V model and it's going to take that new task which we've created right here okay that empty string and then we're going to be adding the keyboard event which will be the key up and when somebody hit enter let me just write enter so then we're going to be just adding that task so add task function which we just created right here okay so yeah that's that but now the next thing which I want to do is that I want to show some sort of a placeholder for the user so I'm going to just say like add new to do would be fine I guess that would be fine you can also write a task if you wanted to and now underneath that we're going to be creating a button which will just say add to do and here we are going to be just changing that to test rather I'm going to be also attaching The Click event handler right here and add task right here as well so when somebody clicks on this so underneath this div we going to be rendering all the Tas if you have some okay so I'm going to be using the UL and now uh let me just also give a class name of you know class name this is not a react just this is a v we just have to write a class uh I'm going to just write a task list and inside that we are going to be just using our Li right here and we are going to be just writing a V4 and let me just write a task and also the index right here and the task right here so now we are iterating over through all of our task if we have some and then we're going to be also providing the unique value of index and now let me just also add the class of task item right here okay and now inside this lii we are going to be just rendering our task and now let me just save that underneath this Li we are going to be also creating our button in which will just say remove the task or just remove it be fine and now we are going to be attaching The Click event right here and remove task and here we're going to be passing that index which we are getting from this iteration right here okay so we are going to be passing that and I'm going to also put a class name of remove button right here okay so I guess that would be fine so now I'm going to go ahead and provide a styling for this uh app right here I just copied The Styling so now let me just place it right here and you can found all of these coding in my GitHub repository if you want them so now let me just save my file and here you can see we have this uh we don't want that and I just figure out that here it should be app app so now let me just save that and here you can see we have this UI right here so I can now add a task like I don't know one would be fine then I'm going to just click on that it's going to Ed it but this is not cool yeah I have to do something about that so it should be inside this lii right here so now let me just save that and here you can see that's gone but if I just write something like one 2 3 or four or something like that and here you can see all of them are now added now I can remove this one I can remove all of them right here so like uh I don't know um walk the dog uh learn cording from from come on from Huzan uh Huzan is the best this is not a task but yeah that's a fact I going to just remove that from here and then is our first project of to-do list welcome to the project number two and in this one we're going to be creating a random code generator I already created this component right here and I already passed it right here inside of view and now we are getting this random code generator right here which is totally okay and what I want to do is that I'm going to go ahead and start from the scripts first of all so I'm going to be just grabbing first of all the refi and also the on mounted right here from where from The View JS and now let me just go back and here we're going to be just writing a lot of quotes and I already copyed that so I will just paste it right here and you can write as many cods as you want so now let me just place it right here let me just go back and here you can see we have array of objects right here and inside each of the object we have a text and we also have the author right here so we have actual code and who said that code so here you can see we have a few I mean like we have a few codes right here and now we are going to be working with that so now I'm going to just hide there so you guys can see everything a bit better so the next thing which I want to do is I want to create a state for the current code right here and it's going to be equals to the ref and here we're going to be passing the text and text will be set to totally empty string and we're going to be also passing the author which will be also totally empty string so now let me just write cons get random for right here and we're going to be creating this function to get a random code so now we create this function to get a random code from these codes right here okay so I'm pretty much sure that you guys already know how to get a random number and how to get a random string from something so yeah now let me just do that right here so I'm going to be doing like random index and here we're going to be just passing like m. floor to floor out or m. random value right here and here we're going to be passing the time quotes. uh value first of all quotes. value then do LIF and N GTH right here and then we're going to be just passing that to our current state which is a current code value going be now equals to the codes. value and here we're going to be just passing this random Index right here okay so now let me just pass there and it's going to gives us a random code and we are going to be also passing this function when our component initially renders right here so we can see something on the screen so we're going to be just writing like on mounted when our component successfully mounted so we're going to be just passing this function right here okay so yeah that's that now let's get into the actual UI right here so first of all we're going to be creating a d with a class of code generator g n e r a t o r and inside there we're going to be creating a H1 with a class of app- title right here and we are going to be just writing like uh random code generator oh my God g n e r h r if I can spell it today then we're going to be working with the HTML block codes right here so I'm going to open and close that and I'm going to also write a classes and let me just provide a code uh container right here so this is going to be the main container for all of our quotes and here we're going to be just passing our current code uh. text right here and underneath that we're going to be also provide that citation right here so for the citation we're going to be just providing the code author okay and yeah that's it so now underneath this block codes right here we're going to be creating a button and now the come on I kind of forgot the name and as the level we're going to be just faing like get random come on random code right here and now inside there we're going to be just attaching The Click event hander on there and get random come on get uh random code right here okay so that's cool but now let me just also attach this class right here which is a code button right here and yeah I guess that would do it so now let me just save that but before I show you the UI first of all I'm going to have to grab the styling and I'm going to just place it right here I'm going to place all of these styling right here and you can find all of these styling in my gab repository so now let me just saell that and let's just refresh it right here so here you can see it's going to give us the random code generator it's going to gives us that actual code and it's going to gives us the author right here we can also write a double dashes right here I guess that would look cool but you know that's looking awful that's looking totally awful let me just review there and now we can click on this get random code and it's going to gives us a random code right here so now I'm clicking on there and it is still giving us this first one right here because we only have these three codes right here and it is trying to give us a random code and now we are still getting that code right here but if I click on that once again so here you can see it's going to gives us a random course right here so yeah that was our random code generator and here you can pass as many courses you want welcome to the project number three and in this one we're going to be building amazing calculator and I already created a component for that and I'm already rendering that in my app right here okay so what I'm going to do is that I'm going to go ahead and first of all create our initial stat so I'm going to just grab my ref and also the computed because we're going to be working with the computed values as well and also let me just first of all create a display and it's going to be equals to the string of zero right here and we're going to be using something called a function and yeah you can go ahead and search that and I'm going to also show you that in a few seconds so first of all I'm going to be creating the a pen to display function so I'm going to just write like a pen to display and it's going to be taking some sort of a value and inside there we are going to be first of all checking if the display. value uh is triple equals to zero the string zero I'm talking about and value is not equal to not triple equal to this period so what do you want to do we just want to write display out value is going to be equal to the value so what if that's not the case so what do you want to do we just want to try a play. value will be plus equals to this simple value right here so the next thing which you want to do is that you want to create a main function for calculating all of for data so I'm going to just write like c l at to calculate this data right here and I'm going to be just passing that right here and inside that we're going to be using a try and catch block if you have some sort of Errors we're going to be just writing like display value is going to be equals to the error right here okay we're going to be just changing the UI and then we're going to be just writing the display value is equal to this Val function so it takes a string value that contains a valid JavaScript code right here or you know what let me just copy that and then I'm going to just show you there so JS function and here you can but I guess mdn has a great docs right here so this is not that much recommended to use but I'm going to still use it right here executing JavaScript from a string is a big security risk so do not use this well in what do we call it in personal bigger projects but you can use it for this small calculator kind of projects so with malal SC can do this and there so you don't have to worry about that but I'm going to go ahead and here you can see here is the example right here so we have a x variable we are storing the value of 20 I mean like 10 inside there then we have a y variable and we are storing the value of 20 inside there and then we have a text and inside this text we are just writing where x times Y and it is now giving us I mean like when we pass that text inside this EV is going to gives the actual res right here so you know let me just copy that I'm going to go ahead and right not this one right click on there go to my how do I go to inspect element there we go so I'm going to go here then I'm going to go to the console and now let me just place it right here and now I'm going to hit enter and now if I just use the result right here result and here you can see it's going to gives us uh 200 right here which is totally correct so yeah we are going to be using this method or function whatever you want to call it right here and inside this e what we want to do we just want to pass this display. value and we are already initially passing the string of zero right here okay so it's going to just convert it to a regular JavaScript function I me like to a regular JavaScript value and here we're going to be using the two string and we're going to be converting that value to the string and now I'm going to be creating one computed value for the dynamic classes so computed property for the or for dyamic class binding right here okay so now let me just write C display uh class right here it's going to be equals to the computed and here I'm going to be placing my arrow function right here and we are going to be just uh returning the display. value. length if the length is greater than 12 so then we want to just provide a small Dash text right here and if that's not the case we just want to provide nothing at all and finally now let me just create a function for clearing the display so I'm going to just write like clear display it's going to be equals to this Arrow function right here and inside that we're going to be just writing there our value it's going to be set to the string of zero right here so yeah that's that but now let's just work with our current UI right here so the first thing which I want to do is I want to create a div right here come on me just create a div and inside this div we're going to be creating a culator class right here okay so now inside there we're going to be also creating a input field right we don't need these types right here so I'm going to just attach my V model of display right here in this case and we are going to be attaching that classes dynamically so I just write this V right I me like uh this binder or whatever you want to call them we already discussed now let me just pass my display class which is this computer property okay and then we're going to be just making it a read only and now I'm going to just close it so underneath that we're going to be creating a lot of our buttons right here so I'm going to just write buttons and inside there we're going to be creating a button and I'm going to just say first of all s uh yeah I'm going to just write a seven then for the then nine then we are going to be writing a slash okay so now I'm going to just duplicate that and here we're going to be also writing um four then five then six and then times okay so then we are going to be just duplicate there and here we are going to be just spacing like uh one then two then three then I'm going to just write that Dash right here for the minus and now let me just duplicate that one more time and here what we want to do we just want to pass zero then dot or period whatever you want to call that and here what we are going to be doing is that we're going to be also writing a equal to sign and then finally a plus okay so we are going to be attaching event listener on all of them so now I guess I did just mistake so I'm going to select the like this hit contr D hit control D that much time and I'm going to attach the event handler on there okay so now we are going to be placing different values to that so oh God damn yeah I guess that would be fine so I'm going to just write a click right here come on click and now let me just hit Tab and we are going to be using this append function which we just created right here this append to display function and we are going to be using there right here so I'm going to just say like append to display and here we're going to be passing different values inside there okay so here you can see we're now passing it for all of these buttons right here and I'm going to be passing it first of all for the seven or you know what let me just duplicate there and copy that from here a god let's just duplicate there and let me just copy there and I'm going to just place it if you don't know how to do that and how I did that so you should definitely go ahead and watch my complete vs code trust me I can guarantee I can even promise it's going to change your life that's one of my favorite CES so I'm going to copy that and now let me just place it right here and finally for these ones as well okay so now let me just copy there and now let me just place it right here and finally for these ones as well so now I'm going to copy them place it right here so yeah everything is out so finally we're going to be creating a button for clearing our input right here so I'm going to just write a c to clear so let me just attach the event handler on there and I'm going to just say clear display which we've already created right here okay so yeah now the next thing which I want to do is that I'm going to also attach the clear button input field as well now I'm going to save that and here what I want to do oh I forgot to show you this one I'm going to have to copy that and then I'm going to go ahead and go to this plus right here not plus but this equal right here and we're not going to be using it right here so here we're going to be using this calculate function and we are going to be executing this calculate function right here okay thank God I remember the so here you can see we have this clear display right here we are already passing there and I don't know what I was about to show you but anyways I just forgot and now let me just place that styling right here and that's going to be it I'm going to just Place The Styling right here and by the way you can find all of the code in my gav repository so now let me just sell that and here let's just refresh that and here you can see we have this amazing looking UI yeah that's looking over so if I just write like 2 + 2 and if I just click on this equal to so it's going to gives us that four let me just zoom in a bit if I just want to clear this out so I'm going to just click on this clear button so it's going to clear it out for me and if I just write like I don't know 2 minus um 10 and equal to so it's going to gives us minus 8 right here and now let me just clear there and then I'm going to just write like 5 * 2 so it's going to gives us 10 right here let me just clear there and I don't know 5 * 2 or something like that equal to so it's going to also gives us a fraction and then uh yeah everything is working so I can also write decimal points like 2.3 plus 3.2 or something like that and if I hit enter so it's going to give us that 5.5 and everything is working the we exp to work so yeah this is how we are going to be building a calculator app in VJs so welcome to the fourth project of this course so in this one we are going to be building accordians okay so I already created a component for that and now I am importing that and I am rendering there in my fjs right here I mean like in F view component right here okay so what I want to do is that first of all I'm going to be grabbing the ref from the vuejs and also I'm going to be creating a state for the items and here I'm going to be placing array of objects so now let me just P it right here and here you can see we have array and inside this array we have a lot of objects and each object will have the title property and then some sort of a value for that then we have a content and some sort of a value for that and finally we have this open right here okay so we have a few objects right here so what I want to do is that I'm going to just collapse it right here so you guys can see everything a bit better and now I'm going to be creating a function for toggling that accordion so I'm going to just write like toggle uh accordion it's going to be now taking some sort of Index right here and now I'm going to just pass my item right here so items. value which is this items right here and we are grabbing the value from there and it's going to be now equals to the items. value and now we are going to be iterating over through all of that items and here we're going to be taking the item itself and also the index right here okay so I'm going to just write an arrow function right here and inside there first of all we're going to be taking all of our items right here like we're going to be cloning our items right not items but item right here like singular not plural but singular and I'm going to also have to uh put that in the parentheses right here so now their error will disappear and now the next thing which I want to do is that we only care about this property right here which we have this open property for all of these objects right here we don't care about the title we don't care about the content but we only care about this is open property so now I'm going to just write open and now here I'm going to be using the JavaScript tary operator right here and now if I like the index is triple equals to that actual index what do you want to do we just want to flip the item off open if that's true so make it false if that's false make it true and then if that's not the case we just want to set that to false by default so yeah that's our accordian function right here and now let's just use that inside our UI so I'm going to go ahead and go to the template and inside the template we're going to be creating a d with a class of accordian container right here and inside this accordion container we are going to be first of all creating a div and I'm going to be just iterating over through all of our item so I'm going to just for like item and also the index and we're going to be using the in operator and we are going to be iterating all through all of four items and let me just provide a key of index for all of the unique uh items and I'm going to be also passing the accordian class as well so now let me just go back and inside there what I'm going to do is that I'm going to be creating a d with the class of accordion and header and when somebody clicks on that header so what you want to do we just want to show like toggle accordion okay so toggle accordion and it's going to take that index which we are getting from all of these item we are taking that Index right here in this case and now in this case we are now providing this Index right here which we are iterating over through all of the items and we are getting that unique index and we're now passing that index to this Accord I like toggle accordion function okay so that's the and now inside this div what I want to do is that I'm going to be rendering my item. tile title there we go now let me just sell there and underneath that what I want to do is that I'm going to be also providing a span and I'm going to just provide um you know what uh I'm going to provide a bit of content right here but first of all let me just give him a CL like last name of Arrow icon and now inside there what I want to do is that I'm going to be just checking if item do open if it's open so we just want to show this to a user this icon to the user so if you want to get this same icon so you just have to open I mean like you just have to hold your Windows button and you just have to hit dot so it's going to give you this Emoji picker right here and you can search for different kinds of um what do we call it different kinds of things right here but I already choose this one so I'm going to just place it right here here and what if that's not the case so what do you want to show to the user we just want to show this icon to the user right here okay so that's then now underneath this D what do you want to do we're going to be just using word div and here we're going to be using the vsh we don't want to hide the entire UI but we just want to hide here for a few seconds or when the user clicks on this we are going to be using item. open and here we just have to write a class name of accordian Dash content right here because here we're going to be placing the actual content of this accordion so I'm going to be just writing like item. content and now let me just save this so yeah I guess that's it for all of the logic and also for the UI but now let me just provide a bit of styling right here so I just copyed The Styling and now let me just place it right here and you can found all of these styling and my have repository so now let me just save that and here you can see it's going to gives us these accordians right here so if I click on that and here you can see that icon will be change and it's going to gives us that content right here but if I click on this one so it's going to collapse this one and it's going to gives us the cont content of the second one right here and same well goes for the third one and so on and so forth right here so yeah that was our accordian component in VJs all right so welcome to the fifth project of this course so in this one we're going to be building the form validation project so I already grabbed the Rex if you guys don't know what a Rex or a regular expressions are so you don't even have to worry about that but yeah we're going to be just using that for a testing and I just create this component word here and I rendered there in my app okay so that's why we are now getting this form validation all righty so now let's get into it so the first thing which I would do is that I'm going to be grabbing my ref and also the comput it so computed right here from the VJs and then I'm going to be grabbing the I mean not grabbing but I'm going to be creating a state for the form data and here we're going to be providing this object right here and inside this object we're going to be providing the name and name will be empty string then we're going to be also providing the email and email will be totally empty string and also for the password as well well okay so now we create our initial St here and now the next thing which we have to do is that we have to write our computed property for the name validation so I'm going to just write like is name valid it's going to be equals to this computed property and here we're going to be passing our aror function and I'm going to be grabbing my form data and we're going to be just getting the value of that name and I'm going to be also providing the trim method we don't get any empty spaces if that's not uh empty so yeah we're going to be just the value of there in the is name Val and then we have a cost is email where here it's going to be equals to the computer property and here we're going to be passing our Arrow function and we're going to be checking uh this reject so I'm going to cut that Rex from here now let me just remove that from here and I'm going to be placing my Rex right here and we are going to be passing our test so I'm going to just write like DOT test and now here inside there we're going to be providing our form data and we are just only interested in the email so now let me just pass my email email right here and it's going to store that value inside this is email valid variable okay so yeah now let me just check for the password so cost is password um Val here will be now equals to the computer property and inside there we're going to be storing the value of form data value. password and then we are going to be checking the length l n GTH if the length is greater than or equal to Ed so the password will be a valid password here so yeah now let me just go back and here we going to be creating one for the form validation itself so I'm going to just write like um cost is form valid and it's going to be equals to this computer property in this case I'm going to be faing like his name valid do value and his email valid. value and is password valid. value okay so if that's the case so store that value inside this is form validation or form Val okay so that's then now let me just create a function so I'm going to just give a name of like submit form and we are not going to be doing anything crazy but I'm going to just loog to the console something and now here we are going to be just passing if uh what do we call it if we have like is form valid do value so what do you want to do you can write like a lot of logic right here uh but in my case I'm not going to be providing that much logic but I'm going to just write like cons. log form submitted s m i t would be fine and then we're going to be p form data. value okay so that's the if that's not the case what do you want to do we just want to look to the console like form is invalid and then please check the in or you know not input field but fields and I guess that's it about for the logic and now let me just go ahead and write the UI for that so I'm going to just remove this H1 and first thing first we're going to be creating a div let me just create a div and inside this div we are going to be creating a form we don't need no actions so we going to be just writing a submit and we are going to be also preventing that refresh right here from happening and we're going to be passing our submit I'm going to also give a class of custom CM form right here and inside that we're going to be creating a div um and I'm going to just give a class of like form group f o RM f o RM f o r God damn it f o RM and then group and inside there we're going to be also providing some sort of a label for there like uh name would be fine and I'm going to also provide a name here and then I'm going to be providing an input field we don't need or you know I'm going to leave there right here but I'm going to also provide the v- model and we are going to be attaching the form data do name in this case Okay and then I'm going to be providing the ID of name right here because we already provide this form field okay so that's then now underneath this input field we're going to be also creating our span let's just create our span and name is required uh required right here but oh my God what the hell did I do let me just click on there and here we are going to be just passing like VF statement or directory to be precise and we're going to be checking if not is name valid then show us this UI right here and if that's not the case so we're going to be not providing anything at all so now let me just provide a class of error right here as well okay so yeah that's cool but I guess I'm going to have to duplicate that a few times so this is for the name then for the email and then also for the password as well so now let me just provide a enter and then let's just change that to the email I'm going to also change this one to the email as well and also email and this one will be email as well and let's just change this one to the email and what if is not email provided so is email valid if that's not the case so yeah we don't have to just uh provide the name isqu required but we are going to be also just writing like please enter uh a valid email address and underneath that we are going to be also taking care of um what do we call it the password so password I'm going to also change that to password and this one to password as well let me just also provide a password ID and also the text of password let's just remove that and I'm going to just write like pass password must be at least at at come on ADD characters okay and I'm going to just provide if not um is password valid okay so if that's not the case so yeah you get the idea so now underneath this T we are going to be creating our button and I'm going to be providing the type of submit it's not going to do that much of things but I'm going to provide it anyways and it is going to be disabled uh if not is form valid okay so if our form data is not filed so it's going to be disabled and then submit uh button right here and here we're going to be just passing the label off submit and finally now let me just add this styling and now I'm going to sve my file and refresh that and here you can see it's going to gives us that name and also the email and also the password and here you can also see that our submit button is disabled but if I just put some sort of name right here so I'm going to just write like uh hen in this case and here you can see that err message is totally gone and now what if I just write something like some valid email right here like Huzan gmail.com and and here you can see that error is gone but in this case let's suppose if I just remove this add symbol right here or if I just write like I don't know if I didn't specify the Gmail or something like that so here you can see it's going to give us that um error right here that's because of this line of code which is this reject okay and now let me just provide some sort of a password but if I just provide some sort of a short password like 222 or 333 so it's going to still gives a thir error but if I just provide some sort of a long password like more than eight characters so if I just write like my name is Huzan so it's going to gives us that submit button right here but if I right click on there and go to the inspect area go to the console and now let me just submit this form and here you can see it's going to give us that form data and now we can check there we can do whatever we want to do with that data okay so yeah that was just a quick example of a form validation in VJs welcome to the seven project of this course so in this one we are going to be building the password generator okay so I already created this component and I already render that so that's why I am seeing this password generator right here so I'm going to go ahead and start working with my password generator okay so the first thing which I would do is that I'm going to be grabbing my refi from my view and then I'm going to just create a lot of stats right here so I'm going to just write a password l l e n g b it's going to be equals to the rift of 12 characters and now let me just sare for the include uppercase so con include upper come on upper C and it's going to be equals to the ri and here we're going to be passing through and now include numbers and it's going to be equals to the ref and here we're going to also passing the TR and cons include sbls and it's going to be equals to a ref of three and then we're going to be also creating for the final one which will be General rated password and it's going to be equals to the ref of empty string now let me just go back and that's all the state that we need for now so now the next thing which I want to do is that I'm going to be creating my function which will be generate password this is a generate and this is a generate password now inside this function the first thing which I would do is that I'm going to be writing the lowercase characters so con lower case charge uh charge like that and now let me just just place right here so we have all of the a b c d from starting from the A through Z in lower case so now let me just create the upper case so con or you know what yeah I'm going to just create upper case charge as well and it's going to be equals to rary operator we're going to be checking like include uppercase do value which we are getting from this include uppercase right here so if that's true so what do you want to do uh we're going to be passing these uppercase right here if that's not the case we not going to be passing anything at all so it's going to be set to empty strings now let me just crate for the number characters as well for the number chars and it's going to be equals to the include number incl i n c l u d e include numbers. value if that's the case so here we're going to be passing numbers from 0o through 9 okay so here you can see we have a numbers from 0o through 9 if that's not the case we are going to be just passing the empty string and now let me just create for the final one which will be for the sample so sble sble charts and it's going to be equals to the include symol and Dot value which we are getting from this include symbol right here okay so which will be our reactive object and if that's the case so we are going to be providing almost all of our samples right here and if that's not the case so we are going to be just providing the empty string so now underneath that what you want to do we just want to combine all of that stuff so I'm going to just write like all characters it's going to be equals to the lower case plus the upper C plus uh the number characters and also we have assemble characters as well okay so yeah that's that now the next thing which I want to do is that I want to create a password so cost password it's going to be equals to the empty string and now you want to itate over through that password by using this for Loop so I'm going to just pass the I right here so we're going to be starting from the zero and then we are going to be just providing uh as our array we're going to be passing our password length so where is our password length here we have our password length part here which will be set to 12 characters and we are now providing the length part here I mean like we not interested in the length but we're going to be working with the value and here we're going to be just incrementing that by one so now let me just remove that and now I'm going to just write like a random come on random index and it's going to be equals to the math. floor and here we're going to be just passing like math on math. random right here and now we are going to be just using the times all characters come on where the hell is that I'm going to copy that now let me just place that right here do length Okay so underneath that we're going to be just writing the password plus equals to now we are appending the all characters and here we're going to have to pass this random Index right here into that password which we just created right here okay so yeah so now underneath that what I want to do is that I'm going to just write a generate uh password do value we're going to be getting the value from there and it's going to be equal to that password right here this password like the random characters right here so now I'm going to sve my file and that's it for almost all of our uh logic right here but I'm just wondering like generate password where is that use it's a generated password so I'm going to have to copy that and not generate password this is our function we have to pass the generated password. valure right here okay not this one but this one so now I'm going to save my file and that's it so now let's just get into the UI and write a code for the UI so I'm going to just delete that from here and I'm going to just write a container first of all so password generator container and now inside there we're going to be just creating H2 with the class of password uh generator g n e r t r title and we're going to be just providing like a password generator right here underneath that we're going to be providing a label and here for the four we're going to be providing the length and here let me just write a p trans for length right here okay so now underneath that we're going to be creating our input field and it's going to take the number in this case we're not working with um the text so here we have to put the ID of length as well okay and then we're going to be also attaching the V model as well and we are going to be just writing like a password length right here we're going to be attaching that now let me just put the minimum come on not mine but the minimum value and the minimum value will be four and the maximum value will be 32 okay so yeah that's the I'm going to just provide a br for the breaking now let me just go back and underneath that we are going to be providing yet another label right here so we're going to have a label for include P or you know not yeah include upper C right here okay so I'm going to just write like include uh uppercase and let me just put that separator and I'm going to be providing their input field again and here we're going to be providing a check box okay and I'm going to just close it right here and we're going to be providing first of all ID of that same ID just like for the four I'm going to copy and place it right here and also we going to be providing the V model as well and for the V model we are going to be providing that same upper or not uppercase but include uppercase which we have uh right here where is the include uppercase here you can see we have that include uppercase right here okay so that's that now I guess I'm going to have to duplicate that a few times or should I do that or yeah I guess I'm going to have to do that so this is for the upper case then we have for the numbers then we have for the sbls okay so I'm going to just hit enter right here okay so first of all let me just take care of this one so we have a include in this case upper case so we have a include numbers okay and here we're going to be just writing include uh numbers right here and now let me just copy there place it right here place it right here as well and this one will be also a checkbox so yeah that's then now let me just take care of the samps as well let's just remove there and I'm going to just write a sbls and I'm going to just change this one to include symol right here so I'm going to copy that let me just place that in both of these areas and there you have it and finally underneath this beon we're going to be creating a button and I'm going to just write a generate uh GN e r t e generate password right here and we're going to be attaching the event listener on that and and we are going to be just passing our function which is this generated password and now I'm going to copy that and place it right here and yeah I'm going to also put a class name of come on class I thought I'm working on reactjs this is not reactjs let me just provide a simple class so generated uh password right here and underneath that uh not password generated button rather and then underneath this button what do you want to do we just want to create a and inside this div we are going to be just rendering our password so if we have a password like if we have a generated password so what do you want to do let me just put a class right here and generated password there we go we just want to show that password right here so I'm going to be using a strong tag for that and I'm going to just write your password and here we just have to render or password right here which is generated password so now let me just or not generate yeah generated password right here now let me just save that and here I'm going to provide a styling and you can also found their styling in my G repository and here I'm going to just place this stying right here and you can find all of these styling in my gab repository so now if I sell my file and here you can see we have this password generat right here and we don't have any password nothing right here but if I just write like uh I don't know yeah I'm going to just include the upper cases the numbers and the symbols as well so if I click on that so it's going to give us us that um what do you call this this password right here if I click on that once again so it's going to gives us that random password right here so what if I don't want to include the symbols as well so I'm going to just uncheck that symbols and now if I click on that so it's going to only gives us the characters I mean like the text and also the numbers as well the characters and now if I click on the numbers so it's going to only gives us um uppercase uh text right here so if I click on that anytime it's going to gives us that uh text right here so English alphabets or whatever you want to call that so now if I also add this one and here you can see it's going to also gives us that numbers as well and also the what do we call it their symbols as well and we can also increase or decrease the size of their like I don't know maybe if I just want like two if I click on this it's going to gives us two characters and if I just write like I don't know maybe the amount you know I guess that's not going to work because we are only limited to 32 characters so I'm going to just write a 32 right here and now let me just click on this generate button so it's going to giv us that button right here I me like that uh password right here so yeah that's done but I'm not happy with the UI so you know what if you clone my G repository you are going to get a cool looking UI for me when I'm recording this course you're not going to see that much cool UI right here I'm sorry about that but I'm going to just provide some cool looking UI for this project so yeah this is how we are going to be working with the password generator in wgs all righty so welcome to the sixth project of this course so in this one we are going to be building the progress steps I already created a component for that and I already imported there right here inside the app and this is how it looks like right here so what I'm going to do is that I'm going to go ahead and first of all import the ref let me just grab the ref from my vuejs and first of all we're going to be creating a steps uh straight for here so I'm going to just provide these initial value of like step one and step uh two and also the step through step three and then I'm going to be also providing a current step right here and the initial value will be set to zero okay and then I'm going to be also creating a two method so it will allows us to go next and to go previous so I'm going to just write like next step and it's going to be equals to this Arrow function right here and inside that we are going to be just writing like um current step. value is less than steps. value length L GT and minus one and I'm going to just write like current step do value Plus+ so what we are doing is that we are just incrementing this uh current step right here by one and then what I'm going to do is that I'm going to just duplicate this function right here well you know I don't have to duplicate that I'm going to just create a new function give name of like PR step right here it's going to be equals to this function and inside this function we're going to be also checking or providing a if statement of current state step. value is greater than zero so what do you want to do you just want to write like current step. value minus minus okay so now let me just go back and this is how everything look like right here so now inside this UI or the template or the HTML whatever you want to call it we're going to be creating a progress container right here so progress container and inside that we're going to be creating a progress PR g s bar inside there we're going to be creating a div let's just create a div and I'm going to be providing the V4 first of all and we're going to be just providing like step and we are going to be also using the index in the steps right here and inside that oh you know first of all let me just take care of that unique key we're going to be passing this Index right here and I'm going to be also attaching that class uh and here in this case I'm going to be attaching that dynamically so let's just provide if we have the step active class which we're going to be also providing in the CSS so what you want to do we just want to write index triple equals to current step right here let's just go back and sem my find this is how currently everything looks like right here and now inside there we are going to be just rendering our step right here so now let me just save that and now underneath this St we are going to be just providing our controls so I'm going to just write con come on controls and inside there we're going to be creating a button let's just zoom in a bit and I'm going to just write uh first of all the previous and then I'm going to be creating one for the next as well so now let me just take care of the previous St so I'm going to just provide a click event hander right here when somebody clicks on there so here we're going to be passing our previous uh step right here and then I'm going to be also taking care of the disabled St as well so if the current step is triple equals to zero so we are going to be just disabling that other than that uh it's going to be enable or active whatever you want to call that and I'm going to be also providing a class name of button right here so I'm going to just save that but you know what I'm going to just just copy all of that Steps From Here and Now let me just place it right here and I'm going to just provide a next step right here in this case and I'm going to just set that to um you know let's just remove that from here and I'm going to just proide that to step. left Al GTH minus one and I guess that would be it I'm going to go back and this is how everything looks like and now let me just place these styling right here and you can find all of these styling in my gab repository so I'm going to just set there and here you can see it's going to gives us uh this UI right here so first of all we have this uh active class right here so if I click on the next but so it's going to active this one and now we are also getting this previous right here so if I click on that so it's going to bring us to the previous one and to the next one and also to the next one right here and you can provide the UI however you want but I guess that's going to be it for my side so yeah this is how we're going to be building the progress steps in vgs welcome to the project number eight of this Cod so in this one we're going to be working with the I can has dead J API so I already created a template for that and I already rendered there right here so that's why I can see I can has a that J API baby so yeah now I'm going to get into it and let's just start working on there but before I do we're going to be using the exos library right here so now I'm going to have to install that exos right here so I'm going to be using like npmi and xuse to install xuse in my machine or in this specific project right here okay so if you guys don't know what exos is so don't worry I'm going to just show you what exos is or you can just learn it I guess in I don't know 5 minutes or so so I'm going to just first of all grab my ref from the VJs and then I'm going to be also grabbing the axos from the XS as well and now here we're going to be creating a state for the jokes or joke rather and then ref will be set to initially no and here we're going to be fetching our data by using this function so I'm going to just write like a fetch joke and it's going to be equals to the N synr function and here we're going to be just writing our train catch blocks and for the catch blocks we are going to be just saying like con. error and we are going to be just passing this error like error um fetching data or data dad uh joke right here you don't get the joke bro so I'm going to just write a fetching okay and now let me just put a comma and error and now for the tri block we are going to be getting the response from this we of xio and we're going to be sending a get method and here we're going to be sending our get method to this https and then call yeah SL I can has H AZ de joke.com for/ so if I hold my mouse and click on that so it's going to bring me to this uh web page right here and here you can learn more about that if you wanted to but trust me there is nothing to learn about that so you can click on the random joke and it's going to give you that random joke right here you can can uh yeah you can go to the official page and you can learn more about the documentation but anyways so yeah that's cool but I'm going to also have to provide my what do we call it that application Json headers so now let me just write a headers and here it's going to tag like accept and then application will be now set to Json so that's the only thing that you have to do and then we have to just write a joke. value will be now equals to response. D do joke we are going to be just grabbing that joke and it should be response r n e there we go and yeah I'm going to save this file and that's it for the logic and now let me just implement the logic right here inside this template or the UI whatever you want to call that the HTML maybe okay so now let me just create a dead um jokes container container there we go and inside they we're going to be creating a two let me just provide a class name of dead uh jokes title and inside there we're going to be just writing dead joke is joke is so now let me just create a button and it's going to just say like get uh dead joke and here we are going to be also passing the click event handler and we are going to be just passing this function let me just copy that and put there right here and there you have it and finally well you know I'm going to also provide a class name for this but as well so the class will be get- j- button right here okay so now underneath that we are going to to be rendering our actual joke so I'm going to just create a div and I'm going to just render my joke right here but first of all we have to use the VF if you have some sort of a joke then print us that joke but if you don't have any joke so don't show us nothing at all so dead joke right here save my file and now I'm going to just Place The Styling right here and now I'm going to just save my file and here you can see it's going to gives us that cool looking button and also this dead J so if I click on that so it's going to gives us that yeah coffee has a tough time at my house every morning it gets smugged not that much cool bro let me just try another one yeah there is a lot of cool ones but anyways this is how you're going to be fetching a data by using AIO in uh VJs so yeah that was our project number eight so welcome to the project number nine and in this one we're going to be creating a GitHub user search okay so nothing crazy going on but I just created my component for here and I just rendered that right here inside the app and if I see so here you can see it's going to give us that Gab user search and that's looking amazing so yeah the first thing which I want to do is that I'm going to zoom in so now let me just import the ref from where from the VJs and then I'm going to just create a few stat so like a username it will be now equals to the ref of empty string and cons user profile now equals to the ref of null and then error we're going to be passing the ref of of null as well okay so that's that now the next thing which we have to do is that we have to create a function which allows us to get some sort of a data from our API right here so get uh user profile will be coming from the asynchronous function and here we're going to be using a trying catch blocks for the error we're going to be just writing like console. error and we're going to be just saying like error patching data right here and I'm going to just provide that error right in here and then I'm going to be also wrting like error. video which you can see right here this error I'm talking about so now let me just copy and place there you know is going to give us the nameing conflict right here so we going to have to shorten that to err and err right here so then this error will be coming from this state right here and this error I mean like this error if I can highlight that this error will be coming from this error for the catch block right here anyways so it's going to be equals to uh an error occurred while fetching data so o c red okay so now for the tri block what do you want to do we are going to be sending our request to this API which is https and then api. github.com for/ users and here we are going to be just rendering our username do value but before I do that you know what that's a cool string I just wrote right here I was just writing it for the demonstration purposes but now let me just copy that I'm going to copy that right here and now let me just place that and here we're going to have to provide some sort of a username so I'm going to just write like a usern you know I'm going to just give my own username which is Huzan web dev and if I hit enter so here you can see it's going to giv this information based on the specific user right here like the username the ID the I don't even know what the mode ID is but yeah here you can see it's going to also giv us that Avatar so now I'm going to copy there place there and here is that cool guy man here is that amazing looking guy so yeah here you can see this how we are going to be getting I mean like this is how we're going to be sending our request to the specific API endpoint okay so we already wrote that so I'm going to cut that from here and cons response will be now equals to the aare and fetch and we're going to be passing our response right here okay and I guess that's looking cool we don't even have to do nothing else yeah we do so now let me just write a con data and it's going to be now equals to A and then we're going to be just changing their response to Json and yeah here we're going to be also checking for the errors like if the response is not okay so what do you want to do so response. okay so if the response is okay so what do you want to do we just want to write a user profile value will be equals to this data and also the error. value will be equals to no and what if that's not the case what do we want to do so we just want to write like a user profile. value will be equals to no and also we're going to be just writing like error. value and it's going to be equals to this template literal and eror and here we are going to be just uh providing our data message I guess that's going to be it so now we just have our username U us e r n us e r n oh here we have to use a template literal so now let me just past their template literals and here you can see it's going to take its place so yeah that's looking cool but now we have to use that inside our UI so I'm going to have to delete that and I'm going to be just creating a container first of all like GitHub profile and then Dash viewers v i e w RS or viewer singular and then we have to create over H1 and I'm going to just also give a class of app- title and inside there I'm going to just select GitHub user profile view I can get that let me just copy oh you know what you don't don't even have to write the gab user profile search would be fine so now let me just create my input container so input container and inside they we're going to be just writing or input come on input and here we just have to remove this in type right here we don't have to provide a type and we are going to be attaching the V model of username and also we are going to be providing the placeholder of ener GitHub enter GitHub username right here and I'm going to be also attaching my keybo event which will be the input and we are going to be just providing our GitHub get user profile function which we just created right here I'm going to just hide there for a few seconds and this is what we're doing right here okay so yeah now I'm going to save that and underneath this T we're going to have to show the user data if you have some data so we're going to be just first of all writing a Dev and I'm going to just provide a VF if we have some sort of a user profile and we are going to be also providing a class name for that like user profile and if you have some sort of a user profile so we're going to be first of all grabbing the image and where in the world we're going to be getting the image let me just show you there I already show you there but you know what let me just show you that once again what the hell let's just place that H web def username and we're going to be just providing that AAR or whatever you want to call that URL okay so yeah now what I want to do is that I want to just write IMG tag let me just write the manually because it's not going to help me here and also I'm going to be just providing this SRC of user profile and we are only interested in this specific property right here so I'm going to copy that and place it right here and then I'm going to be also providing some alternative text right here so user profile. Logan login and now let me just uh refresh that that login will be this name right here we can also put this ID but you know what that's cool okay so yeah that's amazing and then what I want to do or you know if you just search something like uh hen web dev right here so it's going to also gives us that amazing looking guy but you know we also have to render the other content as well so I'm going to just create a details right here user details and inside that we are going to be just writing a paragraph and also the strong tag inside their paragraph and we're going to be just saying the name first of all and here you know I'm going to have to duplicate there a few times so so we're going to be getting the location we're going to be also getting the followers and also the following and finally we are going to be just writing a public uh Repose we have currently so you know what outside from this strong tag we're going to be just writing like uh user profile. login we can even also restructure there but you know what there's other story so I'm not going to do that and now let me just provide it right here for all of them and I'm going to be just changing these values so first one we have is a login then we have a location and then we have is a followers and then we have is a following and then we have is a public uh repost okay so yeah now I'm going to save this file and underneath this D what I want to do is that I'm going to be also rendering that error if you got one so I'm going to just write a div and here we're going to be also using the if statement and if we have some sort of error which we are already providing right here okay so what do you want to do in that case first of all we're going to be providing a class name of error message and then inside there we are going to be just rendering that error right here so now let me just save that but now let me cut that and put that inside a paragraph and save that and yep here you can see it's going to gives us all of their data but you know what I'm going to provide a bit of styling right here and now let me just place that styling right here and you're going to have access to all of their styling and all of their coding and my have repository so now I'm going to sell my file and here you can see it's going to gives us this UI but I'm going to just search for like I don't know I just only know this one person in GitHub and here you can see it's going to giv us that hus webd and it's going to giv us all of that information right here cool project hus cool project so yeah that was the ninth project of this course so next we're going to be creating the final project which will be the Wikipedia clone baby all right guys so welcome to the final project of this series so in this one we're going to be building the Wikipedia clown not actually but yeah we are going to be building that so what I did is that I already created this component right here and also I just imported that right here and I just rendered that so here you can see we're now getting this message I'm going to delete that because there was a bit of enthusiasm so I'm going to just write something else and the first thing which I want to do is that I'm going to be just grabbing my ref so grab my ref from the VJs and now let me just go back and provide a lot of stats right here so like con search query will be now equals to the ref right here is going to be equals to fly empty string and then we have a search results or yeah results would be fine and here we're going to be passing the ref I mean like the empty array and then cost is loading will be now equals to the ref and it's going to be set to false by default and then error will be now equals to the ref of only no and cost is dark come on cost is Dark theme come on t h e m e there we go we equals to the ref of false okay so this is all of our STS the next thing which you have to do is that we have to create a huge uh function right here so search v w k i p e d i a will be now equals to the ASN function and we're going to be just passing our query word here into it first thing which I want to use I'm going to just WR inced query and it's going to be equals to the encoded URI and then component come on URI and then component and here we're going to be just passing the query right here okay so now underneath that we're going to be also providing our endpoint so end point and it's going to be now equals to this huge endpoint right here which I copied from the what do we call it from the Wikipedia and you can found that same Link in my G repository and finally at the end we are going to be passing this uh totally dynamically which is this encoded query right here which we are passing uh right here okay so that's then now underneath that we're going to be just checking so try and catch block so for the catch block we're going to be just writing yeah I'm going to just write uh first of all you know let me just take care yeah God damn it kind of lost my money here cons. error and here we're going to be just passing like error pitching data and here we just have to render our error right here and it should be err because we already have error above and now let me just write a search result um value and is going to be equal to totally empty array and then we have a error. value and it's going to be now equals to um and come on an error occurred orc R while fetching uh data right here okay so underneath finally we are going to be just writing finally as well and I'm going to just write is loading do value will be now set to false okay so now let's just talk about the TR block right here so first of all the is loading. value will be set to true and then C response will be set to event and then fetch we're going to be providing fetch do PCH and here we're going to be passing our endpoint right here from this API endpoint right here okay so underneath that we're going to be converting our data to the Json format so we're going to be using like a and then response. Json and here underneath that we're going to be also checking for the error if we got one so we are going to be just writing like data. query and and uh data. query. search so come on not search query but search right here so we are going to just writing like a search result and then value will be now equals to the data. query come on data. query do search right here so underneath that we're going to be just writing like error. value will be now set to totally know and then we're going to be also creating for the else class right here so search result. value will be now set to totally empty array and error. value will be now set to no results found okay so yeah I guess that's going to be it for the logic right here so we don't have nothing special going on what is wrong with that is not defined oh it should not be encoded it should be just incode URL uh incode there we go I just misspelled that right here anyway so we have a is Dark theme and then search query and now let me just take care of the search query and also the is Dark theme right here so I'm going to go to the bottom and here what I want to do is that I'm going to just write like con tole theme and it's going to be equals to this uh function right here and we're going to be just writing like is Dark theme which we have declared up above and we are going to be getting the value of there and we are going to be just setting that to is Dark theme do value okay so we are going to be just reverting that and then finally we're going to be submitting our search query so we're going to be just wrting like submit um search it's going to be equals to this aror function right here and if search query search query uh value do Rim in this case is not equals to empty string so then we have to show some content to the user like search Wikipedia and then here we just have to pass our search query. value right here we're passing this function which we have right here it requires a query and here we are passing that query value right here okay so if that's not the case what do you want to do we just want to write like a search result. value and it's going to be equals to empty array and error. value will be now set to please enter a valid search term okay so yeah I guess now that's it that's a lot of explanation and that's a lot of coding right here because this is the final project so that's why we have to write a lot of coding and trust me I'm not even writing a CSS but if I were to write a CSS code it would have took me like another day so now I'm going to just write a div and here let me just P my class come on class right oh my God class right here and we are going to be ping there randomly randomly what the hell we're going to be proving there dynamically there we go so dark theme and also the is Dark theme Right Here and Now inside this div what you want to do we just want to take care of the container first of all and inside the container we're going to be creating a header header container and inside this there we're going to be creating our H1 and then search uh Wikipedia and underneath this H1 we're going to be creating a a spin and we are going to be providing the ID first of all because that's for The Styling so we are going to be just writing like a theme uh Toggler and also when somebody clicks on that let me just go back when somebody clicks on this so we have a toggle theme right here okay which we've already declared above and here we're going to be just writing like is Dark theme and if that's the case we just want to change the text of that to light and if that's not the case we just want to provide that dark uh search I me like not search bar the dark text that's a lot of talking hosan that's a lot so now underneath this day we're going to have to write our form so let's just create our form and I'm going to also remove this action from here and when somebody submit that form you just want to prevent that refresh from happening so we're going to have WR a prevent part here and it's going to be taking that submit search which which we've already declared right here so now inside this form what do you want to do I'm going to go ahead and provide input field right here input and now I'm going to just provide a type of text and also the V model will be a search query which we've already created above q r y there we go and also the what do we call it the placeholder will now set to enter search term right here okay so I'm going to just save that and underneath this input field we're going to be creating a button and I'm going to providing a type of submit right here and now let me just provide my search okay so yeah now underneath this form what you want to do we just want to render our content right here what we search so I'm going to just write a div and inside this D I'm going to be providing ID of search come on search result right here and inside that we're going to be creating a div and I'm going to just write a VF right here and is loading uh yeah I guess that is loading would be fine so then we are going to be providing a class of spinner and here we just have loading dot dot dot we don't have to do nothing crazy with that and then what you want to do you just want to create a paragraph and we're going to be rendering this content dynamically so search result and then do L right here L NG GTH there we go and now inside this paragraph we're going to be creating a div and now we have to just it over through all of the content right here so we're going to be just writing like uh result in search results right here and then we are going to be just writing uh the key for that so I'm going to just write a result do page ID and then I'm going to be also providing a class for there so class name will be r. item let's just go back and now inside this div what I want to do is that I'm going to be just creating our H3 right here so H3 I don't know what's wrong with that but I'm going to just stick to the anyways because I have WR this code so now let me just write H3 and I'm going to also provide a class of result result dot not dot but Dash title and inside there um I'm going to just proide my anchor tag right here I'm going to include my anchor tag dynamically as here we're going to be also passing the what do we call it the page ID from the result so we're going to have to write these codes right here and then we have to just write https and then colon colon then English Wikipedia.org SL and then we're to be providing our search query and then C R ID will be now equals to this random uh result. page ID word here so we're going to be passing that but we're going to be also taking our user to the next page so we're going to have to write a Target and the target will be blank as well and also the ra will be now set to this value and finally now let me just s that I'm going to render this content which is a result. tile and now let me just save there why it is not giving me auto complete something is wrong but you know what I'm going to just search something like uh I don't know computer and now if I click on that so it's going to give us a loader and everything is working totally a okay but I don't know why it is giving us their error anyways I'm going to take care of that in a few seconds but now let me just duplicate this H3 but you know what not this H3 but I'm going to copy this anchor tag and underneath this H3 we are going to be replacing that once again okay so I'm going to just replace it right here and we are now attaching this hrii and that's totally a okay we are also passing that page ID right here and also in this case we're going to be also providing the class name so I'm going to just WR a class and class will be equals to um result d blank oh not BL result Das link and then we are going to be providing every single thing that we are providing right here and I don't know why it is not giving me auto complete right here in this case but yeah you get the idea why yeah in this case I'm going to just delete that and I'm going to just copy all of that content from here let me just copy all of that I'm going to copy that and now we are going to be placing that dynamically right here so now if I save that I'm not quite sure why it is giving me that error and now it is also not giving me a formatting right here but you get the idea you know I'm going to just break this down one by one by myself so here you can see this is how the content currently looks like right here I'm going to just hit enter and this is how currently things looks like if I say then if I search for some content right here so here you can see it's going to gives us that uh same ID right here and also it's going to give us that entire link which you can see which we are providing right here okay so yeah that's the now the next thing which I want to do is that underneath this anchor tag we're going to be also just rendering or what do we call it the snippet so I'm going to just write like paragraph and here I'm going to be putting a class name of result and then snip it and we we going to be also attaching the V HTML and then it's going to be equals to the result. snip it right here SN i p and yeah I guess that's going to be it so if I just save that and if I just refresh so here you can see it's going to gives us that content as well but if I didn't specify this V HTML right here if I just remove that and save my file and here you can see it's not going to giv us anything but if I just provide this V HTML and then this result um oh you know let me just cut that from here because I want to show you something and now let me just provide the right here and I'm going to cut this V HTML from here semi file it is going to give us a St content but it's going to also include this HTML as well like for the span tag we have this class name right here and we have all of that HTML as well that's going to be included right so you know what I'm going to just undo that and here you can see we are now providing this V HTML right here and we don't have to specify anything right here inside there so I'm going to just cut there from here cut this empty space from here and now let me just add some styling to it I just copy the style and now let me just place all of these styling right here and now if I save my file and refresh that and that's not what I wanted and I guess something is wrong in the HTML so I'm not quite sure what's wrong but something is wrong I forgot to include that ID right here now let me just put that ID for this input field as well which will be a search input so if I just uh write a search and input so if I save this it's going to gives us that search field here if I click on this so here you can see it's going of just make that background totally the gray color or something like that if I just search for a coding and if I click on that and here you can see it's going to gives us all of that kind of content right here we can click on the page and it's going to bring us to that specific page right here and we can learn more about that we can also write for I don't know um let me just search myself I am not famous I know that but I guess it's going to give us some weird looking uh RZ right here so I'm going to just click on that and nothing is happening right here because that's a bug whoan isn't that much famous so now let me just write something else like I don't know uh programming or something now let me just click on that and here you can see it's gives us that anyways so that was a huge course and thank you so much from the bottom of my heart for watching this amazing course and if you have any idea of any other courses so feel free to comment there below and I'm going to do my best to make a separate courses on them and if you want me to build another project like a huge full stack um project or if you want me to cover like nexj the Bey or the next router or any other tools so I am here baby just comment that below and I'm going to do my best to make a separate courses on them so I just want to say like thank you so much from the bottom of my heart for watching my content and supporting my channel and finally I just have only one request from you guys if you like my content so yeah you can obviously subscribe to my channel they like highly appreciate that but please if you follow me on GitHub that's going to be just like a word to me that's going to means a lot like that's going to mean every single thing for me if you follow me on GitHub and here is my GitHub repo GitHub uh github.com here you can see I am here not this one let's just remove the and gab hus God damn it let me just uh write a GitHub hen uh web dev right here and here you can see it's going to brings us to this uh GitHub repository right here so please if you follow me on GitHub that's going to mean a lot to me and thank you so much once again from the bottom of my heart and see you in the next course bye-bye take care love you all

Channel: HuXn WebDev

Views: 29,448

Keywords: vue.js tutorial, vue.js tutorial composition api, vue.js 3 tutorial, vue.js tutorial for beginners, vue js tutorial for beginners, vue.js composition api plugin, vue.js composition api, vue.js 3, vue.js composition api example hooks, vuejs, vuejs tutorial, vue 3 composition api, vue composition api tutorial, learn vue.js, vue.js course, vue tutorial for beginners, vue.js, vue.js framework, composition api, vue projects for beginners, vue.js function api tutorial

Id: pgWZLS75Nmo

Length: 374min 30sec (22470 seconds)

Published: Fri Jan 12 2024