Coding

BINDING HTML ATTRIBUTES | VueJS | Learning the Basics

  • 00:00:01 welcome to the world of you chess which
  • 00:00:04 is awesome because view GS is great in
  • 00:00:06 this video we're going to have a look at
  • 00:00:09 how we can dynamically bind attributes
  • 00:00:11 of elements and we'll also have a well a
  • 00:00:15 little addition to events let's put it
  • 00:00:18 like this so let's dive right into it
  • 00:00:19 this is the application with which I'll
  • 00:00:22 work a very simple application it has a
  • 00:00:25 div with which holds my app with the
  • 00:00:28 idea which I control with this view
  • 00:00:30 instance this view instance only has one
  • 00:00:32 property in the data object which is
  • 00:00:35 named CSS class and an empty string
  • 00:00:37 initially and then I'm outputting this
  • 00:00:39 string up here in my template and I have
  • 00:00:42 an input field where a listen to the
  • 00:00:44 input event but I'm not doing anything
  • 00:00:46 up on well typing the first thing I want
  • 00:00:49 to do is I want to store it text the
  • 00:00:51 user enters into the input in this CSS
  • 00:00:55 class property here I can do this by
  • 00:00:58 setting CSS class equal to well to what
  • 00:01:02 I somehow need access to the value of
  • 00:01:05 this input well in JavaScript whenever
  • 00:01:09 the input event gets fired or whenever
  • 00:01:12 any event gets fired we get a default
  • 00:01:15 event object passed to the event
  • 00:01:17 listener that's nothing view J's
  • 00:01:19 specific that's just JavaScript and how
  • 00:01:21 the Dom works this default event object
  • 00:01:24 we get has in the case of the input and
  • 00:01:27 many other events the target of this
  • 00:01:30 event so on which element was this event
  • 00:01:33 executed for example the target of an
  • 00:01:36 input event would be the input element
  • 00:01:37 where we type something in so we need
  • 00:01:41 access to this target to get access to
  • 00:01:43 the value of this input element now for
  • 00:01:46 that we need access to this default
  • 00:01:48 event object and it turns out in view
  • 00:01:52 che as we can access this data which is
  • 00:01:56 passed through an event like this
  • 00:01:58 default event object we get
  • 00:01:59 automatically by accessing dollar sign
  • 00:02:02 event here between the quotation marks
  • 00:02:04 in our Veon directive now here's
  • 00:02:07 something which is really important it's
  • 00:02:10 not called dollar sign event because
  • 00:02:12 we're accessing this
  • 00:02:14 fault event object the other sign event
  • 00:02:17 is simply a local variable kind of
  • 00:02:19 created by view chairs which gives us
  • 00:02:22 access to which ever data our event
  • 00:02:26 gives us automatically now this data we
  • 00:02:29 get helps to be the event object in this
  • 00:02:32 case but as you might know you can also
  • 00:02:36 create custom events and view chairs
  • 00:02:38 something I'll also cover in another
  • 00:02:39 video now in such a case you can pass
  • 00:02:42 your own data and you would still access
  • 00:02:44 this own data through the dollar sign
  • 00:02:47 event very variable here because again
  • 00:02:49 dollar sign event really only refers to
  • 00:02:52 the data passed by the event to which
  • 00:02:55 you're listening so here this happens to
  • 00:02:58 be this built-in event object and
  • 00:03:00 therefore we can access the target of
  • 00:03:03 this event target is a property D
  • 00:03:05 default javascript event object has and
  • 00:03:07 then the value of the target value is a
  • 00:03:10 property and input element has in
  • 00:03:12 JavaScript so normal Dom property of a
  • 00:03:15 input element and well we know that
  • 00:03:17 event target is an input element so this
  • 00:03:20 gives me access to this value and this
  • 00:03:23 means that now if I type something here
  • 00:03:25 like test we see it appear down there
  • 00:03:28 this is great but do you wonder why I
  • 00:03:32 named it CSS class well because I want
  • 00:03:36 to style this paragraph dynamically I
  • 00:03:38 want to allow myself to input the CSS
  • 00:03:42 class which I want to attach to this
  • 00:03:44 paragraph so I want to choose something
  • 00:03:45 like this I do have my class attribute
  • 00:03:48 and there we could have let's say our
  • 00:03:50 double curly place braces and then CSS
  • 00:03:53 class and now if I had here in the top
  • 00:03:56 right corner in these CSS part if I add
  • 00:03:59 let's say a red class I want to set the
  • 00:04:01 background color to red and I also want
  • 00:04:05 to add let's say a blue class that we
  • 00:04:07 have something to play around with so
  • 00:04:09 here we want to set the player not the
  • 00:04:11 black ground the background color to
  • 00:04:15 blue and what I want you to happen now
  • 00:04:18 is that if I type something here like
  • 00:04:20 red the red class gets attached here but
  • 00:04:24 if we inspect it well oh in
  • 00:04:27 that we got to double curly braces so
  • 00:04:30 somehow this does not work in the same
  • 00:04:31 way as it works here when we use it in
  • 00:04:35 normal text and not inside of a CSS
  • 00:04:37 attribute well that's just how futures
  • 00:04:40 works we can't and we must not use curly
  • 00:04:43 braces here when you well when accessing
  • 00:04:46 a normal attribute when accessing
  • 00:04:49 something else then just plain text as
  • 00:04:51 we do here we instead need to bind this
  • 00:04:54 class property or attribute here
  • 00:04:56 dynamically and we can do so by passing
  • 00:05:00 and it as an argument to a directive UJS
  • 00:05:03 knows it's kind of the same as with the
  • 00:05:06 event here we're passing the default
  • 00:05:08 input method or excuse me event which
  • 00:05:12 exists in JavaScript and in the Dom
  • 00:05:14 we're passing this event as an argument
  • 00:05:17 to devient directive now I need to pass
  • 00:05:20 the class attribute to another directive
  • 00:05:22 this directive is called we bind and I
  • 00:05:25 pass it with a colon and with that I'm
  • 00:05:27 telling view chest
  • 00:05:29 I want to bind some attributes
  • 00:05:30 dynamically on this paragraph item and
  • 00:05:33 the attribute I want to bind directive
  • 00:05:36 dynamically excuse me as class now this
  • 00:05:39 allows me to simply output the name of
  • 00:05:42 the property the value to which I wanna
  • 00:05:44 bind between the quotation marks here
  • 00:05:47 and this of course refers to my CSS
  • 00:05:49 class property in the view instance now
  • 00:05:52 if we reload this watch what happens if
  • 00:05:55 I type read it becomes red and if I type
  • 00:05:58 blue it becomes blue because if we
  • 00:06:01 inspect this we see that as I type here
  • 00:06:05 the CSS class which is attached to the
  • 00:06:08 element changes and this is how you can
  • 00:06:12 bind attributes of elements reactively
  • 00:06:15 with the bind telling view chest
  • 00:06:18 yeah please attach the normal class
  • 00:06:20 attribute that shouldn't change but the
  • 00:06:23 value of that attribute that is dynamic
  • 00:06:25 from now on and we achieved this with
  • 00:06:28 rebind here