V-on command
I. Overview
v-on is used to bind event listeners. When used on ordinary elements, it can only listen to native DOM events . When used on custom element components, you can also listen to custom events triggered by child components.
When listening to native DOM events, the method takes the event as the only parameter. If an inline statement is used, the statement can access one $event property :v-on:click="handle('ok', $event)" .
Example
<!-- MethodHandler --> < button v-on:click ="doThis" ></ button > <!-- 内联语句 --> <button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 --> <button @click="doThis"></button> <!-- 停止冒泡 --> <button @click.stop="doThis"></button> <!-- Prevent default behavior --> < button @click.prevent ="doThis" ></ button > <!-- prevent default behavior, no expression --> < form @submit.prevent ></ form > <!-- Concatenation modifier --> < button @click.stop.prevent ="doThis" ></ button > <!-- key modifier, key alias --> < input @keyup.enter = "onEnter" > <!-- key modifier, keycode --> < input @keyup.13 ="onEnter" > <!-- The click callback will only fire once --> < button v-on:click.once ="doThis" ></ button > <!-- 对象语法 (2.4.0+) --> <button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
Listen to custom event on child component (event handler will be called when child component fires "my-event")
<my-component @my-event="handleThis"></my-component> <!-- 内联语句 --> <my-component @my-event="handleThis(123, $event)"></my-component> <!-- Native events in components --> < my-component @click.native = "onClick" ></ my-component >
2. Time processing
1. Monitor events
Directives can be used to v-on listen to DOM events and run some JavaScript code when triggered
Example
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
var example1 = new Vue({ el: '#example-1' , data: { counter: 0 } })
Result : every time the button is clicked, the counter of the p tag is incremented by 1
2. Event handling method
However, many event processing logic is more complex, so it is not feasible to write JavaScript code directly in the directive. So it can also receive a method name that needs to be called. v-onv-on
Example
< div id ="example-2" > <!-- `greet` is the method name defined below --> < button v-on:click ="greet" > Greet </ button > </ div >
var example2 = new Vue ({ el: '#example-2' , data: { name: 'Vue.js' }, // define methods in `methods` object methods: { greet: function (event) { // `this` points to the current Vue instance in the method alert('Hello ' + this .name + '!' ) // `event` is a native DOM event if (event) { alert(event.target.tagName) } } } }) // The method example2.greet() can also be called directly from JavaScript // => 'Hello Vue.js!'
Result : When the Green button is clicked, two prompt boxes will pop up in succession
3. Methods in an inline processor
In addition to binding directly to a method, methods can also be called from inline JavaScript statements
<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div>
new View({ el: '#example-3' , methods: { say: function (message) { alert(message) } } })
Result: When I click the Say hi button, the following prompt box will pop up.
It is also sometimes necessary to access raw DOM events in inline statement handlers. $event You can pass it into a method using a special variable
<button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button>
// ... methods: { warn: function (message, event) { // Now we can access the native event object if (event) event.preventDefault() alert(message) } }
4. Event modifiers
Called in an event handler or a very common need. While we could easily do this in a method, it's better if the method has pure data logic instead of dealing with DOM event details. event.preventDefault() event.stopPropagation()
To solve this problem, Vue.js v-on provides event modifiers for . As mentioned earlier, modifiers are represented by instruction suffixes beginning with a dot .
<!-- Stop the click event from continuing to propagate --> < a v-on:click.stop ="doThis" ></ a > <!-- Submit event no longer reloads page --> < form v-on:submit.prevent ="onSubmit" ></ form > <!-- modifiers can be concatenated --> < a v-on:click.stop.prevent ="doThat" ></ a > <!-- modifier only --> < form v-on:submit.prevent ></ form > <!-- Use event capture mode when adding event listeners --> <!-- The event triggered by the element itself is processed here first, and then handed over to the inner element for processing --> < div v-on:click .capture ="doThis" > ... </ div > <!-- The handler is triggered only when event.target is the current element itself --> <!-- The event is not triggered from the inner element --> < div v-on:click.self ="doThat" > ... </ div >
Note : When using modifiers, the order is important; the corresponding code will be generated in the same order. Therefore, using will prevent all clicks, but only clicks on the element itself. v-on:click.prevent.selfv-on:click.self.prevent
5. Key modifiers
When listening to keyboard events, we often need to check for common key values. Vue allows v-on adding key modifiers for listening to keyboard events:
<!-- Only call `vm.submit()` if `keyCode` is 13 --> < input v-on:keyup.13 ="submit" >
It 's hard to remember everything keyCode , so Vue provides aliases for the most commonly used keys
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- Abbreviated syntax --> < input @keyup.enter ="submit" >
All key aliases:
.enter.tab.delete(captures "delete" and "backspace" keys).esc.space.up.down.left.right
Think too much, do too little, the gap in the middle is trouble, either do it or don’t think about the lieutenant [15]