Coding

EVENTS & METHODS | VueJS | Learning the Basics

  • 00:00:01 welcome to the amazing view Jas in this
  • 00:00:04 video I want to have a look at how we
  • 00:00:06 can use events in our view chase
  • 00:00:09 application I prepared this application
  • 00:00:12 you might recognize it from one of my
  • 00:00:14 other videos and here all ideas output
  • 00:00:17 this title data property here now I want
  • 00:00:21 to change this I want to actually enable
  • 00:00:23 the user to do something in our
  • 00:00:25 application to dynamically update the
  • 00:00:28 title hence updating this Dom or the
  • 00:00:32 page we see here because you chase of
  • 00:00:34 course is also very capable of listening
  • 00:00:36 to user events so let's work on that so
  • 00:00:39 we get the title here now let's say we
  • 00:00:42 want to change this title whenever I
  • 00:00:45 click a button so let's add a button
  • 00:00:47 first this button here well let's give
  • 00:00:50 it a text of change title and then we
  • 00:00:54 want to change the title to a fixed new
  • 00:00:57 value now of course you could also add
  • 00:00:59 an input field and listen to let's say
  • 00:01:01 the keydown keyup or input event the
  • 00:01:04 approach will be the same but let's
  • 00:01:06 first start it how can we listen to an
  • 00:01:09 event this is a button and with
  • 00:01:11 traditional JavaScript we could add the
  • 00:01:14 on click listener or something like that
  • 00:01:16 but with view chairs it works a bit
  • 00:01:19 different instead of listening to on
  • 00:01:22 click or something like that
  • 00:01:23 we need a directive a directive is a
  • 00:01:26 instruction we place in our template and
  • 00:01:29 the part of the Dom we control for
  • 00:01:31 instance here and view choice will
  • 00:01:34 recognize this instruction just
  • 00:01:36 directive and know what to do with it
  • 00:01:38 now the directive we need here is a
  • 00:01:40 built-in one one with which view chairs
  • 00:01:42 ships which is called V on the we – at
  • 00:01:47 the beginning basically tells you J as
  • 00:01:49 oh I should take care about this it
  • 00:01:51 doesn't seem to be a normal HTML
  • 00:01:53 attribute and on then is the name of the
  • 00:01:56 directive now on is a built-in directive
  • 00:01:59 which basically is used for listening to
  • 00:02:01 events to this directive we need to pass
  • 00:02:04 an argument which we do by adding a
  • 00:02:06 colon and this argument now is the name
  • 00:02:10 of the UN to which you want to listen
  • 00:02:11 now the name
  • 00:02:14 or the event to which I want to listen
  • 00:02:16 is called click because I want to react
  • 00:02:18 to whenever I click this button
  • 00:02:21 therefore here we now add equal sign and
  • 00:02:25 then to quotation marks to now specify
  • 00:02:26 which code to execute whenever this
  • 00:02:29 event which we're listening here occur
  • 00:02:31 is now we can execute some code in there
  • 00:02:34 like let's say title equals and then
  • 00:02:36 with single quotation marks new title to
  • 00:02:39 change it if we now add control enter we
  • 00:02:42 see this button and if I hit this button
  • 00:02:44 we see that title was updated to new
  • 00:02:47 title this is the reactivity view Chaz's
  • 00:02:52 great ad we change title in one place of
  • 00:02:55 our application and that of course
  • 00:02:57 changed it in this data object and that
  • 00:02:59 lat view chairs to automatically updated
  • 00:03:03 in our displayed page so in our Dom
  • 00:03:07 because we're outputting it here wire
  • 00:03:09 string interpolation this is how we can
  • 00:03:12 listen to events and this is how view
  • 00:03:15 chess then well knows what to update in
  • 00:03:18 the Dom now an alternative to setting
  • 00:03:22 the title here between the quotation
  • 00:03:24 marks would be to execute a method so
  • 00:03:27 let's execute the change title method
  • 00:03:30 and in order to have this method we need
  • 00:03:33 to add a new property to the view
  • 00:03:35 instance this is the methods object so
  • 00:03:38 where data is also reserved word so is
  • 00:03:41 methods and method simply stores all the
  • 00:03:44 methods this view jeaious instance knows
  • 00:03:47 so all the methods you want to trigger
  • 00:03:49 from within our template up here they
  • 00:03:52 have to be stored in this methods object
  • 00:03:54 therefore here what we want to do is set
  • 00:03:58 up the change title method in here and
  • 00:04:00 now you may use es6 syntax so you can
  • 00:04:04 write this method like this and as a
  • 00:04:06 side note if es6 or javascript is
  • 00:04:09 something you don't feel 100%
  • 00:04:10 comfortable well you might want to dive
  • 00:04:13 a little bit deeper into it and you will
  • 00:04:15 find some useful links to both videos as
  • 00:04:17 well as possible coaching you could book
  • 00:04:20 not by me though but from a different
  • 00:04:22 page in the description of the video but
  • 00:04:25 back to our code here we
  • 00:04:27 have our title or our change title
  • 00:04:30 method and in there I now want to simply
  • 00:04:34 execute the same code I ran before the
  • 00:04:37 one a targets title though that will not
  • 00:04:40 work because title here would look for a
  • 00:04:43 title variable in this method instead I
  • 00:04:46 have to say this title and now this
  • 00:04:48 would look strange to I'd imagine
  • 00:04:49 because we would imagine that this
  • 00:04:51 refers to the methods object well turns
  • 00:04:55 out behind the scenes vue.js does some
  • 00:04:58 magic there and whenever you reference
  • 00:05:00 something with this inside of the view
  • 00:05:03 instance as we do here it will
  • 00:05:05 automatically refer to the view instance
  • 00:05:07 as a whole and all the data properties
  • 00:05:11 all your methods and so on are
  • 00:05:13 automatically proxied by view chairs on
  • 00:05:17 this instance top-level so this now
  • 00:05:20 refers to our whole instance object here
  • 00:05:24 and it turns out that view chest kind of
  • 00:05:26 gives us access to all our data
  • 00:05:29 properties and all our methods on this
  • 00:05:31 overall top-level object some magic done
  • 00:05:35 behind the scenes so here I can then
  • 00:05:37 also say change title so if we see a
  • 00:05:39 difference and if we now hit control
  • 00:05:42 enter again and click on change title we
  • 00:05:45 see change title here now executed
  • 00:05:48 through a method to which we point here
  • 00:05:50 in our click listener