You can use the v-on directive to bind and listen for DOM events. The bound content can be a method on the current instance (no parentheses required) or an inline expression. If a method is provided, the native DOM event will be passed in as the first parameter, and the event will have the targetVM attribute, pointing to the corresponding ViewModel that triggers the event:
<div > <a v-on="click: onClick">Trigger a method function</a> <a v-on="click: n++">Trigger an expression</a> </div>
new Vue({
el: '#demo',
data: {
n: 0
},
methods: {
onClick: function (e) {
();
();// "A"
( === this);// true
}
}
});
Execute expressions
TargetVM is useful when using v-on in v-repeat because v-repeat creates a large number of subViewModels. However, by executing expressions, passing an alias representing the current ViewModel data object in is more convenient and intuitive:
<ul >
<li v-repeat="item in items" v-on="click: toggle(item)">
{{}}
</li>
<button v-on="click: submit('hello!', $event)">Submit</button>
</ul>
new Vue({
el: '#list',
data: {
items: [
{ text: 'one', done: true },
{ text: 'two', done: false }
]
},
methods: {
toggle: function (item) {
();
= !;
();
},
submit: function (msg, e) {
();
(msg + ' submit is called!');
}
}
})
When you want to access the original DOM event in the expression, you can pass a $event parameter into it.
key filter
When listening to keyboard events, we often need to judge the commonly used key code. Provides a special filter that can only be used in the v-on directive: key. It receives a parameter representing the key code and completes the judgment:
<!-- Only when keyCode equal 13 Call method only --> <input v-on="keyup:mySubmit | key 13">
The system has many preset values to use, for example:
<!-- The effect is the same as above --> <input v-on="keyup:submit | key 'enter'">
The default value is:enter tab delete esc up down left right space
Why use listeners in HTML
You may notice that the way the entire event is monitored 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. Actually, there are more benefits to using v-on:
It is convenient to easily locate the corresponding method implementation in JS code in HTML templates.
Because you don't have to manually bind events in JS, your ViewModel code can be very pure logic and completely decoupled from the DOM. This will be easier to test.
When a ViewModel is destroyed, all event listening will be automatically removed. You don't have to worry about how to clean them up on your own.
This article has been compiled intoFront-end component learning tutorial》, 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 study and I hope everyone will support me more.