Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how to use v-on instructions in Vue". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to use v-on instructions in Vue".

1. Monitor events

You can use the v-on instruction to listen for DOM events and run some JavaScript code when triggered. The event code can be placed directly after v-on, or it can be written as a function.

The sample code is as follows:

{{counter}}

+ 1-10 const app = new Vue ({el: "# app", data: {counter: 0}, methods: {subtract (value) {this.counter-=value}) 2, input event parameter

If you want to get the native DOM event in the event handler, you can pass a $event parameter when called in the html code.

The sample code is as follows:

Minus 10.methods: {subtract: function (value,event) {this.count-= value; console.log (event);}} .3, event modifier

Calling event.preventDefault () or event.stopPropagation () in an event handler is a very common requirement. Although we can easily do this in the method, it is better that the method has pure data logic rather than dealing with the details of the DOM event.

To solve this problem, Vue.js provides event modifiers for v-on. As mentioned earlier, modifiers are represented by instruction suffixes that begin with a dot.

.stop: event.stopPropagation to prevent the event from bubbling.

.rooment: event.preventDefault, blocking default behavior

.capture: event capture.

.self: represents the element that is currently being clicked.

.once: this event is executed only once.

.passive: telling the browser while the page is scrolling will not block the default behavior, making scrolling smoother.

Case 1: prevent click events from continuing to propagate the 1111 button let app = new Vue ({el: "# app", data: {count: 0}, methods: {divClick () {console.log ("divClick")}, btnClick () {console.log ("btnClick")}}) Case 2: submit events no longer reload the page const app = new Vue ({el: "# app", data: {}})

The above is the most standard code for submitting data, which will be automatically redirected to Baidu after submission, but now there is a demand. We hope that after entering the data, we will not automatically jump to Baidu, but through our own method, we will first process the data and specify the page jump after processing.

The code is as follows:

Const app = new Vue ({el: "# app", methods: {testClick () {})

Here we bind a click event to submit and use .client to block his default behavior

The above is all the contents of the article "how to use v-on instructions in Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.