![]() ![]() Both the variables are initialized to 0 and the display is seen in the output above. Both are incremented when the button is clicked. There are two variables defined in the clicknum and clicknum1. ![]() The first button calls the method “buttonclickedonce” and the second button calls the method “buttonclicked”. The button with Click Once label has added the once modifier and the other button is without any modifier. In the above example, we have created two butttons. Let us use it in an example and understand the working of the once modifier. We need to add dot operator while calling the modifiers as shown in the syntax above. onceĪllows the event to execute only once. Vue has event modifiers available on v-on attribute. When we mouseover, the color will change to green as shown in the following screenshot. Similarly, the following code is used to change it back to the original color. Using the stylobj variable, we are changing the color to green. In changebgcolor, we are changing the color to green using the following code. The same variable is binded to the div using v-bind:style = ”styleobj” We have created a styleobj variable and given the required style to be assigned to the div. Two events - mouseover and mouseout - is assigned to the div as shown above. Hence, during mouseover, a method is called changebgcolor and once we move the mouse out of the div, a method is called originalcolor. On mouseover, we are changing the color to green, and on mouseout we are changing the color back to red. It has been given a background color red. In the above example, we have created a div with width and height as 100px. We will now check one more event mouseover mouseout. On the click of the button, it will call the method ‘displaynumbers’, which takes in the event and we have consoled the same in the browser as shown above. There is a shorthand for v-on, which means we can also call the event as follows − The following code is used to assign a click event for the DOM element. Return this.total = this.num1+ this.num2 Of course, dynamic components are very powerful, and you can use them to render your own components too.V-on is the attribute added to the DOM elements to listen to the events in VueJS. With this, we can easily extend our component to also render a router-link (or nuxt-link if you are using Nuxt). (If you come from React, it will probably feel more natural to you to use a render function, and that's a perfectly valid solution as well, but I think that dynamic components are a more vuey solution) And don't worry about adding href to a button, because if the value is falsy the attribute won't be rendered Something like this: export default īeautiful! Plus, we avoid having to repeat the class attribute, we move the logic to a computed property… overall is much cleaner. We are using Vue, because Vue is cool, and we create a Btn component. I'm not going to talk about that today, for the sake of this post let's assume that this is 100% correct and that's how we want to work. Since global stuff in JavaScript is evil, we assume that global stuff in CSS is evil too. Easy, right? Nowadays, some people think that global classes are not cool anymore. button class that could be used anywhere in our application and that's it. In the good old days, we used to style things using classes. You know, a button that can be clicked and multiple things can happen: go to a different page, open a new tab, submit a form… But, even though it can do so many different things, a button should always look like a button, right? If you are building any kind of application, it's very likely you have a Button component. ![]()
0 Comments
Leave a Reply. |