Explanation of directives v-else and v-on

Filip Jerga
A free video tutorial from Filip Jerga
Software Engineer
4.6 instructor rating • 16 courses • 28,772 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 back. It was like trains or those directives in these like Uralla continue and I will show you a new arms. All right. Let's start and let's find your message. So here it is our message we are displaying ever it's text displayed under this deal. Let's create a new element. These will be but then and let's right here. Hide message so hide message like these. And I would like to click this button and I would like to hide it is the message we are displaying here so we can use a year in your directive. So let's trade on a button. A new directive. And this one is called me. And on it. So we dash on the legalese and on that click solar the radio call and I click. All right. Equals sign. And the Colts so double codes here. It can be also single quotes. So doesn't matter it's up to your preference if you want to use single quotes or a double Globe quotes. OK. So right here. Let me click these button. I want to execute it here so functionally. So I want to assign to each disease played false value. So is that displayed. I will assign here false. So then I will look legalese but then it's of display it will be false. This means this conditions will not pass any more. And it will hide this message. OK. So let's say it is let's go back to our browser's. All right. Don't forget the refresh page. Sorry front page. Let's click here. Hide a message and you can see. Message is amazing. OK. Let's go back to our economy at Davos and I will show you a new directive here. So just under this deal I will ride here a lot more these like this and let's ride the here. Then a message like this is let's save these let's go back to our browsers let's refresh your browsers and you can see here that the message is displayed all the time. So hide message here that a message is here. OK. So also conditionally I want to also hide these message and displayed depending on the value of our Easter eggs displayed variable. So under these we if we can use direct the else somebody else and let's say it is. So if text is not displayed this means that these conditions will not pass by the will jump inside of the else. So these hidden message will be displayed. OK so let's go back to our browsers and let's click here. Hi to my city. But don't forget to refresh your browser. OK let's go here. Hide a message and you can see here. Then a message is on the screen. Perfect. So now conditionally we are hiding and displaying these messages. So one more time if text is displayed we are displaying in this message from message variable and we are displaying these hidden message. If it's taxes but is false they are not passing this first condition but we are jumping in we. Else because if condition is not met we will jump to next. Else condition and these the message is displayed OK. Let's continue. But I would like to improve this bank penalty. I would like to tackle these these still stays here. So when I look like. But then here on garlic I want to change if steaks displayed too true or false depending on their current is steak is displayed steak. So what I can do I can I can override it to exist play to be a steak is splayed opposite value so you can write a stack of displayed an exclamation mark. So I am still assigning all the time assigning opposite value of current steaks displayed the value this season may be a little bit confusing for you but I will debug it for you in the art console. So let's say we like these. Let's go back to our browser's refresh page. And now when I click here a high the message you will see I am displaying the hidden message. And when I click it one more time I am displaying hell of the use I'm toggling between these two states here. As you can see here. So what I'm basically doing. Let's inspect these I will create. Here does very able just to show you what I mean. Well it's great here new variable and let's call it var is displayed so is displayed like this. OK. This will be initially let's say true. So now we have either displayed value and you can see this is displayed variable has a true value. But I will write is displayed and I will provide here an exclamation mark in the front is displayed will be false. Right. So when I will assign to is displayed opposite the value of is displayed. I'm assigning the I'm signings opposing the value of is displayed and I'm overriding basically the same value. So when I will override this you will see is displayed is false. I will do it one more time. These will be true. So I am struggling between these two states I'm over overriding is displayed by the opposite value of God and the value of is plate it's very common practice you will see a lot of coding that you are using exclamation mark in order to provide opposite value. OK. So that's been said let's continue and let's move this functionality from these then blade from HDMI to actually to our view instance. So it even showed you before we can create a year also functions or it's called the methods. It's up to you of each naming you will choose. I would call it sometimes my fault sometimes functions but I'm saying that so yeah it's the same thing. OK but in your instant you need to specify methods. So I will write here a new kind of a method. So on the same level as they are data so let's find your ending bracket for a date that you can see here. Here is ending bracket threat data and I will specify your methods like it is perfect and I will create here new method or if you if you like function and let's call a function. Yes. All right these very nasty faction. So you'll function like this. OK. Any function is created. So what we want to delay this function. I want to Giles let's say our on message. So you'll write the alert and let's write here some yellow. OK perfect. Let's say what is not our function. Yellow let's go to our browsers. OK let's inspect these. Let's go to our consulate's access our view instance up let's access our function yellow and let's execute it. So brackets and we won't execute yellow function. So let's again and appeal is not a function because I forgot to refresh my browser so refresh browser and out again up. Yellow brackets and you can see the are displaying these alerts. OK. What I want to do and actually they'll do the next lecture because I would like to keep lessons very short. So what I would like to do I would like to move these functionality from here from this into on a clique. I would like the movie to this function and instead of this assignment I would like to call this function in here. So guys I have to see you in a lecture.