Introduction to Vue components

Filip Jerga
A free video tutorial from Filip Jerga
Software Engineer
4.6 instructor rating • 16 courses • 28,718 students

Learn more from the full course

The Complete Vue JS Developer Course – inc. Vue JS 2!

Build real web apps with Vuex, Router, Node! Master Vue Js and Vue JS 2!

43:55:45 of on-demand video • Updated July 2020

  • Develop powerful, modern, real-world web applications with Vue JS 2 and Node
  • Completely understand the processes and concepts of Vue JS 2
  • Use gained knowledge to create your own Web Applications
  • Become fluent in concepts and tools like Vuex, MongoDb, Sockets, Authentication
English [Auto] Hey guys. Welcome. Here in the electric grid a new forum to create a new goal in these lecture will continue. We'll get a break from our forum and I will show you how we can separate your functionality into separate components. So let's see what we can separate here. Let's call them here. And here we have activities so I can separate all this golden era of an activity two separate component. OK. So let's do it. Let's navigate to our folders here on the left side. And let's create a new folder so let's draw a new folder and let's call it components components here. Perfect. And into the components folder I will create a new file so a new file here. And let's call it activity items some activity item like it is an activity item and DOJ is perfect and I will write a year of some code. So right here of the usual component all right component these that function and inside we will provide for as value. And these will be name of our components so they will be active with the item. So the ride their activity and dash item and these in name is up to you. You can choose a different name if you want. For me it is going to be activity item. OK. And the next value will be object. So specifying your object. And the first I will specify your props and I will talk about props in a second. So the rather does it props for now. And these will be empty array for now. OK. And a second value will be template template like these. And let's write here of tactics. So Deeks alive in these OK. Perfect. So these are component activity item. And actually let the writer here as some so much the analysis. All right. Here Adriana. Ladies and on the right here I am activate these items I am activity I am perfect. Well let's say Liz and I we can import this code inside of our index HDMI. So I've go to our index HDMI out. And the first let's import this script. So just under these a view the script I will copy this. All right. Let's remove these as I see value and let's provide a new path. So these will be the same folder into the components. So Dog and slash internal components folder. And we want to import our activity activity item perfect. And I will negatives slightly bigger. Perfect. And it is it should be activity item. Yes. So now be important are a new component. And we can use this component inside of our HDMI line here. So when you want the reference or a compliment you can simply just write it like these this activity and dash them and close it. Very simple. So the area fencing it these component under our name is specified here are with the item you can see activate the item here. Let's say what is it let's go back to our browser as well let's rephrase this. And you can see here. I'll close these I am activate the items here. Perfect. So these are a new component but we want to do something different with this component. OK. So let's go back to our icon and get it for us and we'll clear this little bit more aside Larry mode is activate the item from here actually. OK so either remove this and let's call it being invisible article. So I will copy these will article from year let's copy then actually began. Got it from. So. Got it from here. Now let's go to our activity item and let's remove this Adriana and let's baste everything here. They see the year and actually began in the deep more nice sir like these perfect. That's amazing about the venue will save everything. Now let's go back to our browsers. You will refresh these. You can see we are getting nothing. Here I am and I will inspect these I should see some at or here and actually I don't see any error but I recall these not not displayed on the screen. So what they need to fix. Let's go back to our economy get a throws and the first I will remove these iteration from here because in Europe we don't have activities as you can see outside Vila copied from here. Let's copy these and we can remove these and let's go to index HDMI. And I will move this iteration over here so I will a frenzy frenzy friends here are activity item. So right here are activate the item we just created. So like this and let's move these iteration on these item legacies so leave for activity in activities of the are iterating. This item in these HD UML would be just base of the effect. Many of those safeties in those still on the Borg because our item here doesn't have activity here. So Soundwave you need the scent activity we are iterating these activate the item. And these these we have our props far so they can send active theme from here to our activate the item and you can do it like this. So let's see. I will ride the RV that bind and I would like to bind here are. So let's bind the activity. OK. So I'm sending a value of activity or activity item and I need to specify to bind and name and there which I want to send is a value here. These props. So I will specify here. Go on and a name will be simply does activity. And I will place it on a second line. So it's more clear what's happening here. So I mean the writing of our activities every iteration I will get a value to activity value from activity I'm sending as a prop to my activity item here. So now I need to specify here at props. And we call these activity languages. So now I have here. This activity we are displaying here activity title and activity operate it. So then I will save everything. Well let's go back to our browser as well as the refreshes and I can see we are displaying these data on the screen again. So let's see what will happen then I will change a naming here. So let's see. Let's go to activate the item and I will changes props for something else I will send. I will change it for I am. For something that doesn't give sense for him for a cat. So now I want to access your cat died. And that cat operated up. So it doesn't make much sense. But let's see what will happen now in the browser everybody friends. And I'm not getting here anything. So why is that. Because they specified they're probably like that but here we are binding Hera activity. So then I've already renamed this activity for I get. So we are specifying this Brooke. Oh my God. Now when I will save these refresh I will. I am getting these values here. So we'll have to get the bag here and pull that dynamic for activity can be the one to what are I'm going to get. So I viola or even these changes. Your props activate the H for activity and a element activity here. Perfect. So now everything to the mark as before. So then I will go back. I've already fresh. I should see my ad data on the screen. All right guys before we close this lecture I would like to show you one more important thing. Let's go big here and let's go to index H demo and a menu item. I think your items you should specify here also attribute of a key. So let's get down here and let's bind your key legalese very simple and this should be something unique. So what do we have a unique on activity. Let's see. Let's see our activities here and let's say unique garrulous for example title here is unique that different title here and this is a different title so we can bind these values to a key there. But I would like to do something else and I will actually specify here a new New Deal that the be an invaluable to be our idea from here. So does let us simply copy like these and let's provide the second activity new idea and do you'll be from here. Very simple guys guys specifying here and you new value of an idea and you kill that idea and we providing this value here. Okay. So now I can bind these value up here to a key so it doesn't write your activity not I.T.. Very simple. Well let's say these let's go back to our browsers right leathery trash. Let's inspect. If you don't have any errors 0 seeing and actually we don't have any arrows I will. All right of these you can see this coming from a network because polygon is not found that's that's OK so that should be from these lecture to our component so now we know how you can separate your functionality and these actually make us a sense then you have a lot of call do you want to keep everything. Does it mean a lot of file but do you want to separate these functionality those separate components. Now you know how to create these components how you how are you going to send that Brooke. So here we are a binding activity for up can referenda this probe here into the virus component and we can get these value and displayed inside Obama template. And also before I close these actually I would like to show you on the shortcuts you'd like to specify here actually be bind and remove these and let's leave does a column in your column here for activity and a key end is much nicer thanks I think because we don't need to write to be bind and you just need to specify just a name of your element you are binding so let's say we like these and verifies with the refresh and you can see everything geyser breaking as before. OK guys. So that should be it. That's it for this lecture and in next lecture will continue again in the forums. So guys I have to see you. Yeah good lecture.