Method Processor
You can use the v-on command to listen for DOM events:
<div id="example"> <button v-on:click="greet">Greet</button></div>
We bind a click event handler to a method greet. The following is the method defined in the Vue instance:
var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // Define methods in the `methods` object: { greet: function (event) { // In the method `this` point to vm alert('Hello ' + this.name + '!') // `event` is a native DOM event alert(event.target.tagName) } }})// You can also call the method vm.greet() in JavaScript code // -> 'Hello Vue.js!'Test it yourself
Inline statement processor
In addition to directly binding to a method, you can also use inline JavaScript statements:
<div id="example-2"> <button v-on:click="say('hi')">Say Hi</button> <button v-on:click="say('what')">Say What</button></div> new Vue({ el: '#example-2', methods: { say: function (msg) { alert(msg) } }})Similar to inline expressions, the event handler is limited to one statement.
Sometimes it is also necessary to access native DOM events in the inline statement processor. You can use the special variable $event to pass it into the method:
<button v-on:click="say('hello!', $event)">Submit</button>
// ...methods: { say: function (msg, event) { // Now we can access the native event object event.preventDefault() }}Event modifier
In event processors, event.preventDefault() or event.stopPropagation() is often required. Although we can easily do it within a method, it would be better to have the method be pure data logic without handling DOM event details.
To solve this problem, Vue.js provides v-on with two event modifiers: .prevent and .stop. Do you remember that the modifier is the instruction suffix that starts with the dot?
<!-- Prevent the click event from bubbled --><a v-on:click.stop="doThis"></a><!-- Submit event no longer overloads the page --><form v-on:submit.prevent="onSubmit"></form><!-- Modifiers can be concatenated --><a v-on:click.stop.prevent="doThat"><!-- Only modifiers --><form v-on:submit.prevent></form>
1.0.16 added two additional modifiers:
<!-- Use capture mode when adding event listeners --><div v-on:click.capture="doThis">...</div><!-- Callback is triggered only when the event is triggered on the element itself (not a child element) --><div v-on:click.self="doThat">...</div>
Key modifier
When listening for keyboard events, we often need to detect keyCode. Vue.js allows adding key modifiers to v-on:
<!-- vm.submit() is called only when keyCode is 13 --><input v-on:keyup.13="submit">
Remember that all keyCodes are difficult, Vue.js provides alias for the most commonly used keys:
<!-- Same as above-><input v-on:keyup.enter="submit"><!-- Abbreviation Syntax--><input @keyup.enter="submit">
All key alias:
•enter
•tab
•delete
•esc
•space
•up
•down
•left
•right
1.0.8+: Supports single-letter key alias.
1.0.17+: You can customize the key alias:
// You can use @keyup.f1Vue.directive('on').keyCodes.f1 = 112Why listen for events in HTML?
You may have noticed that this kind of event monitoring method goes against the traditional concept of "separation of concern". Don't worry, because all Vue.js event handling methods and expressions are strictly bound to the ViewModel of the current view, and it will not cause any maintenance difficulties. In fact, there are several benefits to using v-on:
1. Scan the HTML template and you can easily locate the corresponding methods in JavaScript code.
2. Because you don't have to manually bind events in JavaScript, your ViewModel code can be very pure logic, completely decoupled from the DOM, making it easier to test.
3. When a ViewModel is destroyed, all event processors will be automatically deleted. You don't have to worry about how to clean them up yourself.
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.