In Web Development
06_Vue Js Project_Compositing Components - read the full article about Vue Js update, Web Development and from Kamya Simon on Qualified.One
Youtube Blogger
Thank you so much for watching these videos my name is Kamya Simon and lets proceed. Hello there how are you? We are now going to look at components. Now components is like a collection of different views and fields that calculate different outputs and then they display it on the same window through one little component. Alright so what were going to do were going to come to our source and then ill right click and create a folder and i call that folder components okay so the folder can be named anything but universally we want any other programmer to come and then they identify whatever we need so inside components i can create different items for example im going to create a pages okay uh if youve used oh i just want to create a folder sorry let me first edit this yes i want to create a folder called pages inside there okay new folder called pages its my brain so ill be talking about is it uh view next or next something of the sort because it or it runs on top of uds and it arranges most of the things for us so pages is under components okay and its empty thats why i have that issue now uh one of the thing i want to do now ive separated pages from companies but im going to create two main components one is going to be the head okay so im going to call it head dot view so thats one component then im going to create the body or the footer so let me create one let me see i just want to create it here okay so which is going to be maybe body do it view this is unnecessary it depends on how you want to arrange your own what your own project okay so im going to go to head.vue up here and im going to, first of all, create our basics so i want to have a template and this template is going to have a div okay and then in this Div im going to have maybe a ui okay and inside the ui im going to have the usual this items li so im going to have home and then im going to have about and then contact us so home about and contact and ill change this quickly so this is about and contact us contact us now they may appear into this styling and we shall see why and then im going to go to the body okay ill create a template and then ill bring in the image img and remember the source for the image srsc okay zico is assets the assets folder uh let me hope i still have assets and then logo dot png okay let me hope i have that straight great so for me to be able to see these this is what im going to do im going to come to app.js and then input those components in my script so im going to import okay import for example im going to import head on header from and then dot okay so i need to go dot stroke in my components and then i look for that one which is going to behead that view okay so i need now to aim to create a component prop for that okay so header i need to define header so its giving me the error because its always loading since we are using the cli its auto running everything with the server so im going to create now the components i want to call the components and create the components prop so which component is going to be header okay and then i need to put a comma here all right so if i save all right so i need to now call header up here so ill remove my name or let me retain it so let me remove the name here all right so this is the right way for doing the thing but we are missing one thing we are missing what the so-called camel casing so when i input the component i need to give this a capital letter so this will be capital h okay and then the same here capital h and then i also call this as capital h and then i save all right great so we have our menu up there and im just going to do some little styling to change the way its displayed now i have to do the styling in the original component so ill just call a style okay so ill have it scoped no worries and then what im going to do and let me call this i think menu so ill say the dot menu okay so let me first import the class menu so that whatever changes we do update instantly so menu okay so dot menu so its giving me an error no worries so dot menu and then what i want from menu i want it to float left okay so float will be left and then i save that is great and then i need to make sure that the menu icons display inline so ill do a dot menu and then l i call li because this is the list item inside the class of menu and then ill give it a display let me say display and the display will be inline all right so let me save great so i can also do uh a margin so margin left so it will be sorry imagine left so imagine left and im going to give it maybe four pixels so 5px great so you can see the space so ill come with bootstrap and ill put things right but let me give it 20px great so you can see the space so that is it and then let me go and import the body so ill come back to app.js and then i import another one solid import okay remember we need camel casings our input body from body from okay components again and then stroke body all right so i need to import body here its warning me that its not used so that it is rendered up there so call in body so great so i can come here below this and i call body and when i save i do have body but the image is not called so let me check why the image is not called i do think in my assets folder its pogi logo i just need to verify that i have that all right and what i need to do is since im already in the components folder and the source is here i need to go out of components so ill put two double dots sorry and then there we are we have our body we have our so i can even go ahead and go to the ill put a div here div and ill do some quick styling so we differentiate okay so ill give style here of a background color which will be maybe light green all right so thank you so much for watching this video lets meet in the next video i think were going to continue now expounding on our item so i think its now high time we started the project so that we do we do not waste time on to learning the basics of view but rather progressing with one by one item because the whole intention is to see how to work out with the project otherwise we have a lot to cover we have ux we have view router and i think i really think we need to do that so ill also be installing bootstrap view in the next video and also installing view router and view it so that we see you
Kamya Simon: 06_Vue Js Project_Compositing Components - Web Development