Event binding (v-on)
Example:
<div class="app">
<!--@yes v-on:Short form of-->
<button @click="myclick">click me</button>
</div>
var vm = new Vue({
el:'.app',
data:{ },
methods:{
myclick:function(){
console.log('Hello!') //Click the button and the console will print Hello!
}
}
});
Event modifier
Modifiers in Vue:
- prevent: block default events (common)
- stop: prevent event bubbling (common)
- Once: the event is triggered only once (common)
- Capture: capture mode using events
- self: the event is triggered only when event.target is the element of the current operation
- passive: the default behavior of the event is executed immediately without waiting for the event callback to complete
.prevent
<div class="app">
<!--@yes v-on:Short form of-->
<a href="http://www.baidu.com" @click.prevent="myclick">click me</a>
</div>
var vm = new Vue({
el:'.app',
data:{ },
methods:{
myclick:function(){
console.log('Hello!') //The. Prevent modifier is used to prevent clicking the link from jumping to the page by default and the console prints Hello!
}
}
});
.stop
<div class="app" @click="myclick">
<botton @click.stop="myclick">click me</botton>
</div>
var vm = new Vue({
el:'.app',
data:{ },
methods:{
myclick(){
alert('Hello!')
//If the div and botton nodes execute events, the results will be executed twice, so. stop prevents the execution of botton node events
}
}
});
.once
<div class="app">
<botton @click.once="myclick">click me</botton>
</div>
var vm = new Vue({
el:'.app',
data:{ },
methods:{
myclick(){
alert('Hello!')
//After the button is clicked, the event execution is triggered only once. If the button is clicked again, the event will no longer be executed
}
}
});
.capture
<div class="app" @click.capture="myclick(1)">
click
<div class="div_block" @click="myclick(2)">click me</div>
</div>
var vm = new Vue({
el:'.app',
data:{ },
methods:{
myclick(msg){
console.log(msg)
//Click click me in the div block of the inner layer. If the outer div does not have the. capture event modifier, the result of execution will be 21 (the result of bubbling after the event is executed)
//When the outer div has the. capture event modifier, the execution result will be 12 (the result captured when the event starts from outside to inside)
}
}
});
.self
<div class="app" @click.self="myclick">
<botton @click="myclick">click me</botton>
</div>
var vm = new Vue({
el:'.app',
data:{ },
methods:{
myclick(){
console.log(event.target) //event.target is < botton > Click me < / botton >
//Without the. self event modifier, the console prints out twice < botton > Click me < / botton >
//Therefore, if there is a. self event modifier, it will be printed out only once on the console
//From this, we can know that the. self event modifier can also prevent the bubbling behavior of events to some extent
}
}
});
.passive
<div class="app">
<!--There are two ways to trigger the position change of the scroll bar: mouse wheel scrolling and keyboard up and down keys-->
<!--@scroll="check"It is the event triggered by the movement of the scroll bar, and the end of the end of the slide rail of the scroll bar is the event triggered by the end-->
<!--@wheel="check"This is the trigger event for the movement of the mouse wheel. The event will be triggered as long as the mouse wheel changes-->
<ul class="list" @wheel.passive="check">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
var vm = new Vue({
el:'.app',
data:{ },
methods:{
//If there is no. passive event modifier, the mouse scroll wheel will trigger the event and execute it. After the event callback is executed, the default behavior will be triggered to move the page scroll bar
//Therefore, there is a. passive event modifier. When the mouse wheel scrolls, the priority scroll bar moves with it. At the same time, the event is triggered and the event callback is executed until the end
check(){
for(let i=0;i<100000;i++){
console.log('#')
}
console.log('Tired, destroy!')
}
}
});
.list{
width:200px;
height:20px;
background-color:#f56c6c;
overflow:auto
}
li{
height:100px;
}
Keyboard events
Keyboard events (common)
- keyup: the event will not be triggered until the key is pressed and released
- keydown: the event is triggered immediately when the key is pressed (without releasing)
Key aliases commonly used in Vue
- enter:. enter
- Delete:. Delete (capture delete and backspace)
- Exit:. esc
- space:. space
- Line feed:. tab
- up:. up
- down:. down
- left:. left
- right:. right
Example:
<div class="app">
<input placeholder="Press enter to prompt for input" @keyup.enter="show"/>
</div>
var vm = new Vue({
el:'.app',
data:{ },
methods:{
show(e){
console.log(e.target.value)
//If the keyboard event has no. enter key alias, you need to write the if interpretation key value
// if(e.keyCode!==13){return
// console.log(e.target.value) / / output the value in the input box
//}
}
}
});
be careful:
- The remaining keys Vue do not provide aliases, and can be bound with the original key value of the key. Note that it should be converted to kebab case (named by a dash) [. Enter can, but the case conversion. CapsLock cannot, and it must be converted to. Caps lock to work]
- Some keys cannot be captured
- The tab key is special. It fails when binding the keyboard event @ keyup. It does not trigger the event execution after releasing it, so it is applicable to bind the keyboard event @ keydown when using the tab key alias
- ctrl, alt, shift and meta keys are also special. There are problems with @ keyup keyboard events, because they are system modifier keys. When @ keyup is used, you need to press the modifier key and then press other keys and release other keys to trigger events. When @ keydown is used, you can trigger events
- You can also directly use the. Key code, but some browsers do not support it, so it is not recommended
Define key aliases (not recommended)
Vue.config.keyCodes.huiche = key codes
Use: @ keyboard event. huiche = "event name"
- Finally, add a little knowledge
Modifiers can also be written consecutively and executed in sequence, but the result is the same when they are executed in sequence