06_Vue Js Project_Compositing Components

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
Kamya Simon
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