Methods and Event Handlers
Method Processor
You can use the v-on command to listen for DOM events:
<div > <button v-on:click="greet">Greet</button> </div>
We bind a click event handler to a method greet. The following defines this method in the Vue instance:
var vm = new Vue({
el: '#example',
data: {
name: ''
},
// Define methods in the `methods` object methods: {
greet: function (event) {
// In the method `this` points to vm alert('Hello ' + + '!')
// `event` is a native DOM event alert()
}
}
})
// Methods can also be called in JavaScript code() // -> 'Hello !'
Inline statement processor
In addition to directly binding to a method, you can also use inline JavaScript statements:
<div >
<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 modifier
In event processors, () or () is often called. Although we can do it easily within the method, it would be better to have the method be pure data logic without handling DOM event details.
To solve this problem, two event modifiers are provided for v-on: .prevent and .stop. Do you remember that the modifier is the instruction suffix that starts with the dot?
<!-- Prevent click events from bubbles --> <a v-on:="doThis"></a> <!-- Submit event no longer reloads the page --> <form v-on:="onSubmit"></form> <!-- Modifiers can be concatenated --> <a v-on:="doThat"> <!-- Only modifiers --> <form v-on:></form>
1.0.16 added two additional modifiers:
<!-- Used when adding event listeners capture model --> <div v-on:="doThis">...</div> <!-- Only when the event is in the element itself（Not child elements）Trigger callback when triggered --> <div v-on:="doThat">...</div>
Key modifier
When listening for keyboard events, we often need to detect keyCodes. Allows to add key modifiers to v-on:
<!-- Only in keyCode yes 13 Called on time () --> <input v-on:keyup.13="submit">
Remember that all keyCodes are difficult, providing alias for the most commonly used keys:
<!-- Same as above --> <input v-on:="submit"> <!-- Abbreviation grammar --> <input @="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:
// @keyup.f1 can be used('on').keyCodes.f1 = 112
Why 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 event handling methods and expressions are strictly bound to the ViewModel of the current view, which 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.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.