Coding

COMPONENTS | VueJS | Learning the Basics

  • 00:00:01 welcome to a number of you chairs to
  • 00:00:03 video in this video I want to dive into
  • 00:00:05 something very important components
  • 00:00:08 components are a key concept you can use
  • 00:00:10 in view chess which allow you to build
  • 00:00:13 your application or widget or whatever
  • 00:00:15 you're building from a couple world from
  • 00:00:18 a pool of reusable pieces of components
  • 00:00:22 you can build these components on your
  • 00:00:24 own and each component holds a template
  • 00:00:26 and D business logic belonging to the
  • 00:00:29 template into that component therefore
  • 00:00:30 in this video I want to dive into the
  • 00:00:32 very basics but on this channel I will
  • 00:00:34 have more videos on components where we
  • 00:00:37 will learn how to use them in bigger
  • 00:00:39 projects and which advanced features
  • 00:00:42 they have how we can let them
  • 00:00:43 communicate and so on now let's start
  • 00:00:45 with the basics first though I'm in
  • 00:00:48 chase fully here again with a very basic
  • 00:00:50 setup where I have my app control by my
  • 00:00:53 view instance down there and now let's
  • 00:00:55 let's make this app a little bit more
  • 00:00:58 interesting let's add a horizontal line
  • 00:01:00 and there add another div and in this
  • 00:01:03 div let's say I'm going to have a
  • 00:01:06 paragraph where I say username : max
  • 00:01:10 something like that now not that
  • 00:01:13 interesting I guess but it's a bit more
  • 00:01:15 content now let's also add a new field
  • 00:01:19 here which is the user name field in the
  • 00:01:21 data object which is max which allows me
  • 00:01:25 to output the user name dynamically here
  • 00:01:27 at least so a bit better at least we see
  • 00:01:29 the same but now with dynamic data now
  • 00:01:32 imagine that this would be some kind of
  • 00:01:35 user is sectional which you want to
  • 00:01:37 repeat over and over again so to
  • 00:01:39 actually see this I'm going to not stall
  • 00:01:43 as I'm going to give this a class of the
  • 00:01:45 user and set up this class in the top
  • 00:01:48 right corner where I can configure my
  • 00:01:50 CSS styles here we can give this user
  • 00:01:53 class some very simple styling let's say
  • 00:01:56 a border of one pixel solid and light
  • 00:01:59 gray maybe a background color of white
  • 00:02:05 and maybe some light petting of ten
  • 00:02:07 pixels let's see how that looks
  • 00:02:09 better so that is our user object and
  • 00:02:12 now we not only have one use
  • 00:02:14 but multiple users so let's remove user
  • 00:02:18 name and instead have users and now with
  • 00:02:21 users we have an iterate clearly and in
  • 00:02:25 this array we want to have some objects
  • 00:02:26 where each user simply has a user name
  • 00:02:28 like max and then let's add to everyone
  • 00:02:32 so here let's say we also have Chris and
  • 00:02:36 we have a last one with a user name of
  • 00:02:40 Anna maybe now I want to output that of
  • 00:02:43 course and the obvious solution here is
  • 00:02:46 to use v4 to create a loop and to loop
  • 00:02:49 through the array and replicate this
  • 00:02:51 diff and to content as often as we need
  • 00:02:54 to so loop through this and then simply
  • 00:02:57 say we for user in users and here I can
  • 00:03:02 simply then output user user name
  • 00:03:04 referring to the user in each iteration
  • 00:03:06 now that gives me my three parts here
  • 00:03:09 and there's one thing we can already see
  • 00:03:11 this part here is like a contained piece
  • 00:03:15 in our application it has its own
  • 00:03:17 template we could say this div and its
  • 00:03:20 own logic or at least its own data here
  • 00:03:23 so if that were a more complex object
  • 00:03:26 even with some calculations around let's
  • 00:03:28 say a button to edit the user or
  • 00:03:30 something like that then this would
  • 00:03:32 quickly grow and therefore in our only
  • 00:03:34 view instance we would quickly populate
  • 00:03:37 a lot of methods and data fields with
  • 00:03:39 data and methods only related to this
  • 00:03:42 part of our template this dev here so it
  • 00:03:45 would make sense to outsource this into
  • 00:03:47 its own piece of code and of course we
  • 00:03:51 can do this with view jeaious we can
  • 00:03:53 create a new component for that we do
  • 00:03:56 this by accessing the global view object
  • 00:03:58 and then accessing component like this
  • 00:04:00 this will create a global component
  • 00:04:03 which means we can use it at any view
  • 00:04:05 instance application wide so here we
  • 00:04:09 first give this a selector which means
  • 00:04:11 our custom HTML tech you could say and
  • 00:04:14 you would typically prefix this with a
  • 00:04:17 unique well prefixed to make sure you're
  • 00:04:20 not accidentally overwriting some
  • 00:04:22 existing HTML element or something like
  • 00:04:24 that so it could prefix it with app and
  • 00:04:26 then give it the
  • 00:04:28 name of user maybe so this name in the
  • 00:04:30 quotation marks is totally up to you and
  • 00:04:32 that in here we pass an object and now
  • 00:04:35 that's important view component
  • 00:04:37 basically just extends your view
  • 00:04:40 instance so this means this object has
  • 00:04:42 the same fields as your view instance
  • 00:04:45 with one major difference the data
  • 00:04:48 property here is not longer an object
  • 00:04:52 it's now a function it is a function
  • 00:04:54 which now returns an object and this
  • 00:04:56 object again will hold your data so we
  • 00:04:59 have this extra step of having a
  • 00:05:01 function here and we need this because
  • 00:05:03 due to the fact of it extending our view
  • 00:05:06 instance and maybe having multiple
  • 00:05:09 components or at least using this
  • 00:05:12 component here multiple times they would
  • 00:05:14 all share the same object and therefore
  • 00:05:16 we need to make sure that this is an
  • 00:05:19 instance where we make sure that the
  • 00:05:21 object which holds our data which should
  • 00:05:23 belong to a single component is not
  • 00:05:26 shared across all components which use
  • 00:05:29 this selector here so therefore here we
  • 00:05:31 could then simply copy our users the
  • 00:05:34 user property here and insert it here in
  • 00:05:38 the object having the users in this file
  • 00:05:41 now or not in this file in in this
  • 00:05:44 component here I should say so let me
  • 00:05:47 tidy this up so here the users in this
  • 00:05:49 newly created component which again is
  • 00:05:51 like a view instance with this extra
  • 00:05:53 data thing here to make sure we're not
  • 00:05:56 sharing data across same components and
  • 00:05:58 what this allows me to do now is to also
  • 00:06:01 get rid of that I would say but for that
  • 00:06:05 you for me to be able to get rid of that
  • 00:06:08 I also need to set up a template so
  • 00:06:11 let's add a template here by adding the
  • 00:06:13 template property that would have also
  • 00:06:15 been available for the average view
  • 00:06:17 instance here but there we didn't need
  • 00:06:19 it because we automatically fetch our
  • 00:06:21 template here with the LEM property
  • 00:06:24 fetch the element from the dom and use
  • 00:06:26 that as an element but we could have
  • 00:06:28 overwritten it with the template well
  • 00:06:30 here for the component we definitely do
  • 00:06:32 have to override it because we don't
  • 00:06:34 have any other template we're not
  • 00:06:35 fetching anything and we can't so here I
  • 00:06:38 simply will place my template which is a
  • 00:06:40 string and
  • 00:06:41 of course that when I grab that HTML
  • 00:06:43 code and put it in the string and we
  • 00:06:45 have to make sure to put it into one
  • 00:06:47 line here because a string doesn't
  • 00:06:49 supply or support multi-line code you
  • 00:06:52 could use if you were using a
  • 00:06:54 environment where you can work with es6
  • 00:06:56 code you could use template literals
  • 00:06:58 with the backticks
  • 00:06:59 to support multi-line strings but here I
  • 00:07:02 will simply stick to the single quote –
  • 00:07:05 well treat an inline string and we will
  • 00:07:08 in one of the other videos in the
  • 00:07:10 upcoming videos here at maybe at the
  • 00:07:12 point of time you're watching this we
  • 00:07:14 will have a look at how we can find a
  • 00:07:17 better solution because clearly this is
  • 00:07:19 not an optimal template if you get more
  • 00:07:22 code than what we do have here well
  • 00:07:25 anyways with that in place what I can do
  • 00:07:28 is I can simply replace this code in my
  • 00:07:30 template of you view instance with app
  • 00:07:32 user the selector is set up here and if
  • 00:07:36 I now in control enter we see nothing
  • 00:07:39 the reason for this is if we open the
  • 00:07:42 error lock that there seems to be some
  • 00:07:45 problem with the for and there is one
  • 00:07:48 restriction you have to be aware of in
  • 00:07:50 this template here in the template of
  • 00:07:53 any component you must only have one
  • 00:07:56 root element now you could say we
  • 00:07:59 clearly do have one element we have one
  • 00:08:00 div but we're looping through it with
  • 00:08:02 the four so in the end we will have more
  • 00:08:04 than one div so we simply have to wrap
  • 00:08:07 this in a novel outer div so that we
  • 00:08:10 only have one root element that's an
  • 00:08:12 important restriction if we now add
  • 00:08:14 control-enter we see the free user
  • 00:08:15 sections and now we got a working
  • 00:08:18 application using our own component
  • 00:08:20 where we outsource this user related
  • 00:08:23 code now with that in place the great
  • 00:08:26 thing about components is we can simply
  • 00:08:28 reuse them so add an average or hit
  • 00:08:31 control enter again and on we go that's
  • 00:08:33 the great thing about components we can
  • 00:08:35 reuse them now of course the major
  • 00:08:37 restriction here is this ugly inline
  • 00:08:40 string template if we have anything more
  • 00:08:43 than the very simple code we're using
  • 00:08:45 here well this will quickly be no fun to
  • 00:08:47 work with it that's the reason why the
  • 00:08:50 next video may be already out at the
  • 00:08:52 point of time you
  • 00:08:53 this will cover a much better way of
  • 00:08:56 working with view components and their
  • 00:08:58 templates it will also leave jsfiddle
  • 00:09:01 and start setting up a real development
  • 00:09:04 environment and workflow nonetheless
  • 00:09:06 what we saw here is how easy it is to
  • 00:09:09 set up components how easy it is to work
  • 00:09:11 with components and what their major
  • 00:09:14 advantages containing your code in a
  • 00:09:16 single reusable piece or part you can
  • 00:09:19 then use wherever you need it and don't
  • 00:09:22 have to crowd your main view instance
  • 00:09:25 with all that logic one important
  • 00:09:27 annotation here you can also set up
  • 00:09:30 components locally by adding the
  • 00:09:32 components property to the view instance
  • 00:09:34 and then having the selector as the
  • 00:09:36 property name like app user and then as
  • 00:09:39 a value here the object which you pass
  • 00:09:43 here as an argument to your view
  • 00:09:47 component method so that's the
  • 00:09:48 alternative if you know that you want to
  • 00:09:50 use the component only locally in that
  • 00:09:53 view instance here well then you would
  • 00:09:55 or you could set it up locally otherwise
  • 00:09:58 do it globally like here to make sure
  • 00:10:00 you can use it in any instance or in any
  • 00:10:03 component you have in your application
  • 00:10:06 see you in the other videos bye